Merge pull request #161 from makeopensource/updated-devu

Created Instructor Submissionspage.tsx

devU-api/src/entities/user/user.router.ts

@@ -19,9 +19,10 @@ const Router = express.Router()
  *       '200':
  *         description: OK
  */
-Router.get('/', /*isAuthorized('admin'),*/ UserController.get)
+Router.get('/', UserController.get)
 // Router.get('/', isAuthorized('admin'), UserController.get)
 
+
 /**
  * @swagger
  * /users/{id}:

devU-client/src/components/authenticatedRouter.tsx

@@ -19,6 +19,7 @@ import ContainerAutoGraderForm from './pages/forms/containers/containerAutoGrade
 import CoursePreviewPage from './pages/courses/coursePreviewPage'
 import CoursesListPage from "./pages/listPages/courses/coursesListPage";
 import AssignmentProblemFormPage from './pages/forms/assignments/assignmentProblemFormPage'
+import InstructorSubmissionspage from "./pages/submissions/InstructorSubmissionspage";
 
 const AuthenticatedRouter = () => (
     <Switch>
@@ -45,6 +46,8 @@ const AuthenticatedRouter = () => (
 
         <Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId'
                component={SubmissionDetailPage}/>
+            <Route exact path='/course/:courseId/assignment/:assignmentId/submissions'
+                   component={InstructorSubmissionspage}/>
         <Route exact path='/course/:courseId/assignment/:assignmentId/submission/:submissionId/feedback'
                component={SubmissionFeedbackPage}/>
 

devU-client/src/components/pages/submissions/InstructorSubmissionspage.tsx

@@ -0,0 +1,282 @@
+import React, { useEffect, useState } from 'react';
+
+import { useParams } from 'react-router-dom';
+
+
+
+import { Assignment, Submission, SubmissionScore, User } from 'devu-shared-modules';
+
+
+
+import PageWrapper from 'components/shared/layouts/pageWrapper';
+
+import LoadingOverlay from 'components/shared/loaders/loadingOverlay';
+
+import ErrorPage from '../errorPage/errorPage';
+
+
+
+import RequestService from 'services/request.service';
+
+
+
+import styles from './Submissionspage.scss';
+import TextField from "../../shared/inputs/textField";
+
+
+
+interface TableProps {
+
+    users: User[];
+
+    submissions: Submission[];
+
+    submissionScores: SubmissionScore[];
+
+    assignment: Assignment;
+
+}
+
+
+
+interface RowProps {
+
+    user: User;
+
+    submission: Submission;
+
+    submissionScore: SubmissionScore | undefined;
+
+}
+
+
+
+const TableRow: React.FC<RowProps> = ({ user, submission, submissionScore }) => (
+
+    <tr>
+
+        <td>{user.email}</td>
+
+        <td>{user.externalId}</td>
+
+        <td>{submissionScore?.score ?? 'N/A'}</td>
+
+        <td>
+
+            <a href={`/course/${submission.courseId}/assignment/${submission.assignmentId}/submission/${submission.id}/feedback`}>
+
+                View Feedback
+
+            </a>
+
+        </td>
+
+    </tr>
+
+);
+
+
+
+const SubmissionsTable: React.FC<TableProps> = ({ users, submissions, submissionScores, assignment }) => (
+
+    <table className={styles.submissionsTable}>
+
+        <thead>
+
+        <tr>
+
+            <th>Email</th>
+
+            <th>External ID</th>
+
+            <th>{assignment.name} Score</th> {/* Display assignment name */}
+
+            <th>Feedback</th>
+
+        </tr>
+
+        </thead>
+
+        <tbody>
+
+        {submissions.map((submission) => {
+
+            const user = users.find((u) => u.id === submission.userId);
+
+            const submissionScore = submissionScores.find((ss) => ss.submissionId === submission.id);
+
+            return user ? (
+
+                <TableRow key={submission.id} user={user} submission={submission} submissionScore={submissionScore} />
+
+            ) : null;
+
+        })}
+
+        </tbody>
+
+    </table>
+
+);
+
+
+
+const InstructorSubmissionsPage: React.FC = () => {
+
+    const [loading, setLoading] = useState(true);
+
+    const [error, setError] = useState(null);
+
+    const [users, setUsers] = useState<User[]>([]);
+
+    const [submissions, setSubmissions] = useState<Submission[]>([]);
+
+    const [submissionScores, setSubmissionScores] = useState<SubmissionScore[]>([]);
+
+    const [assignment, setAssignment] = useState<Assignment | null>(null);
+
+    const {  assignmentId, courseId } = useParams<
+
+        {assignmentId: string, courseId: string}>()
+
+
+
+
+
+
+
+
+
+
+
+    useEffect(() => {
+
+        const fetchData = async () => {
+
+            try {
+
+                if (!courseId) {
+
+                    console.error("courseId is undefined. Cannot fetch users.",error);
+
+                    setError(error);
+
+                    return;
+
+                }
+
+                // Fetch all users
+
+                const users = await RequestService.get<User[]>('/api/users');
+
+                setUsers(users);
+
+
+
+                // Fetch submissions for the assignment
+
+                const submissions = await RequestService.get<Submission[]>(
+
+                    `/api/course/${courseId}/assignment/${assignmentId}/submissions`
+
+                    // `/api/course/<span class="math-inline">\{courseId\}/assignment/</span>{assignmentId}/submissions`
+
+                );
+
+                setSubmissions(submissions);
+
+
+
+                // Fetch submission scores for the assignment
+
+                const submissionScores = await RequestService.get<SubmissionScore[]>(
+
+                    `/api/course/${courseId}/assignment/${assignmentId}/submission-scores`
+
+                );
+
+                setSubmissionScores(submissionScores);
+
+
+
+                // Fetch the assignment details
+
+                const assignment = await RequestService.get<Assignment>(`/api/course/${courseId}/assignments/${assignmentId}`);
+
+                setAssignment(assignment);
+
+            } catch (error: any) {
+
+                console.error("Error fetching data:", error);
+
+                setError(error);
+
+            } finally {
+
+                setLoading(false);
+
+            }
+
+        };
+
+
+
+        fetchData();
+
+    }, [courseId, assignmentId]);
+    const handleStudentSearch = () => {
+
+    }
+
+
+
+    if (loading) return <LoadingOverlay delay={250} />;
+
+    if (error) return <ErrorPage error={error} />;
+
+    if (!assignment) return <ErrorPage error={new Error('Assignment not found')} />; // Handle assignment not found
+
+//structure for page & table
+
+    return (
+
+        <PageWrapper>
+
+            <div className={styles.header}>
+
+                <h1>Instructor Submissions Page</h1>
+
+            </div>
+
+            <div>
+                <TextField
+                    onChange={handleStudentSearch}
+                    label='Search'
+                    id='preferredName'
+                    placeholder='search students'
+                />
+
+                <SubmissionsTable
+
+                    users={users}
+
+                    submissions={submissions}
+
+                    submissionScores={submissionScores}
+
+                    assignment={assignment}
+
+                />
+
+
+            </div>
+
+        </PageWrapper>
+
+    );
+
+};
+
+
+
+export default InstructorSubmissionsPage;

devU-client/src/components/pages/submissions/Submissionspage.scss

@@ -0,0 +1,17 @@
+@import 'variables';
+.submissionsTable {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+
+  th, td {
+    border: 1px solid $text-color;
+    padding: 8px;
+    text-align: left;
+  }
+
+  th {
+    background-color:$primary;
+    font-weight: bold;
+  }
+}