E2333 : Implement Courses UI with React

src/App.js

@@ -3,6 +3,7 @@ import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import Home from "./components/Layout/Home";
 import RootLayout from "./components/Layout/Root";
 import Users from "./components/Users/Users";
+import Courses from "./components/Courses/Courses";
 
 function App() {
   const router = createBrowserRouter([
@@ -12,6 +13,7 @@ function App() {
       children: [
         { index: true, element: <Home /> },
         { path: "users", element: <Users /> },
+        { path: "courses", element: <Courses />},
       ],
     },
   ]);

src/components/Courses/Courses.js

@@ -0,0 +1,148 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import CardList from '../UI/Card/CardList';
+
+
+const Courses = () => {
+
+  const columnKeys = [
+    { key: "courseName", label: "Course Name" },
+    { key: "institution", label: "Institution" },
+    { key: "createDate", label: "Created Date" },
+    { key: "updateDate", label: "Updated Date" },
+    { key: "", label: "Actions" }
+  ];
+    const dummyData = [
+        {
+          "courseId": 1,
+          "courseName": "Computer Science 101",
+          "institution": "Harvard University",
+          "createDate": "2022-01-01",
+          "updateDate": "2022-02-01",
+          "assignments": [
+            {
+              "assignmentName": "Project 1",
+              "institution": "Harvard University",
+              "createDate": "2022-01-15",
+              "updateDate": "2022-02-01"
+            },
+            {
+              "assignmentName": "Quiz 1",
+              "institution": "Harvard University",
+              "createDate": "2022-01-30",
+              "updateDate": "2022-02-01"
+            }
+          ]
+        },
+        {
+          "courseId": 2,
+          "courseName": "Mathematics 101",
+          "institution": "Massachusetts Institute of Technology",
+          "createDate": "2022-02-15",
+          "updateDate": "2022-03-01",
+          "assignments": [
+            {
+              "assignmentName": "Problem Set 1",
+              "institution": "Massachusetts Institute of Technology",
+              "createDate": "2022-02-25",
+              "updateDate": "2022-03-01"
+            },
+            {
+              "assignmentName": "Midterm Exam",
+              "institution": "Massachusetts Institute of Technology",
+              "createDate": "2022-03-01",
+              "updateDate": "2022-03-10"
+            }
+          ]
+        },
+        {
+          "courseId": 3,
+          "courseName": "English 101",
+          "institution": "Stanford University",
+          "createDate": "2022-03-15",
+          "updateDate": "2022-04-01",
+          "assignments": [
+            {
+              "assignmentName": "Essay 1",
+              "institution": "Stanford University",
+              "createDate": "2022-03-20",
+              "updateDate": "2022-04-01"
+            },
+            {
+              "assignmentName": "Presentation",
+              "institution": "Stanford University",
+              "createDate": "2022-03-30",
+              "updateDate": "2022-04-01"
+            }
+          ]
+        },
+        {
+          "courseId": 4,
+          "courseName": "History 101",
+          "institution": "Yale University",
+          "createDate": "2022-04-15",
+          "updateDate": "2022-05-01",
+          "assignments": [
+            {
+              "assignmentName": "Research Paper",
+              "institution": "Yale University",
+              "createDate": "2022-04-20",
+              "updateDate": "2022-05-01"
+            },
+            {
+              "assignmentName": "Exam 1",
+              "institution": "Yale University",
+              "createDate": "2022-04-30",
+              "updateDate": "2022-05-01"
+            }
+          ]
+        }
+        ];
+
+        const actions = [
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/add-assignment-24.png`,
+            alt: 'Add Assignment'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/add-participant-24.png`,
+            alt: 'Add Participant'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/add-ta-24.png`,
+            alt: 'Add TA'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/Copy-icon-24.png`,
+            alt: 'Copy'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/delete-icon-24.png`,
+            alt: 'Delete'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/edit-icon-24.png`,
+            alt: 'Edit'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/create-teams-24.png`,
+            alt: 'Create Teams'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/360-dashboard-24.png`,
+            alt: 'Dashboard'
+          },
+          {
+            src: `${process.env.PUBLIC_URL}/assets/actions/glyphicon-alt-list.png`,
+            alt: 'View aggregated teammate & meta reviews'
+          }
+        ];
+
+      return (
+        <div>
+          <h1>Courses</h1>
+          <CardList courses={dummyData} columnKeys={columnKeys} actions={actions}/>
+        </div>
+      );
+    };
+
+export default Courses;

src/components/UI/Card/Card.js

@@ -0,0 +1,116 @@
+import { useState } from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+import CardList  from "./CardList";
+
+  const Card = ({ course,actions }) => {
+    const [showAssignments, setShowAssignments] = useState(false);
+    const keys = Object.keys(course).filter(key => key !== 'assignments' && !key.includes("Id"));
+    const columnKeys = [
+      { key: "assignmentName", label: "Assignment Name" },
+      { key: "institution", label: "Institution" },
+      { key: "createDate", label: "Created Date" },
+      { key: "updateDate", label: "Updated Date" },
+      { key: "", label: "Actions" }
+    ];
+
+    const actionsAssign = [
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/add-participant-24.png`,
+        alt: 'Add Participant'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/Copy-icon-24.png`,
+        alt: 'Copy'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/delete-icon-24.png`,
+        alt: 'Delete'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/edit-icon-24.png`,
+        alt: 'Edit'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/create-teams-24.png`,
+        alt: 'Create Teams'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/remove-from-course-24.png`,
+        alt: 'Remove from Course'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/assign-reviewers-24.png`,
+        alt: 'Assign Reviewers'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/List-submisstions-24.png`,
+        alt: 'List Submissions'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/view-scores-24.png`,
+        alt: 'View Scores'
+      },
+      {
+        src: `${process.env.PUBLIC_URL}/assets/actions/view-review-report-24.png`,
+        alt: 'View Reports'
+      }
+    ];
+
+    function handleClick(event) {
+      event.stopPropagation();
+
+    }
+
+    const toggleAssignments = (assignments) => {
+
+        if(!assignments)
+        {
+
+        }
+        else{
+        setShowAssignments(!showAssignments);
+
+        }
+    };
+    if (!course) {
+        return null; // Or some other fallback component
+      }
+
+    return (
+
+        <div style={{ marginBottom: "5px" }}>
+        <div className="card-component p-2 card"
+           onMouseOver={(e) => e.currentTarget.style.backgroundColor = "#f2f2f2"}
+           onMouseOut={(e) => e.currentTarget.style.backgroundColor = ""}>
+
+          <div className="card-body row" onClick={() => toggleAssignments(course.assignments)} >
+          {keys.map((key, index) => (
+        <div key={index} className="card-text col" style={{ wordWrap: 'break-word' }}>
+          {course[key]}
+        </div>
+      ))}
+      <div className="card-text col" style={{ wordWrap: 'break-word' }}>
+      {actions.map((action, index) => (
+        <img key={index} src={action.src} alt={action.alt} />
+      ))}
+          </div>
+
+          {showAssignments && 
+           <div onClick={handleClick}>
+        <CardList  courses={course.assignments} columnKeys={columnKeys} actions={actionsAssign} />
+        </div>
+
+
+
+
+
+    }
+
+        </div>
+        </div>
+        </div>
+
+    );
+  };
+
+  export default Card;

src/components/UI/Card/CardHeader.js

@@ -0,0 +1,51 @@
+import { useState } from "react";
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+
+const CardHeader = ({ columnKeys ,onSortClick}) => {
+  const [sortColumn, setSortColumn] = useState(null);
+  const [sortDirection, setSortDirection] = useState(null);
+
+  const handleSortClick = (column) => {
+    if(column==='')
+    {
+
+    }
+    else{
+    if (onSortClick) {
+      onSortClick(column);
+    }
+    if (sortColumn === column) {
+      // If the same column is clicked twice, toggle the sort direction
+      setSortDirection(sortDirection === "asc" ? "desc" : "asc");
+    } else {
+      // Otherwise, sort by the new column in ascending order
+      setSortColumn(column);
+      setSortDirection("asc");
+    }
+  }
+  };
+
+  return (
+    <div className="card-component card pointer" style={{ overflow: "hidden" }}>
+
+        <div className="card-header row">
+        {columnKeys.map((column) => (
+            <div
+              key={column.key}
+              className="col"
+              onClick={() => handleSortClick(column.key)}
+            >
+              <strong>{column.label}</strong>
+              {sortColumn === column.key && (
+                <span>{sortDirection === "asc" ? " ▲" : " ▼"}</span>
+              )}
+            </div>
+          ))}
+        </div>
+
+    </div>
+  );
+};
+
+export default CardHeader;