Merge pull request #48 from TanishqMehrunkarIIPSDAVV/completed-student

Completed student

src/App.js

@@ -19,6 +19,7 @@ import EditQuestion from './edit_question/EditQuestion';
 import Profile from './Profile/profile';
 import Body from './Body/Body';
 import CompletedPaperDashboard from './CompletedPaperDashboard/CompletedPaperDashboard';
+import CompletedPaperStudentDashboard from './CompletedPaperStudentDashboard/CompletedPaperStudentDashboard';
 
 
 
@@ -82,6 +83,7 @@ const App = () => {
           <Route path='/profile' element={<Profile/>}/>
           <Route path="/preview/:questionId" element={<Body/>}/>
           <Route path="/completed_papers" element={<CompletedPaperDashboard />}/>
+          <Route path='/completed_papers_student/:paperId' element={<CompletedPaperStudentDashboard />}/>
         </>
       )}
 

src/CompletedPaperDashboard/CompletedPaperDashboard.jsx

@@ -6,13 +6,20 @@ import axios from "axios";
 import Nothing from "../Assets/nothing.svg";
 import Navbar from "../Navbar/Navbar";
 import Skeleton from "../Skeleton/Skeleton";
+import { GoDotFill } from "react-icons/go";
+import { useNavigate } from "react-router-dom";
 // import AlertModal from "../AlertModal/AlertModal";
 
 const CompletedPaperDashboard = () => {
-//   const navigate = useNavigate();
+  const navigate = useNavigate();
   const [completedPapers, setCompletedPapers] = useState([]);
 //   const [hoveredItem, setHoveredItem] = useState(null);
   const [loading, setLoading] = useState(true);
+  const evaluations=[
+    "Evaluated",
+    "Not-Evaluated",
+    "Evaluation-in-Progress",
+  ];
 
   const teacherId = localStorage.getItem("teacherId");
 //   const [reload, setReload] = useState(false);
@@ -59,9 +66,10 @@ const getFormattedDateTime = (date, time) => {
     fetchCompletedPapers();
   }, [teacherId]);
 
-//   const handleCardClick = (paperId) => {
-//     navigate(`/completed_questions/${paperId}`);
-//   };
+  const handleCardClick = (paperId) => {
+    // navigate(`/completed_questions/${paperId}`);
+    navigate(`/completed_papers_student/${paperId}`);
+  };
 
   return (
     <>
@@ -84,7 +92,7 @@ const getFormattedDateTime = (date, time) => {
                 <div
                   className="papers_table"
                   key={index}
-                //   onClick={() => handleCardClick(paper._id)}
+                  onClick={() => handleCardClick(paper._id)}
                 //   onMouseEnter={() => setHoveredItem(paper._id)}
                 //   onMouseLeave={() => setHoveredItem(null)}
                 >
@@ -93,6 +101,10 @@ const getFormattedDateTime = (date, time) => {
                     Completed on: {getFormattedDateTime(paper.endTime, paper.time)}
                   </div>
                   <div className="table-data">
+                    <div className={`evaluation ${evaluations[0]+"-completed"}`}>
+                      <GoDotFill />
+                      <div>{evaluations[0]}</div>
+                    </div>
                     <div className="classhead">
                       {paper.className} {paper.semester}
                     </div>

src/CompletedPaperStudentDashboard/CompletedPaperStudentDashboard.jsx

@@ -0,0 +1,121 @@
+import React, { useState, useEffect } from "react";
+import "../papers/papers.css";
+import Nothing from "../Assets/nothing.svg";
+import Navbar from "../Navbar/Navbar";
+import Skeleton from "../Skeleton/Skeleton";
+import axios from "axios";
+import { useParams } from "react-router-dom";
+import { GoDotFill } from "react-icons/go";
+import { FaCheck } from "react-icons/fa";
+import { ImCross } from "react-icons/im";
+import image from "../Assets/profile_photo.png";
+
+const CompletedPaperStudentDashboard = () => {
+  const [students, setStudents] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const { paperId } = useParams();
+  const evaluations = ["Evaluated", "Not-Evaluated", "Evaluation-in-Progress"];
+  const [studentIds, setStudentIds] = useState([]);
+
+  useEffect(() => {
+    axios
+      .post("http://localhost:5000/student/getStudentByPaperId", {
+        paperId,
+      })
+      .then((res) => {
+        setStudents(res.data.students);
+      })
+      .catch((err) => {
+        console.log(err);
+      })
+      .finally(() => {
+        setTimeout(() => {
+          setLoading(false);
+        }, 1000);
+      });
+
+    axios
+      .post("http://localhost:5000/paper/getCompletedPaperByPaperId",{
+        paperId,
+      })
+      .then((res) => {
+        setStudentIds(res.data.students);
+      })
+      .catch((err) => {
+        console.error(err);
+      });
+  }, [paperId]);
+
+  const getAttemptionStatus = (studentId) => {
+    return studentIds.indexOf(studentId) === -1 ? "Not-Attempted" : "Attempted";
+  };
+
+  return (
+    <>
+      <Navbar />
+      <div className="exam-list-container">
+        {loading ? (
+          <Skeleton exams={students} />
+        ) : students.length > 0 ? (
+          <>
+            <div className="header">
+              <h2>Students:</h2>
+            </div>
+            <div className="exam-table">
+              {students.map((student, index) => {
+                const attemption = getAttemptionStatus(student._id);
+                return (
+                  <div className="papers_table" key={index}>
+                    <div className="table-data completed-student">
+                      <div className="evaluation-attemption">
+                        <div className={`evaluation ${evaluations[index%3]}`}>
+                          <GoDotFill />
+                          <div>{evaluations[index%3]}&nbsp; {evaluations[index%3] === "Evaluated" && <>Alloted Marks: 20</>}</div>
+                        </div>
+                        <div className={`attemption ${attemption}`}>
+                          {attemption === "Attempted" ? (
+                            <>
+                              <FaCheck />
+                              <div>Attempted</div>
+                            </>
+                          ) : (
+                            <>
+                              <ImCross />
+                              <div>Not Attempted</div>
+                            </>
+                          )}
+                        </div>
+                      </div>
+                      <div className="student-image-name">
+                        <div className="student-image">
+                          <img src={image} alt="Image" />
+                        </div>
+                        <div className="student-name">
+                          <div className="classhead">{student.fullName}</div>
+                          <div className="subname">
+                            Email: &nbsp;{student.email}
+                          </div>
+                          <div className="subname">{student.rollNumber}</div>
+                          <div className="subname">{student.phoneNumber}</div>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </>
+        ) : (
+          <div className="no-questions-container">
+            <center>
+              <img alt="Nothing" src={Nothing} className="nothing" />
+              <h2>No Students Found</h2>
+            </center>
+          </div>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default CompletedPaperStudentDashboard;

src/papers/papers.css

@@ -181,4 +181,121 @@
 
 .readyDasboardwarning{
   color: red;
+}
+
+/*----------------Completed Papers------------ */
+
+.evaluation
+{
+  font-size: 18px;
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  background-color: #282828;
+  border-radius: 3px;
+}
+.Evaluated,.Evaluated-completed
+{
+    color: green;
+    width: 255px;
+}
+.Evaluated-completed
+{
+    width: 110px;
+}
+.Not-Evaluated,.Not-Evaluated-completed
+{
+    color: red;
+    width: 145px;
+}
+.Evaluation-in-Progress,.Evaluation-in-Progress-completed
+{
+  color: yellow;
+  width: 210px;
+}
+.evaluation-attemption
+{
+  display: flex;
+  align-items: center;
+}
+.attemption
+{
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  background-color: #282828;
+  border-radius: 3px;
+  height: 30px;
+  justify-content: center;
+  position: absolute;
+  top: 18px;
+  right: 20px;
+}
+.Attempted
+{
+  width: 110px;
+  color: green;
+}
+.Not-Attempted
+{
+  width: 140px;
+  color: red;
+}
+.student-image-name
+{
+  display: flex;
+  gap: 50px;
+  align-items: center;
+  margin-top: 20px;
+}
+.student-image {
+  width: 100px;
+  height: 100px;
+}
+
+.student-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.student-image img
+{
+  width: 100%;
+  height: 100%;
+}
+.student-name
+{
+  margin-top: -25px;
+}
+@media screen and (max-width: 768px) {
+  .student-image {
+    width: 80px;
+    height: 80px;
+  }
+  .student-image-name
+  {
+    margin-top: 5px;
+    gap: 10px;
+  }
+  .student-name
+  {
+    margin-top: 0px;
+  }
+  .Evaluated
+  {
+    width: 100px;
+  }
+}
+
+/* Media Query for extra small screens */
+@media screen and (max-width: 480px) {
+  .student-image {
+    width: 60px;
+    height: 60px;
+  }
+}
+
+.completed-student
+{
+  position: relative;
 }