Pr 52: Improvement + Reimplementation

src/App.tsx

@@ -27,6 +27,7 @@ import Questionnaire from "pages/EditQuestionnaire/Questionnaire";
 import Courses from "pages/Courses/Course";
 import CourseEditor from "pages/Courses/CourseEditor";
 import { loadCourseInstructorDataAndInstitutions } from "pages/Courses/CourseUtil";
+import StudentTasks from "./pages/StudentTasks/StudentTasks";
 import TA from "pages/TA/TA";
 import TAEditor from "pages/TA/TAEditor";
 import { loadTAs } from "pages/TA/TAUtil";
@@ -59,6 +60,10 @@ function App() {
           path: "edit-questionnaire",
           element: <ProtectedRoute element={<Questionnaire />} />,
         },
+        {
+          path: "student_tasks",
+          element: <ProtectedRoute element={<StudentTasks />} leastPrivilegeRole={ROLE.STUDENT} />,
+        },
         {
           path: "assignments/edit/:id/createteams",
           element: <CreateTeams />,
@@ -297,4 +302,4 @@ function App() {
   return <RouterProvider router={router} />;
 }
 
-export default App;
+export default App;

src/components/Table/Table.tsx

@@ -45,7 +45,7 @@ const Table: React.FC<TableProps> = ({
   tableSize = { span: 12, offset: 0 },
   renderSubComponent,
   getRowCanExpand,
-  disableGlobalFilter = false, // // Disable the Global Search
+  disableGlobalFilter = false, // Disable the Global Search
 }) => {
   const [rowSelection, setRowSelection] = useState({});
   const [sorting, setSorting] = useState<SortingState>([]);
@@ -200,6 +200,13 @@ const Table: React.FC<TableProps> = ({
                               }}
                             >
                               {flexRender(header.column.columnDef.header, header.getContext())}
+                              {header.column.columnDef.comment ? (
+                                <img
+                                  src="assets/icons/info.png"
+                                  alt="Review Grade"
+                                  title={header.column.columnDef.comment}
+                                />
+                              ) : null}
                               {{
                                 asc: " 🔼",
                                 desc: " 🔽",
@@ -255,4 +262,4 @@ const Table: React.FC<TableProps> = ({
   );
 };
 
-export default Table;
+export default Table;

src/pages/Assignments/AssignmentColumns.tsx

@@ -10,9 +10,6 @@ export const assignmentColumns = (handleEdit: Fn, handleDelete: Fn) => [
   columnHelper.accessor("name", {
     header: "Name",
   }),
-  columnHelper.accessor("courseName", {
-    header: "Course Name",
-  }),
   columnHelper.accessor("created_at", {
     header: "Creation Date",
   }),
@@ -41,4 +38,4 @@ export const assignmentColumns = (handleEdit: Fn, handleDelete: Fn) => [
       </>
     ),
   }),
-];
+];

src/pages/Courses/Course.tsx

@@ -139,7 +139,6 @@ const Courses = () => {
     created_at: formatDate(item.created_at),
     updated_at: formatDate(item.updated_at),
   }));
-
   return (
     <>
       <Outlet />

src/pages/Courses/CourseAssignments.tsx

@@ -2,6 +2,7 @@ import { Row as TRow } from "@tanstack/react-table";
 import Table from "components/Table/Table";
 import React from "react";
 import { assignmentColumns as getBaseAssignmentColumns } from "../Assignments/AssignmentColumns";
+import { capitalizeFirstWord, formatDate } from "utils/dataFormatter";
 
 interface ActionHandler {
   icon: string;
@@ -99,22 +100,18 @@ const CourseAssignments: React.FC<CourseAssignmentsProps> = ({ courseId, courseN
     },
   ];
 
+  // TODO: update it with actual api calls to get assignment list
   const generateFakeAssignments = () => {
     const numAssignments = 3 + Math.floor(Math.random() * 3);
     return Array.from({ length: numAssignments }, (_, idx) => ({
       id: parseInt(`${courseId}${idx}`),
-      name: `Assignment ${idx + 1} for ${courseName}`,
-      courseName: courseName,
+      name: `Assignment ${idx + 1}`,
       description: "This is a fake assignment",
       created_at: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
       updated_at: new Date().toISOString(),
     }));
   };
 
-  const capitalizeSentence = (str: string) => {
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-  };
-
   const getAssignmentColumns = (actions: ActionHandler[]) => {
     const baseColumns = getBaseAssignmentColumns(
       () => {},
@@ -144,35 +141,22 @@ const CourseAssignments: React.FC<CourseAssignmentsProps> = ({ courseId, courseN
     return [...baseColumns, actionsColumn];
   };
 
-  // Helper function to format the dates
-  const formatDate = (dateString: string): string => {
-    const date = new Date(dateString);
-    const options: Intl.DateTimeFormatOptions = { 
-      month: 'short', 
-      day: 'numeric', 
-      year: 'numeric', 
-      hour: 'numeric', 
-      minute: 'numeric', 
-      hour12: true 
-    };
-    return date.toLocaleString('en-US', options);
-  };
-
-
   const assignments = generateFakeAssignments();
   const columns = getAssignmentColumns(actionHandlers);
 
-  // Remove the 'Course Name' column from column definitions to hide it.
-  const filteredColumns = columns.filter((col) => col.header !== "Course Name");
-  // Remove 'courseName' field from assignment data to hide it and Format date fields.
-  const filteredAssignments = assignments.map(
-    ({ name, courseName, created_at, updated_at, ...rest }) => ({
-      ...rest,
-      name: capitalizeSentence(name),
-      created_at: formatDate(created_at), // Format 'created_at' date
-      updated_at: formatDate(updated_at), // Format 'updated_at' date
-    })
-  );
+  // Format all heading data fields. 
+  const filteredColumns = columns.map(({ header, ...rest }) => ({
+    ...rest,
+    header: capitalizeFirstWord(header as string),
+  }));
+
+  // Format some assignment data fields.
+  const filteredAssignments = assignments.map(({ name, created_at, updated_at, ...rest }) => ({
+    ...rest,
+    name: capitalizeFirstWord(name),
+    created_at: formatDate(created_at), // Format 'created_at' date
+    updated_at: formatDate(updated_at), // Format 'updated_at' date
+  }));
 
   return (
     <div className="px-4 py-2 bg-light">

src/pages/StudentTasks/StudentTaskDetail.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { useParams } from 'react-router-dom';
+
+const StudentTaskDetail: React.FC = () => {
+  const { id } = useParams(); // To grab the ID from the URL
+
+  return (
+    <div>
+      <h2>Assignment Title: {id}</h2>
+      {/* Details about the assignment could be fetched and displayed here */}
+    </div>
+  );
+};
+
+export default StudentTaskDetail;

src/pages/StudentTasks/StudentTasks.module.css

@@ -0,0 +1,179 @@
+/* Base container styling */
+.container {
+  font-family: Arial, sans-serif;
+  margin: 20px;
+}
+
+/* Header 1 styling */
+h1 {
+  text-align: left;
+  padding-top: 5px;
+  padding-left: 15px;
+  margin-bottom: 0px;
+  padding-bottom: 0px;
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-size: 14px;
+  line-height: 1.428571429;
+  color: #333333;
+}
+
+/* Table base styling */
+table {
+  width: 100%;
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+
+/* Table, th, and td shared border styling */
+table,
+th,
+td {
+  border: 1px solid #ddd;
+}
+
+/* Table header styling */
+th {
+  background-color: #f8f8f8;
+  color: #333;
+  text-align: left;
+  padding: 8px;
+}
+
+/* Table data cell styling */
+td {
+  padding: 8px;
+  text-align: left;
+}
+
+/* First child of th and td border styling */
+th:first-child,
+td:first-child {
+  border-left: none;
+}
+
+/* Last child of th and td border styling */
+th:last-child,
+td:last-child {
+  border-right: none;
+}
+
+/* Table row striping for even rows */
+tr:nth-child(even) {
+  background-color: #f2f2f2;
+}
+
+/* Badge info icon and publishing rights checkbox styling */
+.badge-info-icon,
+.publishing-rights-checkbox {
+  cursor: pointer;
+  margin-left: 5px;
+}
+
+/* Checked state styling for publishing rights checkbox */
+.publishing-rights-checkbox:checked {
+  accent-color: #009688;
+}
+
+/* Table header row font styling */
+thead tr {
+  font-weight: bold;
+}
+
+/* Status indicator icons styling */
+.status-indicator {
+  color: #009688;
+  margin-left: 5px;
+}
+
+/* Disabled state styling for checkboxes */
+input[type="checkbox"][disabled] {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+/* Information icon styling in table */
+.info-icon {
+  font-style: normal;
+  color: #017bff;
+  cursor: help;
+}
+
+/* Side information section styling */
+.side-info {
+  color: #333;
+  padding: 10px 0;
+}
+
+/* Number styling in side information section */
+.side-info .number {
+  font-weight: bold;
+  color: #d9534f; /* Red color for the number badge */
+}
+
+/* Page layout styling */
+.pageLayout {
+  display: flex;
+  margin: 16px;
+}
+
+/* Sidebar styling */
+.sidebar {
+  width: 250px;
+  margin-right: 20px;
+  padding-top: 20px;
+}
+
+/* Main content area styling */
+.mainContent {
+  flex-grow: 1;
+  overflow: hidden;
+}
+
+/* Header below pageLayout styling */
+.header {
+  margin-bottom: 20px;
+}
+
+/* Tasks table styling */
+.tasksTable {
+  width: 100%;
+}
+
+/* Page assignments styling */
+.assignments-page {
+  font-family: 'Arial', sans-serif;
+}
+
+/* Title in assignments page styling */
+.assignments-title {
+  color: #333;
+  text-align: left;
+  padding: 20px;
+  font-size: 24px;
+}
+
+/* Footer section styling */
+.footer {
+  display: flex;
+  justify-content: center;
+  padding: 20px 0;
+}
+
+/* Footer link styling */
+.footerLink {
+  margin: 0 10px;
+  color: #986633;
+  text-decoration: none;
+}
+
+/* Footer link hover styling */
+.footerLink:hover {
+  color: #000000;
+  text-decoration: underline;
+}
+
+/* Center checkbox in table data cell styling */
+.centerCheckbox {
+  text-align: center;
+  vertical-align: middle;
+}