Merge pull request #272 from makeopensource/112-pdf-comment-frontend

NeemZ16 · web-flow · commit 5635bc2ebc42 · 2025-04-28T14:00:57.000-04:00
DEPLOYMENT FIX: added back functionality for adding file upload problems
diff --git a/devU-client/src/components/listItems/assignmentProblemListItem.tsx b/devU-client/src/components/listItems/assignmentProblemListItem.tsx
@@ -92,6 +92,14 @@ const AssignmentProblemListItem = ({problem, handleChange, disabled}: Props) =>
                     </label>))}
             </div>)
     } 
+
+    else if (type == "File") {
+        return (
+            <div key={problem.id} className={styles.problem}>
+                <h4 className={styles.problem_header}>{problem.problemName}</h4>
+            </div>
+        )
+    }
     
     else {
         return(
diff --git a/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx b/devU-client/src/components/pages/assignments/assignmentDetailPage.tsx
@@ -11,6 +11,7 @@ import { SET_ALERT } from 'redux/types/active.types'
 //import Card from '@mui/material/Card'
 //import CardContent from '@mui/material/CardContent'
 //import {Accordion, AccordionDetails, TextField, Typography} from '@mui/material'
+import DragDropFile from 'components/utils/dragDropFile'
 
 
 //import Grid from '@mui/material/Unstable_Grid2'
@@ -38,6 +39,8 @@ const AssignmentDetailPage = () => {
     const [assignment, setAssignment] = useState<Assignment>()
     const [course, setCourse] = useState<Course>()
     const [notClickable, setNotClickable] = useState(true);
+    const [hasFileProblem, setHasFileProblem] = useState(false);
+
 
 
 
@@ -61,7 +64,11 @@ const AssignmentDetailPage = () => {
             setCourse(courses)
 
             const assignmentProblemsReq = await RequestService.get<AssignmentProblem[]>(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/`)
-            setAssignmentProblems(assignmentProblemsReq)
+            const hasFile = assignmentProblemsReq.some(problem => problem.metadata.type === "File")
+            setHasFileProblem(hasFile)
+
+            const filteredProblems = assignmentProblemsReq.filter(problem => problem.metadata.type !== "File")
+            setAssignmentProblems(filteredProblems)
 
             const submissionsReq = await RequestService.get<Submission[]>(`/api/course/${courseId}/assignment/${assignmentId}/submissions/`)
             submissionsReq.sort((a, b) => (Date.parse(b.createdAt ?? '') - Date.parse(a.createdAt ?? '')))
@@ -128,8 +135,8 @@ const AssignmentDetailPage = () => {
     };
 
 
-    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-        setFile(e.target.files?.item(0))
+    const handleFileChange = (file: File) => {
+        setFile(file)
     }
 
     const handleCheckboxChange = () => {
@@ -242,10 +249,15 @@ const AssignmentDetailPage = () => {
 
             <div className={styles.problems_section}>
 
-                {/* <div className={styles.file_upload}>
-                    <h4 className={styles.problem_header}>File Upload:</h4>
-                    <DragDropFile handleFile={(e) => {console.log(e)}} />
-                </div> */}
+                {/* conditionally render file upload */}
+                {hasFileProblem && (
+                    <div className={styles.file_upload}>
+                        <h4 className={styles.problem_header}>File Upload:</h4>
+                        <DragDropFile handleFile={handleFileChange} />
+                        <span style={{margin: '15px 0', marginRight: '10px'}}>{file?.name}</span>
+                        {file && (<button className="btnDelete" onClick={() => setFile(null)}>Remove Files</button>)}
+                    </div>
+                )}
 
                 <div className={styles.problems_list}>
                     <h2>Problems</h2>
diff --git a/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx b/devU-client/src/components/pages/forms/assignments/assignmentUpdatePage.tsx
@@ -32,6 +32,7 @@ const AssignmentUpdatePage = () => {
   const [assignmentProblems, setAssignmentProblems] = useState<AssignmentProblem[]>([])
   const [nonContainerAutograders, setNonContainerAutograders] = useState<NonContainerAutoGrader[]>([])
   const [containerAutograders, setContainerAutograders] = useState<ContainerAutoGrader[]>([])
+  const [fileProblemId, setFileProblemId] = useState<number>()
   
 
   const [mcqProblemId, setMcqProblemId] = useState<number>()
@@ -210,8 +211,11 @@ const AssignmentUpdatePage = () => {
   }
 
 
-
-
+  const [fileEditModal, setFileEditModal] = useState(false);
+  const handleCloseFileEditModal = async () => {
+    setFileEditModal(false)
+    fetchAssignmentProblems()
+  }
 
 
   const handleDeleteProblem = async (problem: AssignmentProblem) => {
@@ -252,14 +256,16 @@ const AssignmentUpdatePage = () => {
     };
 
   const openEditModal = (problem: AssignmentProblem) => {
-    const type = JSON.parse(problem.metadata).type ?? ""
+    const type = problem.metadata.type ?? ""
     if (type === "MCQ-mult" || type === "MCQ-single"){
       setMcqProblemId(problem.id)
       setMcqEditModal(true)
     } else if (type === "Match"){
       console.log("Implement Match MCQ")
-    }
-    else {
+    } else if (type === "File") {
+      setFileProblemId(problem.id)
+      setFileEditModal(true)
+    } else {
       setTextProblemId(problem.id)
       setTextEditModal(true)
     }
@@ -277,7 +283,8 @@ const AssignmentUpdatePage = () => {
         <ContainerAutoGraderModal open={containerAutoGraderModal} onClose={handleCloseContainerAutoGraderModal} />
         <TextProblemModal open={textModal} onClose={handleCloseTextModal} />
         <TextProblemModal open={textEditModal} onClose={handleCloseTextEditModal} edit problemId={textProblemId}/>
-        <CodeProblemModal open={codeModal} onClose={handleCloseCodeModal}/>
+        <CodeProblemModal open={codeModal} onClose={handleCloseCodeModal} />
+        <CodeProblemModal open={fileEditModal} onClose={handleCloseFileEditModal} edit problemId={fileProblemId} />
         <MultipleChoiceModal open={mcqModal} onClose={handleCloseMcqModal} />
         <MultipleChoiceModal open={mcqEditModal} onClose={handleCloseEditMcqModal} edit problemId={mcqProblemId}/>
 
diff --git a/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx b/devU-client/src/components/pages/forms/assignments/codeProblemModal.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
-import { ExpressValidationError } from 'devu-shared-modules';
+import { ExpressValidationError, AssignmentProblem } from 'devu-shared-modules';
 import { SET_ALERT } from 'redux/types/active.types';
 import { useActionless } from 'redux/hooks';
 import RequestService from 'services/request.service';
@@ -9,9 +9,11 @@ import Modal from 'components/shared/layouts/modal';
 interface Props {
     open: boolean;
     onClose: () => void;
+    edit?: boolean;
+    problemId?: number;
 }
 
-const CodeProblemModal = ({ open, onClose }: Props) => {
+const CodeProblemModal = ({ open, onClose, edit, problemId }: Props) => {
     const [setAlert] = useActionless(SET_ALERT);
     const { assignmentId } = useParams<{ assignmentId: string }>();
     const { courseId } = useParams<{ courseId: string }>();
@@ -22,31 +24,56 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
         maxScore: '',
     });
 
+    const setInitalFormData = async () => {
+        if (!problemId) {
+            return
+        }
+
+        const assignmentProblemData = await RequestService.get<AssignmentProblem>(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/${problemId}`);
+        setFormData(({
+            title: assignmentProblemData.problemName,
+            maxScore: '' + assignmentProblemData.maxScore,
+        }))
+    }
+
+    useEffect(() => { setInitalFormData() }, [problemId])
 
     const submittable = () => {
-        if (!formData.title || !formData.maxScore) {return false}
-        else {return true}
+        if (!formData.title || !formData.maxScore) { return false }
+        else { return true }
     }
 
     const handleSubmit = () => {
         if (!submittable) return;
 
-
         const problemFormData = {
             assignmentId: parseInt(assignmentId),
             problemName: formData.title,
             maxScore: parseInt(formData.maxScore),
+            metadata: {
+                type: 'File'
+            }
         };
 
-        RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
-            .then(() => {
-                setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
-            })
-            .catch((err: ExpressValidationError[] | Error) => {
-                const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message;
-                setAlert({ autoDelete: false, type: 'error', message });
-            });
-
+        if (edit) {
+            RequestService.put(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems/${problemId}`, problemFormData)
+                .then(() => {
+                    setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
+                })
+                .catch((err: ExpressValidationError[] | Error) => {
+                    const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message;
+                    setAlert({ autoDelete: false, type: 'error', message });
+                });
+        } else {
+            RequestService.post(`/api/course/${courseId}/assignment/${assignmentId}/assignment-problems`, problemFormData)
+                .then(() => {
+                    setAlert({ autoDelete: true, type: 'success', message: 'Problem Added' });
+                })
+                .catch((err: ExpressValidationError[] | Error) => {
+                    const message = Array.isArray(err) ? err.map((e) => `${e.param} ${e.msg}`).join(', ') : err.message;
+                    setAlert({ autoDelete: false, type: 'error', message });
+                });
+        }
 
         closeModal();
     };
@@ -55,7 +82,7 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
         setFormData({
             title: '',
             maxScore: ''
-        })   
+        })
         onClose()
     }
 
@@ -67,25 +94,27 @@ const CodeProblemModal = ({ open, onClose }: Props) => {
     };
 
     return (
-        <Modal title="Add Code/File Input Problem" buttonAction={handleSubmit} open={open} onClose={closeModal} isSubmittable={submittable}>
+        <Modal title={edit ? "Edit File Upload Problem" : "Add File Upload Problem"} buttonAction={handleSubmit} open={open} onClose={closeModal} isSubmittable={submittable}>
             <div className="input-group">
                 <label htmlFor="title" className="input-label">Problem Title:</label>
-                <input 
-                    type="text" 
-                    id="title" 
-                    placeholder="e.g. Application Objective 3" 
-                    onChange={handleChange} 
+                <input
+                    type="text"
+                    id="title"
+                    placeholder="e.g. Application Objective 3"
+                    onChange={handleChange}
+                    value={formData.title}
                 />
             </div>
-            
+
             <div className="input-group">
                 <label htmlFor="maxScore" className="input-label">Maximum Score:</label>
-                <input 
-                    type="number" 
-                    id="maxScore" 
-                    placeholder="e.g. 10" 
-                    min="0" 
-                    onChange={handleChange} 
+                <input
+                    type="number"
+                    id="maxScore"
+                    placeholder="e.g. 10"
+                    min="0"
+                    onChange={handleChange}
+                    value={formData.maxScore}
                 />
             </div>
         </Modal>
diff --git a/devU-client/src/components/utils/pdfViewer.tsx b/devU-client/src/components/utils/pdfViewer.tsx
@@ -156,6 +156,7 @@ const PDFViewer: React.FC<PDFWithHighlightProps> = ({ file }) => {
             </div>
 
             {/* annotation options */}
+            {console.log("IS INSTRUCTOR:", role.isInstructor())}
             {role.isInstructor() && (<div className={styles.annotationOptions}>
                 <button
                     className="btnSecondary"
