diff --git a/src/components/DeclareAbsenceForm.tsx b/src/components/DeclareAbsenceForm.tsx index 7f160fef..1dc1badc 100644 --- a/src/components/DeclareAbsenceForm.tsx +++ b/src/components/DeclareAbsenceForm.tsx @@ -271,7 +271,12 @@ const DeclareAbsenceForm: React.FC = ({ {errors.reasonOfAbsence} - + + + Lesson Plan + + + diff --git a/src/components/EditAbsenceForm.tsx b/src/components/EditAbsenceForm.tsx index 6a4b9d0a..2db6a8e8 100644 --- a/src/components/EditAbsenceForm.tsx +++ b/src/components/EditAbsenceForm.tsx @@ -274,11 +274,16 @@ const EditAbsenceForm: React.FC = ({ {errors.reasonOfAbsence} - + + + Lesson Plan + + + diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx index b2e6472f..66fcea29 100644 --- a/src/components/FileUpload.tsx +++ b/src/components/FileUpload.tsx @@ -1,11 +1,4 @@ -import { - Box, - FormControl, - Image, - Input, - Text, - useToast, -} from '@chakra-ui/react'; +import { Box, Image, Input, Text, useToast } from '@chakra-ui/react'; import { LessonPlanFile } from '@utils/types'; import { useRef, useState } from 'react'; @@ -13,14 +6,14 @@ interface FileUploadProps { lessonPlan: File | null; setLessonPlan: (file: File | null) => void; existingFile?: LessonPlanFile | null; - label?: string; + isDisabled?: boolean; } export const FileUpload: React.FC = ({ lessonPlan, setLessonPlan, existingFile, - label = 'Lesson Plan', + isDisabled, }) => { const [isDragging, setIsDragging] = useState(false); const inputRef = useRef(null); @@ -34,51 +27,63 @@ export const FileUpload: React.FC = ({ title: 'Invalid File Type', description: 'Please upload a valid PDF file.', status: 'error', - duration: 4000, + duration: 5000, isClosable: true, }); } }; const handleFileChange = (e: React.ChangeEvent) => { - if (e.target.files && e.target.files.length > 0) { - const file = e.target.files[0]; + if (isDisabled) return; + + const file = e.target.files?.[0]; + if (file) { validateAndSetFile(file); } }; const handleDragOver = (e: React.DragEvent) => { + if (isDisabled) return; e.preventDefault(); setIsDragging(true); }; const handleDragLeave = () => { + if (isDisabled) return; setIsDragging(false); }; const handleDrop = (e: React.DragEvent) => { + if (isDisabled) return; e.preventDefault(); setIsDragging(false); - if (e.dataTransfer.files && e.dataTransfer.files.length > 0) { - const file = e.dataTransfer.files[0]; + + const file = e.dataTransfer.files?.[0]; + if (file) { validateAndSetFile(file); } }; return ( - - - {label} - + <> = ({ onChange={handleFileChange} accept="application/pdf" display="none" + disabled={isDisabled} /> - + ); }; diff --git a/src/components/LessonPlanView.tsx b/src/components/LessonPlanView.tsx index 8544137a..614492b9 100644 --- a/src/components/LessonPlanView.tsx +++ b/src/components/LessonPlanView.tsx @@ -13,6 +13,7 @@ import { LessonPlanFile } from '@utils/types'; import { uploadFile } from '@utils/uploadFile'; import { useEffect, useRef, useState } from 'react'; import { FiFileText } from 'react-icons/fi'; +import { FileUpload } from './FileUpload'; const formatFileSize = (sizeInBytes: number) => { if (sizeInBytes === 0) return '0 B'; @@ -127,21 +128,6 @@ const NoLessonPlanViewingDisplay = ({ ); }; -const NoLessonPlanDeclaredDisplay = () => { - const theme = useTheme(); - - return ( - - - Upload PDF component - - - ); -}; - const LessonPlanView = ({ lessonPlan, absentTeacherFirstName, @@ -168,8 +154,7 @@ const LessonPlanView = ({ fileInputRef.current?.click(); }; - const handleFileChange = async (e: React.ChangeEvent) => { - const file = e.target.files?.[0]; + const handleFileUpload = async (file: File) => { if (!file || file.type !== 'application/pdf') return; setIsUploading(true); @@ -248,11 +233,21 @@ const LessonPlanView = ({ ref={fileInputRef} display="none" accept="application/pdf" - onChange={handleFileChange} + onChange={(e) => { + const file = e.target.files?.[0]; + if (file) { + handleFileUpload(file); + } + }} /> ) : isUserAbsentTeacher && !isAdminMode ? ( - + ) : (