Merged in feature/ExamGenRework (pull request #125)
ENCOA-274 Approved-by: Tiago Ribeiro
This commit is contained in:
carlos.mesquita
@@ -20,6 +20,9 @@ interface Props {
|
||||
|
||||
const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
|
||||
const { currentModule, dispatch } = useExamEditorStore();
|
||||
const { type, academic_url } = useExamEditorStore(
|
||||
(state) => state.modules[currentModule]
|
||||
);
|
||||
const { generating, genResult, state } = useExamEditorStore(
|
||||
(state) => state.modules[currentModule].sections.find((section) => section.sectionId === sectionId)!
|
||||
);
|
||||
@@ -68,7 +71,7 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
|
||||
...state,
|
||||
isPractice: !local.isPractice
|
||||
};
|
||||
setLocal((prev) => ({...prev, isPractice: !local.isPractice}))
|
||||
setLocal((prev) => ({ ...prev, isPractice: !local.isPractice }))
|
||||
dispatch({ type: 'UPDATE_SECTION_STATE', payload: { sectionId, update: newState, module: currentModule } });
|
||||
}
|
||||
});
|
||||
@@ -96,7 +99,7 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
|
||||
<>
|
||||
<div className={clsx('relative', level ? "px-4 mt-2" : "pb-2")}>
|
||||
<Header
|
||||
title={`${sectionId === 1 ? "Letter" : "Essay"} Instructions`}
|
||||
title={`${sectionId === 1 ? (type === "academic" ? "Visual Information" : "Letter") : "Essay"} Instructions`}
|
||||
description='Generate or edit the instructions for the task'
|
||||
editing={editing}
|
||||
handleSave={handleSave}
|
||||
@@ -112,7 +115,8 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
|
||||
<div className={clsx(level ? "mt-2 px-4" : "mt-4")}>
|
||||
{loading ?
|
||||
<GenLoader module={currentModule} /> :
|
||||
(
|
||||
<>
|
||||
{
|
||||
editing ? (
|
||||
<div className="text-gray-600 p-4">
|
||||
<AutoExpandingTextArea
|
||||
@@ -130,7 +134,17 @@ const Writing: React.FC<Props> = ({ sectionId, exercise, module, index }) => {
|
||||
{prompt === "" ? "Instructions ..." : prompt}
|
||||
</p>
|
||||
)
|
||||
}
|
||||
{academic_url && sectionId == 1 && (
|
||||
<div className="flex items-center justify-center mt-8">
|
||||
<div className="max-w-lg self-center rounded-xl cursor-pointer">
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img src={academic_url} alt="Visual Information" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
@@ -8,6 +8,7 @@ import { Module } from "@/interfaces";
|
||||
interface GeneratorConfig {
|
||||
method: 'GET' | 'POST';
|
||||
queryParams?: Record<string, string>;
|
||||
files?: Record<string, string>;
|
||||
body?: Record<string, any>;
|
||||
}
|
||||
|
||||
@@ -66,8 +67,49 @@ export function generate(
|
||||
|
||||
const url = `/api/exam/generate/${module}/${sectionId}${queryString ? `?${queryString}` : ''}`;
|
||||
|
||||
let body = null;
|
||||
console.log(config.files);
|
||||
if (config.files && Object.keys(config.files).length > 0 && config.method === 'POST') {
|
||||
const formData = new FormData();
|
||||
|
||||
const buildForm = async () => {
|
||||
await Promise.all(
|
||||
Object.entries(config.files ?? {}).map(async ([key, blobUrl]) => {
|
||||
const response = await fetch(blobUrl);
|
||||
const blob = await response.blob();
|
||||
const file = new File([blob], key, { type: blob.type });
|
||||
formData.append(key, file);
|
||||
})
|
||||
);
|
||||
|
||||
if (config.body) {
|
||||
Object.entries(config.body).forEach(([key, value]) => {
|
||||
formData.append(key, value as string);
|
||||
});
|
||||
}
|
||||
return formData;
|
||||
};
|
||||
|
||||
buildForm().then(form => {
|
||||
body = form;
|
||||
|
||||
const request = axios.post(url, body, { headers: { 'Content-Type': 'multipart/form-data' } });
|
||||
request
|
||||
.then((result) => {
|
||||
playSound("check");
|
||||
setGeneratedResult(level ? levelSectionId! : sectionId, type, mapData(result.data), level);
|
||||
})
|
||||
.catch((error) => {
|
||||
setGenerating(sectionId, undefined, level, true);
|
||||
playSound("error");
|
||||
toast.error("Something went wrong! Try to generate again.");
|
||||
});
|
||||
});
|
||||
} else {
|
||||
body = config.body;
|
||||
|
||||
const request = config.method === 'POST'
|
||||
? axios.post(url, config.body)
|
||||
? axios.post(url, body, { headers: { 'Content-Type': 'application/json' } })
|
||||
: axios.get(url);
|
||||
|
||||
request
|
||||
@@ -79,5 +121,6 @@ export function generate(
|
||||
setGenerating(sectionId, undefined, level, true);
|
||||
playSound("error");
|
||||
toast.error("Something went wrong! Try to generate again.");
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import React, { useCallback, useState } from "react";
|
||||
import React, { useCallback, useRef, useState } from "react";
|
||||
import Dropdown from "../Shared/SettingsDropdown";
|
||||
import Input from "@/components/Low/Input";
|
||||
import { generate } from "../Shared/Generate";
|
||||
@@ -6,6 +6,8 @@ import GenerateBtn from "../Shared/GenerateBtn";
|
||||
import { LevelSectionSettings, WritingSectionSettings } from "@/stores/examEditor/types";
|
||||
import useExamEditorStore from "@/stores/examEditor";
|
||||
import { WritingExercise } from "@/interfaces/exam";
|
||||
import clsx from "clsx";
|
||||
import { FaFileUpload } from "react-icons/fa";
|
||||
|
||||
|
||||
interface Props {
|
||||
@@ -15,14 +17,35 @@ interface Props {
|
||||
level?: boolean;
|
||||
}
|
||||
|
||||
const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, level}) => {
|
||||
const { currentModule } = useExamEditorStore();
|
||||
const WritingComponents: React.FC<Props> = ({ localSettings, updateLocalAndScheduleGlobal, level }) => {
|
||||
const { currentModule, dispatch } = useExamEditorStore();
|
||||
const {
|
||||
difficulty,
|
||||
focusedSection,
|
||||
type,
|
||||
academic_url
|
||||
} = useExamEditorStore((store) => store.modules["writing"]);
|
||||
|
||||
const generatePassage = useCallback((sectionId: number) => {
|
||||
if (type === "academic" && academic_url !== undefined && sectionId == 1) {
|
||||
generate(
|
||||
sectionId,
|
||||
currentModule,
|
||||
"writing",
|
||||
{
|
||||
method: 'POST',
|
||||
queryParams: {
|
||||
difficulty,
|
||||
type: type!
|
||||
},
|
||||
files: {
|
||||
file: academic_url!,
|
||||
}
|
||||
},
|
||||
(data: any) => [{
|
||||
prompt: data.question
|
||||
}]
|
||||
)
|
||||
} else {
|
||||
generate(
|
||||
sectionId,
|
||||
currentModule,
|
||||
@@ -31,6 +54,7 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
|
||||
method: 'GET',
|
||||
queryParams: {
|
||||
difficulty,
|
||||
type: type!,
|
||||
...(localSettings.writingTopic && { topic: localSettings.writingTopic })
|
||||
}
|
||||
},
|
||||
@@ -38,24 +62,80 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
|
||||
prompt: data.question
|
||||
}]
|
||||
);
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [localSettings.writingTopic, difficulty]);
|
||||
}, [localSettings.writingTopic, difficulty, academic_url]);
|
||||
|
||||
const onTopicChange = useCallback((writingTopic: string) => {
|
||||
updateLocalAndScheduleGlobal({ writingTopic });
|
||||
}, [updateLocalAndScheduleGlobal]);
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const triggerFileInput = () => {
|
||||
fileInputRef.current?.click();
|
||||
};
|
||||
|
||||
const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = event.target.files?.[0];
|
||||
if (file) {
|
||||
const blobUrl = URL.createObjectURL(file);
|
||||
if (academic_url !== undefined) {
|
||||
URL.revokeObjectURL(academic_url);
|
||||
}
|
||||
dispatch({ type: "UPDATE_MODULE", payload: { updates: { academic_url: blobUrl } } });
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Dropdown
|
||||
{type === "academic" && focusedSection === 1 && <Dropdown
|
||||
title="Upload Image"
|
||||
module={"writing"}
|
||||
open={localSettings.isImageUploadOpen}
|
||||
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isImageUploadOpen: isOpen }, false)}
|
||||
contentWrapperClassName={level ? `border border-ielts-writing` : ''}
|
||||
>
|
||||
<div className="flex flex-row gap-2 items-center px-2 pb-4">
|
||||
|
||||
<div className="flex flex-row p-2 gap-4">
|
||||
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
|
||||
Upload a graph, chart or diagram
|
||||
</span>
|
||||
<input
|
||||
type="file"
|
||||
accept="image/png, image/jpeg"
|
||||
onChange={handleFileUpload}
|
||||
style={{ display: 'none' }}
|
||||
ref={fileInputRef}
|
||||
/>
|
||||
<button
|
||||
key={`section-${focusedSection}`}
|
||||
className={clsx(
|
||||
"flex items-center w-[140px] px-4 py-2 text-white rounded-xl transition-colors duration-300 text-lg disabled:cursor-not-allowed",
|
||||
`bg-ielts-writing/70 border border-ielts-writing hover:bg-ielts-writing disabled:bg-ielts-writing/40`,
|
||||
)}
|
||||
onClick={triggerFileInput}
|
||||
>
|
||||
<div className="flex flex-row">
|
||||
<FaFileUpload className="mr-2" size={24} />
|
||||
<span>Upload</span>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>}
|
||||
{
|
||||
(type !== "academic" || (type === "academic" && academic_url !== undefined)) && <Dropdown
|
||||
title="Generate Instructions"
|
||||
module={"writing"}
|
||||
open={localSettings.isWritingTopicOpen}
|
||||
setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
|
||||
contentWrapperClassName={level ? `border border-ielts-writing`: ''}
|
||||
contentWrapperClassName={level ? `border border-ielts-writing` : ''}
|
||||
>
|
||||
|
||||
<div className="flex flex-row gap-2 items-center px-2 pb-4">
|
||||
{type !== "academic" ?
|
||||
<div className="flex flex-col flex-grow gap-4 px-2">
|
||||
<label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
|
||||
<Input
|
||||
@@ -68,6 +148,13 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
|
||||
value={localSettings.writingTopic}
|
||||
/>
|
||||
</div>
|
||||
:
|
||||
<div className="flex flex-col flex-grow gap-4 px-2">
|
||||
<span className="bg-gray-100 px-3.5 py-2.5 rounded-lg border border-gray-300 text-mti-gray-dim">
|
||||
Generate instructions based on the uploaded image.
|
||||
</span>
|
||||
</div>
|
||||
}
|
||||
<div className="flex self-end h-16 mb-1">
|
||||
<GenerateBtn
|
||||
genType="writing"
|
||||
@@ -78,6 +165,7 @@ const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndSchedu
|
||||
</div>
|
||||
</div>
|
||||
</Dropdown>
|
||||
}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -8,7 +8,6 @@ import { useRouter } from "next/router";
|
||||
import { usePersistentExamStore } from "@/stores/exam";
|
||||
import openDetachedTab from "@/utils/popout";
|
||||
import { WritingExam, WritingExercise } from "@/interfaces/exam";
|
||||
import { v4 } from "uuid";
|
||||
import axios from "axios";
|
||||
import { playSound } from "@/utils/sound";
|
||||
import { toast } from "react-toastify";
|
||||
@@ -25,7 +24,8 @@ const WritingSettings: React.FC = () => {
|
||||
isPrivate,
|
||||
sections,
|
||||
focusedSection,
|
||||
type
|
||||
type,
|
||||
academic_url
|
||||
} = useExamEditorStore((store) => store.modules["writing"]);
|
||||
|
||||
const states = sections.flatMap((s) => s.state) as WritingExercise[];
|
||||
@@ -58,8 +58,16 @@ const WritingSettings: React.FC = () => {
|
||||
|
||||
const openTab = () => {
|
||||
setExam({
|
||||
exercises: sections.map((s) => {
|
||||
exercises: sections.map((s, index) => {
|
||||
const exercise = s.state as WritingExercise;
|
||||
if (type === "academic" && index == 0 && academic_url) {
|
||||
console.log("Added the URL");
|
||||
exercise["attachment"] = {
|
||||
url: academic_url,
|
||||
description: "Visual Information"
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...exercise,
|
||||
intro: s.settings.currentIntro,
|
||||
@@ -79,10 +87,40 @@ const WritingSettings: React.FC = () => {
|
||||
openDetachedTab("popout?type=Exam&module=writing", router)
|
||||
}
|
||||
|
||||
const submitWriting = () => {
|
||||
const submitWriting = async () => {
|
||||
if (title === "") {
|
||||
toast.error("Enter a title for the exam!");
|
||||
return;
|
||||
}
|
||||
try {
|
||||
let firebase_url: string | undefined = undefined;
|
||||
if (type === "academic" && academic_url) {
|
||||
const formData = new FormData();
|
||||
const fetchedBlob = await fetch(academic_url);
|
||||
const blob = await fetchedBlob.blob();
|
||||
formData.append('file', blob);
|
||||
|
||||
const response = await axios.post('/api/storage', formData, {
|
||||
params: {
|
||||
directory: 'writing_attachments'
|
||||
},
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data'
|
||||
}
|
||||
});
|
||||
firebase_url = response.data.urls[0];
|
||||
}
|
||||
|
||||
const exam: WritingExam = {
|
||||
exercises: sections.map((s) => {
|
||||
exercises: sections.map((s, index) => {
|
||||
const exercise = s.state as WritingExercise;
|
||||
if (index == 0 && firebase_url) {
|
||||
exercise["attachment"] = {
|
||||
url: firebase_url,
|
||||
description: "Visual Information"
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
...exercise,
|
||||
intro: localSettings.currentIntro,
|
||||
@@ -99,16 +137,16 @@ const WritingSettings: React.FC = () => {
|
||||
type: type!
|
||||
};
|
||||
|
||||
axios
|
||||
.post(`/api/exam/reading`, exam)
|
||||
.then((result) => {
|
||||
const result = await axios.post(`/api/exam/writing`, exam)
|
||||
playSound("sent");
|
||||
toast.success(`Submitted Exam ID: ${result.data.id}`);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
|
||||
})
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('Error submitting exam:', error);
|
||||
toast.error(
|
||||
"Something went wrong while submitting, please try again later."
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
77
src/components/UserImportSummary/ExcelError.tsx
Normal file
77
src/components/UserImportSummary/ExcelError.tsx
Normal file
@@ -0,0 +1,77 @@
|
||||
import React from 'react';
|
||||
import { FiAlertCircle } from "react-icons/fi";
|
||||
import Dropdown from '../Dropdown';
|
||||
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
|
||||
|
||||
const ParseExcelErrors: React.FC<{ errors: ExcelError[] }> = (props) => {
|
||||
const errorsByRow = errorsByRows(props.errors);
|
||||
|
||||
const ErrorTitle = (row: string) => (
|
||||
<div className="flex gap-2 items-center w-full">
|
||||
<FiAlertCircle className="text-red-500 h-5 w-5" />
|
||||
<h3 className="text-sm font-medium text-red-800">
|
||||
Errors found in row {row}
|
||||
</h3>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{Object.entries(errorsByRow).map(([row, rowErrors]) => (
|
||||
<div key={`row-${row}`} className="bg-red-50 rounded-lg">
|
||||
<Dropdown
|
||||
customTitle={ErrorTitle(row)}
|
||||
className="w-full text-left font-semibold flex justify-between items-center p-4"
|
||||
contentWrapperClassName="px-4 pb-4"
|
||||
>
|
||||
<div className="space-y-3">
|
||||
{rowErrors.required.length > 0 && (
|
||||
<div className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors">
|
||||
<div className="font-medium">
|
||||
Missing values:
|
||||
</div>
|
||||
<div className="text-red-600 mt-1 ml-2">
|
||||
<span>
|
||||
On columns:
|
||||
</span>
|
||||
<span className="font-mono bg-red-100/50 px-1 rounded">
|
||||
{rowErrors.required.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{rowErrors.other.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
{rowErrors.other.map((error, index) => (
|
||||
<div
|
||||
key={`validation-${index}`}
|
||||
className="bg-white/50 rounded border border-red-200 p-2 text-sm text-red-700 hover:bg-white transition-colors"
|
||||
>
|
||||
<div className="font-medium">
|
||||
{error.error}:
|
||||
</div>
|
||||
<div className="text-red-600 mt-1 ml-2">
|
||||
Value
|
||||
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
|
||||
{error.value}
|
||||
</span>
|
||||
in column
|
||||
<span className="font-mono bg-red-100/50 px-1 mx-2 rounded">
|
||||
{error.column}
|
||||
</span>
|
||||
is invalid!
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</Dropdown>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ParseExcelErrors;
|
||||
298
src/components/UserImportSummary/index.tsx
Normal file
298
src/components/UserImportSummary/index.tsx
Normal file
@@ -0,0 +1,298 @@
|
||||
import React, { useState, useMemo } from 'react';
|
||||
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';
|
||||
import {
|
||||
FaCheckCircle,
|
||||
FaTimesCircle,
|
||||
FaExclamationCircle,
|
||||
FaInfoCircle,
|
||||
FaUsers,
|
||||
FaExclamationTriangle
|
||||
} from 'react-icons/fa';
|
||||
import { UserImport } from '@/interfaces/IUserImport';
|
||||
import Modal from '../Modal';
|
||||
import ParseExcelErrors from './ExcelError';
|
||||
import { errorsByRows, ExcelError } from '@/utils/excel.errors';
|
||||
import UserTable from '../UserTable';
|
||||
|
||||
interface Props {
|
||||
parsedExcel: { rows?: any[]; errors?: any[] },
|
||||
newUsers: UserImport[],
|
||||
enlistedUsers: UserImport[],
|
||||
duplicateRows?: { duplicates: DuplicatesMap, count: number }
|
||||
}
|
||||
|
||||
export interface DuplicatesMap {
|
||||
studentID: Map<string, number[]>;
|
||||
email: Map<string, number[]>;
|
||||
passport_id: Map<string, number[]>;
|
||||
phone: Map<string, number[]>;
|
||||
}
|
||||
|
||||
interface ClassroomCounts {
|
||||
[key: string]: number;
|
||||
}
|
||||
|
||||
|
||||
const UserImportSummary: React.FC<Props> = ({ parsedExcel, newUsers, enlistedUsers, duplicateRows }) => {
|
||||
const [showErrorsModal, setShowErrorsModal] = useState(false);
|
||||
const [showDuplicatesModal, setShowDuplicatesModal] = useState(false);
|
||||
const [showEnlistedModal, setShowEnlistedModal] = useState(false);
|
||||
const [showClassroomModal, setShowClassromModal] = useState(false);
|
||||
|
||||
const classroomCounts = useMemo(() => {
|
||||
return newUsers.reduce((acc: ClassroomCounts, user) => {
|
||||
const group = user.groupName;
|
||||
acc[group] = (acc[group] || 0) + 1;
|
||||
return acc;
|
||||
}, {});
|
||||
}, [newUsers]);
|
||||
|
||||
const errorCount = Object.entries(errorsByRows(parsedExcel.errors as ExcelError[])).length || 0;
|
||||
|
||||
const fieldMapper = {
|
||||
"studentID": "Student ID",
|
||||
"passport_id": "Passport/National ID",
|
||||
"phone": "Phone Number",
|
||||
"email": "E-mail"
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className='flex justify-center font-semibold text-xl'>Import Summary</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaInfoCircle className="h-5 w-5 text-blue-500" />
|
||||
<span>
|
||||
{`${parsedExcel.rows?.length} total spreadsheet rows`}
|
||||
{parsedExcel.rows && parsedExcel.rows.filter(row => row === null).length > 0 && (
|
||||
<span className="text-gray-500">
|
||||
{` (${parsedExcel.rows.filter(row => row === null).length} empty)`}
|
||||
</span>
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
{newUsers.length > 0 ? (
|
||||
<FaCheckCircle className="h-5 w-5 text-green-500" />
|
||||
) : (
|
||||
<FaTimesCircle className="h-5 w-5 text-red-500" />
|
||||
)}
|
||||
<span>{`${newUsers.length} new user${newUsers.length > 1 ? "s" : ''} to import`}</span>
|
||||
</div>
|
||||
{newUsers.length > 0 && (
|
||||
<button
|
||||
onClick={() => setShowClassromModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View by classroom
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{enlistedUsers.length > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaUsers className="h-5 w-5 text-blue-500" />
|
||||
<span>{`${enlistedUsers.length} already registered user${enlistedUsers.length > 1 ? "s" : ''}`}</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowEnlistedModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View details
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{(duplicateRows && duplicateRows.count > 0) && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaExclamationCircle className="h-5 w-5 text-yellow-500" />
|
||||
<span>{duplicateRows.count} duplicate entries in file</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowDuplicatesModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View duplicates
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{errorCount > 0 && (
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<FaTimesCircle className="h-5 w-5 text-red-500" />
|
||||
<span>{errorCount} invalid rows</span>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setShowErrorsModal(true)}
|
||||
className="inline-flex items-center justify-center px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-900 hover:bg-gray-100 rounded-md transition-colors"
|
||||
>
|
||||
View errors
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{(enlistedUsers.length > 0 || (duplicateRows && duplicateRows.count > 0) || errorCount > 0) && (
|
||||
<div className="mt-6 rounded-lg border border-red-100 bg-white p-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="mt-1">
|
||||
<FaExclamationTriangle className="h-5 w-5 text-red-400" />
|
||||
</div>
|
||||
<div className="flex-1 space-y-3">
|
||||
<p className="font-medium text-gray-900">
|
||||
The following will be excluded from import:
|
||||
</p>
|
||||
<ul className="space-y-4">
|
||||
{duplicateRows && duplicateRows.count > 0 && (
|
||||
<li>
|
||||
<div className="text-gray-700">
|
||||
<span className="font-medium">{duplicateRows.count}</span> rows with duplicate values
|
||||
</div>
|
||||
<div className="mt-2 space-y-1.5">
|
||||
{(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
|
||||
const duplicates = Array.from(duplicateRows.duplicates[field].entries())
|
||||
.filter((entry) => entry[1].length > 1);
|
||||
if (duplicates.length === 0) return null;
|
||||
return (
|
||||
<div key={field} className="ml-4 text-sm text-gray-600">
|
||||
<span className="text-gray-500">{field}:</span> rows {
|
||||
duplicates.map(([_, rows]) => rows.join(', ')).join('; ')
|
||||
}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
{errorCount > 0 && (
|
||||
<li>
|
||||
<div className="text-gray-700">
|
||||
<span className="font-medium">{errorCount}</span> rows with invalid or missing information
|
||||
</div>
|
||||
<div className="mt-1 ml-4 text-sm text-gray-600">
|
||||
Rows: {Object.keys(errorsByRows(parsedExcel.errors || [])).join(', ')}
|
||||
</div>
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Modal isOpen={showErrorsModal} onClose={() => setShowErrorsModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaTimesCircle className="w-5 h-5 text-red-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Validation Errors</h2>
|
||||
</div>
|
||||
<ParseExcelErrors errors={parsedExcel.errors!} />
|
||||
</>
|
||||
</Modal>
|
||||
|
||||
<Modal isOpen={showEnlistedModal} onClose={() => setShowEnlistedModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaUsers className="w-5 h-5 text-blue-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Already Registered Users</h2>
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<UserTable users={enlistedUsers} />
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
|
||||
<Modal isOpen={showDuplicatesModal} onClose={() => setShowDuplicatesModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaExclamationCircle className="w-5 h-5 text-amber-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Duplicate Entries</h2>
|
||||
</div>
|
||||
{duplicateRows &&
|
||||
< div className="space-y-6">
|
||||
{(Object.keys(duplicateRows.duplicates) as Array<keyof DuplicatesMap>).map(field => {
|
||||
const duplicates = Array.from(duplicateRows!.duplicates[field].entries())
|
||||
.filter((entry): entry is [string, number[]] => entry[1].length > 1);
|
||||
|
||||
if (duplicates.length === 0) return null;
|
||||
|
||||
return (
|
||||
<div key={field} className="relative">
|
||||
<div className="flex items-center gap-2 mb-3">
|
||||
<h2 className="text-md font-medium text-gray-700">
|
||||
{fieldMapper[field]} duplicates
|
||||
</h2>
|
||||
<span className="text-xs text-gray-500 ml-auto">
|
||||
{duplicates.length} {duplicates.length === 1 ? 'duplicate' : 'duplicates'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
{duplicates.map(([value, rows]) => (
|
||||
<div
|
||||
key={value}
|
||||
className="group relative rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<span className="font-medium text-gray-900">{value}</span>
|
||||
<div className="mt-1 text-sm text-gray-600">
|
||||
Appears in rows:
|
||||
<span className="ml-1 text-blue-600 font-medium">
|
||||
{rows.join(', ')}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500">
|
||||
{rows.length} occurrences
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
}
|
||||
</>
|
||||
</Modal >
|
||||
|
||||
<Modal isOpen={showClassroomModal} onClose={() => setShowClassromModal(false)}>
|
||||
<>
|
||||
<div className="flex items-center gap-2 mb-6">
|
||||
<FaCheckCircle className="w-5 h-5 text-green-500" />
|
||||
<h2 className="text-lg font-semibold text-gray-900">Students by Classroom</h2>
|
||||
</div>
|
||||
<div className="space-y-3">
|
||||
{Object.entries(classroomCounts).map(([classroom, count]) => (
|
||||
<div
|
||||
key={classroom}
|
||||
className="flex justify-between items-center rounded-lg border border-gray-200 bg-gray-50 p-3 hover:bg-gray-100 transition-colors"
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-gray-700">{classroom}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm font-medium text-gray-900">{count}</span>
|
||||
<span className="text-sm text-gray-500">students</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</>
|
||||
</Modal>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserImportSummary;
|
||||
@@ -6,14 +6,13 @@ import { toast } from "react-toastify";
|
||||
import { useFilePicker } from "use-file-picker";
|
||||
import readXlsxFile from "read-excel-file";
|
||||
import Modal from "@/components/Modal";
|
||||
import { BsQuestionCircleFill } from "react-icons/bs";
|
||||
import { PermissionType } from "@/interfaces/permissions";
|
||||
import moment from "moment";
|
||||
import { checkAccess, getTypesOfUser } from "@/utils/permissions";
|
||||
import Checkbox from "@/components/Low/Checkbox";
|
||||
import ReactDatePicker from "react-datepicker";
|
||||
import clsx from "clsx";
|
||||
import countryCodes from "country-codes-list";
|
||||
import countryCodes, { CountryData } from "country-codes-list";
|
||||
import { User, Type as UserType } from "@/interfaces/user";
|
||||
import { Type, UserImport } from "../../../interfaces/IUserImport";
|
||||
import UserTable from "../../../components/UserTable";
|
||||
@@ -22,6 +21,7 @@ import Select from "@/components/Low/Select";
|
||||
import { IoInformationCircleOutline } from "react-icons/io5";
|
||||
import { FaFileDownload } from "react-icons/fa";
|
||||
import { HiOutlineDocumentText } from "react-icons/hi";
|
||||
import UserImportSummary, { DuplicatesMap } from "@/components/UserImportSummary";
|
||||
|
||||
const EMAIL_REGEX = new RegExp(/^[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*@[a-zA-Z0-9]+(?:\.[a-zA-Z0-9]+)*$/);
|
||||
|
||||
@@ -71,11 +71,14 @@ interface Props {
|
||||
onFinish: () => void;
|
||||
}
|
||||
|
||||
|
||||
export default function BatchCreateUser({ user, entities = [], permissions, onFinish }: Props) {
|
||||
const [infos, setInfos] = useState<UserImport[]>([]);
|
||||
const [parsedExcel, setParsedExcel] = useState<{ rows?: any[]; errors?: any[] }>({ rows: undefined, errors: undefined });
|
||||
|
||||
const [duplicatedUsers, setDuplicatedUsers] = useState<UserImport[]>([]);
|
||||
const [newUsers, setNewUsers] = useState<UserImport[]>([]);
|
||||
const [duplicatedRows, setDuplicatedRows] = useState<{ duplicates: DuplicatesMap, count: number }>();
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [expiryDate, setExpiryDate] = useState<Date | null>(
|
||||
@@ -96,21 +99,163 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
|
||||
if (!isExpiryDateEnabled) setExpiryDate(null);
|
||||
}, [isExpiryDateEnabled]);
|
||||
|
||||
const schema = {
|
||||
'First Name': {
|
||||
prop: 'firstName',
|
||||
type: String,
|
||||
required: true,
|
||||
validate: (value: string) => {
|
||||
if (!value || value.trim() === '') {
|
||||
throw new Error('First Name cannot be empty')
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
'Last Name': {
|
||||
prop: 'lastName',
|
||||
type: String,
|
||||
required: true,
|
||||
validate: (value: string) => {
|
||||
if (!value || value.trim() === '') {
|
||||
throw new Error('Last Name cannot be empty')
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
'Student ID': {
|
||||
prop: 'studentID',
|
||||
type: String,
|
||||
required: true,
|
||||
validate: (value: string) => {
|
||||
if (!value || value.trim() === '') {
|
||||
throw new Error('Student ID cannot be empty')
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
'Passport/National ID': {
|
||||
prop: 'passport_id',
|
||||
type: String,
|
||||
required: true,
|
||||
validate: (value: string) => {
|
||||
if (!value || value.trim() === '') {
|
||||
throw new Error('Passport/National ID cannot be empty')
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
'E-mail': {
|
||||
prop: 'email',
|
||||
required: true,
|
||||
type: (value: any) => {
|
||||
if (!value || value.trim() === '') {
|
||||
throw new Error('Email cannot be empty')
|
||||
}
|
||||
if (!EMAIL_REGEX.test(value.trim())) {
|
||||
throw new Error('Invalid Email')
|
||||
}
|
||||
return value
|
||||
}
|
||||
},
|
||||
'Phone Number': {
|
||||
prop: 'phone',
|
||||
type: Number,
|
||||
required: true,
|
||||
validate: (value: number) => {
|
||||
if (value === null || value === undefined || String(value).trim() === '') {
|
||||
throw new Error('Phone Number cannot be empty')
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
'Classroom Name': {
|
||||
prop: 'group',
|
||||
type: String,
|
||||
required: true,
|
||||
validate: (value: string) => {
|
||||
if (!value || value.trim() === '') {
|
||||
throw new Error('Classroom Name cannot be empty')
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
'Country': {
|
||||
prop: 'country',
|
||||
type: (value: any) => {
|
||||
if (!value || value.trim() === '') {
|
||||
throw new Error('Country cannot be empty')
|
||||
}
|
||||
const validCountry = countryCodes.findOne("countryCode" as any, value.toUpperCase()) ||
|
||||
countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === value.toLowerCase());
|
||||
if (!validCountry) {
|
||||
throw new Error('Invalid Country/Country Code')
|
||||
}
|
||||
return validCountry;
|
||||
},
|
||||
required: true
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (filesContent.length > 0) {
|
||||
const file = filesContent[0];
|
||||
readXlsxFile(file.content).then((rows) => {
|
||||
try {
|
||||
const information = uniqBy(
|
||||
rows
|
||||
.map((row) => {
|
||||
const [firstName, lastName, studentID, passport_id, email, phone, group, country] = row as string[];
|
||||
const countryItem =
|
||||
countryCodes.findOne("countryCode" as any, country.toUpperCase()) ||
|
||||
countryCodes.all().find((x) => x.countryNameEn.toLowerCase() === country.toLowerCase());
|
||||
readXlsxFile(
|
||||
file.content, { schema, ignoreEmptyRows: false })
|
||||
.then((data) => {
|
||||
setParsedExcel(data)
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [filesContent]);
|
||||
|
||||
return EMAIL_REGEX.test(email.toString().trim())
|
||||
? {
|
||||
useEffect(() => {
|
||||
if (parsedExcel.rows) {
|
||||
const duplicates: DuplicatesMap = {
|
||||
studentID: new Map(),
|
||||
email: new Map(),
|
||||
passport_id: new Map(),
|
||||
phone: new Map()
|
||||
};
|
||||
const duplicateValues = new Set<string>();
|
||||
const duplicateRowIndices = new Set<number>();
|
||||
|
||||
const errorRowIndices = new Set(
|
||||
parsedExcel.errors?.map(error => error.row) || []
|
||||
);
|
||||
|
||||
parsedExcel.rows.forEach((row, index) => {
|
||||
if (!errorRowIndices.has(index + 2)) {
|
||||
(Object.keys(duplicates) as Array<keyof DuplicatesMap>).forEach(field => {
|
||||
if (row !== null) {
|
||||
const value = row[field];
|
||||
if (value) {
|
||||
if (!duplicates[field].has(value)) {
|
||||
duplicates[field].set(value, [index + 2]);
|
||||
} else {
|
||||
const existingRows = duplicates[field].get(value);
|
||||
if (existingRows) {
|
||||
existingRows.push(index + 2);
|
||||
duplicateValues.add(value);
|
||||
existingRows.forEach(rowNum => duplicateRowIndices.add(rowNum));
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
const infos = parsedExcel.rows
|
||||
.map((row, index) => {
|
||||
if (errorRowIndices.has(index + 2) || duplicateRowIndices.has(index + 2) || row === null) {
|
||||
return undefined;
|
||||
}
|
||||
const { firstName, lastName, studentID, passport_id, email, phone, group, country } = row;
|
||||
if (!email || !EMAIL_REGEX.test(email.toString().trim())) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
return {
|
||||
email: email.toString().trim().toLowerCase(),
|
||||
name: `${firstName ?? ""} ${lastName ?? ""}`.trim(),
|
||||
type: type,
|
||||
@@ -119,37 +264,21 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
|
||||
studentID,
|
||||
entity,
|
||||
demographicInformation: {
|
||||
country: countryItem?.countryCode,
|
||||
country: country?.countryCode,
|
||||
passport_id: passport_id?.toString().trim() || undefined,
|
||||
phone: phone.toString(),
|
||||
},
|
||||
}
|
||||
: undefined;
|
||||
} as UserImport;
|
||||
})
|
||||
.filter((x) => !!x) as typeof infos,
|
||||
(x) => x.email,
|
||||
);
|
||||
.filter((item): item is UserImport => item !== undefined);
|
||||
|
||||
if (information.length === 0) {
|
||||
toast.error(
|
||||
"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
|
||||
);
|
||||
return clear();
|
||||
setDuplicatedRows({ duplicates, count: duplicateRowIndices.size });
|
||||
setInfos(infos);
|
||||
setNewUsers([]);
|
||||
setDuplicatedUsers([]);
|
||||
}
|
||||
}, [entity, parsedExcel, type]);
|
||||
|
||||
setInfos(information);
|
||||
} catch (e) {
|
||||
console.log(e)
|
||||
|
||||
toast.error(
|
||||
"Please upload an Excel file containing user information, one per line! All already registered e-mails have also been ignored!",
|
||||
);
|
||||
return clear();
|
||||
}
|
||||
});
|
||||
}
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [filesContent]);
|
||||
|
||||
useEffect(() => {
|
||||
const crossReferenceEmails = async () => {
|
||||
@@ -185,12 +314,12 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
|
||||
if (!confirm(`You are about to ${[newUsersSentence, existingUsersSentence].filter((x) => !!x).join(" and ")}, are you sure you want to continue?`))
|
||||
return;
|
||||
|
||||
/*Promise.all(duplicatedUsers.map(async (u) => await axios.post(`/api/invites`, {to: u.id, entity, from: user.id})))
|
||||
.then(() => toast.success(`Successfully invited ${duplicatedUsers.length} registered student(s)!`))
|
||||
Promise.all(newUsers.map(async (u) => await axios.post(`/api/invites`, { to: u.id, entity, from: user.id })))
|
||||
.then(() => toast.success(`Successfully invited ${newUsers.length} registered student(s)!`))
|
||||
.finally(() => {
|
||||
if (newUsers.length === 0) setIsLoading(false);
|
||||
});
|
||||
*/
|
||||
|
||||
if (newUsers.length > 0) {
|
||||
setIsLoading(true);
|
||||
|
||||
@@ -246,7 +375,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
|
||||
be an Excel .xlsx document.
|
||||
</li>
|
||||
<li className="text-gray-700 list-disc">
|
||||
only have a single spreadsheet with only the following 8 columns in the <b>same order</b>:
|
||||
only have a single spreadsheet with the following <b>exact same name</b> columns:
|
||||
<div className="py-4 pr-4">
|
||||
<table className="w-full bg-white">
|
||||
<thead>
|
||||
@@ -281,7 +410,7 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
|
||||
all already registered e-mails will be ignored.
|
||||
</li>
|
||||
<li className="text-gray-700 list-disc">
|
||||
the spreadsheet may have a header row with the format above, however, it is not necessary as long the columns are in the <b>right order</b>.
|
||||
all rows which contain duplicate values in the columns: "Student ID", "Passport/National ID", "E-mail", will be ignored.
|
||||
</li>
|
||||
<li className="text-gray-700 list-disc">
|
||||
all of the e-mails in the file will receive an e-mail to join EnCoach with the role selected below.
|
||||
@@ -380,20 +509,16 @@ export default function BatchCreateUser({ user, entities = [], permissions, onFi
|
||||
))}
|
||||
</select>
|
||||
)}
|
||||
{parsedExcel.rows !== undefined && <UserImportSummary parsedExcel={parsedExcel} newUsers={newUsers} enlistedUsers={duplicatedUsers} duplicateRows={duplicatedRows} />}
|
||||
{newUsers.length !== 0 && (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<span className="text-mti-gray-dim text-base font-normal">New Users:</span>
|
||||
<UserTable users={newUsers} />
|
||||
</div>
|
||||
)}
|
||||
{duplicatedUsers.length !== 0 && (
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<span className="text-mti-gray-dim text-base font-normal">Duplicated Users:</span>
|
||||
<UserTable users={duplicatedUsers} />
|
||||
</div>
|
||||
)}
|
||||
{(duplicatedUsers.length !== 0 && newUsers.length === 0) && <span className="text-red-500 font-bold">The imported .csv only contains duplicated users!</span>}
|
||||
<Button className="my-auto mt-4" onClick={makeUsers} disabled={newUsers.length === 0}>
|
||||
Create {newUsers.length !== 0 ? `${newUsers.length} New Users` : ''}
|
||||
Create {newUsers.length !== 0 ? `${newUsers.length} new user${newUsers.length > 1 ? 's' : ''}` : ''}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
|
||||
@@ -11,7 +11,7 @@ import Reading from "@/exams/Reading";
|
||||
import Selection from "@/exams/Selection";
|
||||
import Speaking from "@/exams/Speaking";
|
||||
import Writing from "@/exams/Writing";
|
||||
import { Exam, LevelExam, UserSolution, Variant } from "@/interfaces/exam";
|
||||
import { Exam, LevelExam, UserSolution, Variant, WritingExam } from "@/interfaces/exam";
|
||||
import { User } from "@/interfaces/user";
|
||||
import { evaluateSpeakingAnswer, evaluateWritingAnswer } from "@/utils/evaluation";
|
||||
import { getExam } from "@/utils/exams";
|
||||
@@ -127,7 +127,7 @@ export default function ExamPage({ page, user, destination = "/", hideSidebar =
|
||||
await Promise.all(
|
||||
exam.exercises.map(async (exercise, index) => {
|
||||
if (exercise.type === "writing")
|
||||
await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!);
|
||||
await evaluateWritingAnswer(user.id, sessionId, exercise, index + 1, userSolutions.find((x) => x.exercise === exercise.id)!, exercise.attachment?.url);
|
||||
|
||||
if (exercise.type === "interactiveSpeaking" || exercise.type === "speaking") {
|
||||
await evaluateSpeakingAnswer(
|
||||
|
||||
@@ -65,7 +65,8 @@ async function POST(req: NextApiRequest, res: NextApiResponse) {
|
||||
// Check whether the id of the exam matches another exam with different
|
||||
// owners, throw exception if there is, else allow editing
|
||||
const ownersSet = new Set(docSnap?.owners || []);
|
||||
if (docSnap?.owners?.length === exam.owners.lenght && exam.owners.every((e: string) => ownersSet.has(e))) {
|
||||
|
||||
if (docSnap !== null && docSnap?.owners?.length === exam.owners.lenght && exam.owners.every((e: string) => ownersSet.has(e))) {
|
||||
throw new Error("Name already exists");
|
||||
}
|
||||
|
||||
|
||||
@@ -31,6 +31,7 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
|
||||
if (!req.session.user) return res.status(401).json({ ok: false });
|
||||
|
||||
const queryParams = queryToURLSearchParams(req);
|
||||
|
||||
let endpoint = queryParams.getAll('module').join("/");
|
||||
|
||||
if (endpoint.startsWith("level")) {
|
||||
@@ -41,12 +42,27 @@ async function post(req: NextApiRequest, res: NextApiResponse) {
|
||||
endpoint = "reading/"
|
||||
}
|
||||
|
||||
const result = await axios.post(`${process.env.BACKEND_URL}/${endpoint}`,
|
||||
req.body,
|
||||
{
|
||||
headers: { Authorization: `Bearer ${process.env.BACKEND_JWT}` },
|
||||
},
|
||||
);
|
||||
queryParams.delete('module');
|
||||
const queryString = queryParams.toString();
|
||||
|
||||
res.status(200).json(result.data);
|
||||
const hasFiles = req.headers['content-type']?.startsWith('multipart/form-data');
|
||||
|
||||
// https://github.com/vercel/next.js/discussions/36153#discussioncomment-3029675
|
||||
// This just proxies the request
|
||||
|
||||
const { data } = await axios.post(
|
||||
`${process.env.BACKEND_URL}/${endpoint}${hasFiles ? '/attachment' : ''}${queryString.length > 0 ? `?${queryString}` : ''}`, req, {
|
||||
responseType: "stream",
|
||||
headers: {
|
||||
"Content-Type": req.headers["content-type"],
|
||||
Authorization: `Bearer ${process.env.BACKEND_JWT}`,
|
||||
},
|
||||
});
|
||||
data.pipe(res);
|
||||
}
|
||||
|
||||
export const config = {
|
||||
api: {
|
||||
bodyParser: false,
|
||||
},
|
||||
};
|
||||
|
||||
@@ -93,6 +93,11 @@ export default function Generation({ id, user, exam, examModule, permissions }:
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
const state = modules;
|
||||
|
||||
if (state.writing.academic_url) {
|
||||
URL.revokeObjectURL(state.writing.academic_url);
|
||||
}
|
||||
|
||||
state.listening.sections.forEach(section => {
|
||||
const listeningPart = section.state as ListeningPart;
|
||||
if (listeningPart.audio?.source) {
|
||||
|
||||
@@ -23,7 +23,8 @@ export const defaultSettings = (module: Module) => {
|
||||
return {
|
||||
...baseSettings,
|
||||
writingTopic: '',
|
||||
isWritingTopicOpen: false
|
||||
isWritingTopicOpen: false,
|
||||
isImageUploadOpen: false,
|
||||
}
|
||||
case 'reading':
|
||||
return {
|
||||
@@ -57,6 +58,7 @@ export const defaultSettings = (module: Module) => {
|
||||
isListeningDropdownOpen: false,
|
||||
|
||||
isWritingTopicOpen: false,
|
||||
isImageUploadOpen: false,
|
||||
writingTopic: '',
|
||||
|
||||
isPassageOpen: false,
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import { Difficulty, InteractiveSpeakingExercise, LevelPart, ListeningPart, ReadingPart, SpeakingExercise, WritingExercise } from "@/interfaces/exam";
|
||||
import { Module } from "@/interfaces";
|
||||
import Option from "@/interfaces/option";
|
||||
import { ExerciseConfig } from "@/components/ExamEditor/ExercisePicker/ExerciseWizard";
|
||||
|
||||
export interface GeneratedExercises {
|
||||
exercises: Record<string, string>[];
|
||||
@@ -42,6 +41,7 @@ export interface ListeningSectionSettings extends SectionSettings {
|
||||
export interface WritingSectionSettings extends SectionSettings {
|
||||
isWritingTopicOpen: boolean;
|
||||
writingTopic: string;
|
||||
isImageUploadOpen: boolean;
|
||||
}
|
||||
|
||||
export interface LevelSectionSettings extends SectionSettings {
|
||||
@@ -55,6 +55,7 @@ export interface LevelSectionSettings extends SectionSettings {
|
||||
|
||||
// writing
|
||||
isWritingTopicOpen: boolean;
|
||||
isImageUploadOpen: boolean;
|
||||
writingTopic: string;
|
||||
|
||||
// reading
|
||||
@@ -116,6 +117,7 @@ export interface ModuleState {
|
||||
importing: boolean;
|
||||
edit: number[];
|
||||
type?: "general" | "academic";
|
||||
academic_url?: string | undefined;
|
||||
}
|
||||
|
||||
export interface Avatar {
|
||||
|
||||
@@ -12,14 +12,16 @@ export const evaluateWritingAnswer = async (
|
||||
exercise: WritingExercise,
|
||||
task: number,
|
||||
solution: UserSolution,
|
||||
attachment?: string,
|
||||
): Promise<void> => {
|
||||
await axios.post("/api/evaluate/writing", {
|
||||
question: `${exercise.prompt} ${exercise.attachment ? exercise.attachment.description : ""}`.replaceAll("\n", ""),
|
||||
question: `${exercise.prompt}`.replaceAll("\n", ""),
|
||||
answer: solution.solutions[0].solution.trim().replaceAll("\n", " "),
|
||||
task,
|
||||
userId,
|
||||
sessionId,
|
||||
exerciseId: exercise.id
|
||||
exerciseId: exercise.id,
|
||||
attachment,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
27
src/utils/excel.errors.ts
Normal file
27
src/utils/excel.errors.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
export interface ExcelError {
|
||||
type: string;
|
||||
value: any;
|
||||
error: string;
|
||||
reason: string;
|
||||
row: number;
|
||||
column: string;
|
||||
}
|
||||
|
||||
export const errorsByRows = (errors: ExcelError[] ) => {
|
||||
return errors.reduce((acc, error) => {
|
||||
if (!acc[error.row]) {
|
||||
acc[error.row] = {
|
||||
required: [],
|
||||
other: []
|
||||
};
|
||||
}
|
||||
|
||||
if (error.error === 'required') {
|
||||
acc[error.row].required.push(error.column);
|
||||
} else {
|
||||
acc[error.row].other.push(error);
|
||||
}
|
||||
|
||||
return acc;
|
||||
}, {} as Record<number, { required: string[], other: ExcelError[] }>);
|
||||
}
|
||||
Reference in New Issue
Block a user