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

ENCOA-224, ENCOA-256: Added the import templates, Speaking didn't have the navbar yet, added multiple choice to reading since they've placed that in the import

Browse Source
This commit is contained in:
Carlos-Mesquita
2024-12-04 04:15:31 +00:00
parent ec47d750bf
commit 3b6fd2bc6b
4 changed files with 292 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/ExamEditor/ImportExam/WordUploader.tsx
View File

@@ -8,6 +8,8 @@ import { toast } from 'react-toastify';
import useExamEditorStore from '@/stores/examEditor';
import { LevelPart, ListeningPart, ReadingPart } from '@/interfaces/exam';
import { defaultSectionSettings } from '@/stores/examEditor/defaults';
import Templates from './Templates';
import { IoInformationCircleOutline } from 'react-icons/io5';
const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: number) => void; }> = ({ module, setNumberOfLevelParts }) => {
const { currentModule, dispatch } = useExamEditorStore();
@@ -17,6 +19,7 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
const [showUploaders, setShowUploaders] = useState(false);
const [examFile, setExamFile] = useState<File | null>(null);
const [solutionsFile, setSolutionsFile] = useState<File | null>(null);
const [templateState, setTemplateState] = useState<{ isOpen: boolean, type: "exam" | "solutions" }>({ isOpen: false, type: "exam" });
const handleExamChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const file = event.target.files?.[0];
@@ -78,7 +81,7 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
if (module === "level") {
setNumberOfLevelParts(data.parts.length);
}
dispatch({
type: "UPDATE_MODULE", payload: {
updates: {
@@ -105,6 +108,7 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
return (
<>
<Templates module={module} state={templateState} setState={setTemplateState} />
{!showUploaders ? (
<div
onClick={() => setShowUploaders(true)}
@@ -146,7 +150,7 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
<h3 className="font-semibold text-gray-700">Exam Document</h3>
<p className="text-sm text-gray-500">Required</p>
</div>
{examFile && (
{examFile ? (
<div className="flex items-center gap-2">
<FaCheckCircle className="w-6 h-6 text-green-500" />
<button
@@ -159,6 +163,16 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
<FaTimes className="w-4 h-4 text-green-600" />
</button>
</div>
) : (
<button
onClick={(e) => {
e.stopPropagation();
setTemplateState({ isOpen: true, type: "exam" });
}}
className="p-1.5 hover:bg-gray-200 rounded-full transition-colors duration-200"
>
<IoInformationCircleOutline size={28} />
</button>
)}
</div>
{examFile && (
@@ -170,7 +184,7 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
type="file"
ref={examInputRef}
onChange={handleExamChange}
accept=".doc,.docx"
accept=".docx"
className="hidden"
/>
</div>
@@ -205,9 +219,20 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
</button>
</div>
) : (
<span className="text-xs text-gray-400 font-medium px-2 py-1 bg-gray-100 rounded">
OPTIONAL
</span>
<>
<span className="text-xs text-gray-400 font-medium px-2 py-1 bg-gray-100 rounded">
OPTIONAL
</span>
<button
onClick={(e) => {
e.stopPropagation();
setTemplateState({ isOpen: true, type: "solutions" });
}}
className="p-1.5 hover:bg-gray-200 rounded-full transition-colors duration-200"
>
<IoInformationCircleOutline size={28} />
</button>
</>
)}
</div>
{solutionsFile && (
@@ -219,7 +244,7 @@ const WordUploader: React.FC<{ module: Module, setNumberOfLevelParts: (parts: nu
type="file"
ref={solutionsInputRef}
onChange={handleSolutionsChange}
accept=".doc,.docx"
accept=".docx"
className="hidden"
/>
</div>