CSC/ECE 517 Fall 2024 - E2491.UI for View assignments in Courses view

This page contains information about Expertiza Issue E2491. UI for View assignments in Courses view which was a project in CSC517 Fall 2024.

Please see below for a description of the design of the project.

Purpose

The overall project goal is to add extension functionality to the courses view in the reimplementation of Expertiza. This functionality will make it easier to navigate to the assignments for a given coarse. It will also provide a quick way of interacting with the assignments through the provided action items in the extension.

Requirements

Create an updated version of the view assignments table that is connected to the courses view.
Connect all previously reimplemented views that were a part of the old implementation including the view created for this teams last project CSC/ECE 517 Fall 2024 - E2467. UI for View Submissions
Create extensive test cases for the new and updated views.

Implementation

The main changes that will be made is the creation of the view all assignments table that will be displayed underneath a course when the assignments button is clicked on. The goal of our implement is to create a similar table to the view all courses page to ensure that formatting is uniform across the page. Any links, which can be seen in the action section in the previous implementation below. That do not have a view created already have been linked to an empty page that will be created in a later semester.

These changes can be handled by creating a new component for each of the course rows. This component will be responsible for displaying the course extension below the course when selected.
The extension will display a table that displays correct assignment information.

Files Changed/Added

Views:

src/pages/Courses/Course.tsx[1]
- Attach assignment extension to each course in the course view
- Includes mock data created temporarily.
src/pages/Courses/CourseAssignments.tsx[2]
- Create copy of assignments view table that displays assignment for a specific course.
- Also within this file are the icons used in the action section of the table. Below is an example of how an action icon is coded. As can be seen it sets up the image of the icon, the name that shows up when hovering over it in label and what happens when the icon is clicked in the handler which can be updated to navigate when all connected pages are setup.

  {
     icon: '/assets/icons/edit-temp.png',
     label: 'Edit',
     handler: (row: TRow<any>) => {
       console.log('Edit assignment:', row.original);
     },
     className: 'text-primary'
   }

src/pages/Assignments/Assignment.tsx [3]
- Creates mock data so we could view the table that we would be replicating. This was done because of errors in the api for creating assignments making it impossible to create assignments through the backend.

As mentioned some of the changes include the creation of mock data in order to test the table to ensure data is being formatted and displayed correctly. This will be done in a similar manner to our previous project which an example of can be seen below. With each of these assignments an action section will have to be created as part of the table as well.

 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,
     description: "This is a fake assignment",
     created_at: new Date(Date.now() - Math.random() * 10000000000).toISOString(),
     updated_at: new Date().toISOString(),
   }));
 };

The main commit for the extension table can be seen here [4]

The main commit for the creation of mock data can be seen here [5]

Testing

Manual Testing

First login to the system using an admin account.

Next click on the manage extension on the navbar at the top of the screen and select courses.

Now you have been navigated to the courses page which should be filled with mock data for the current implementation. Next you need to click on the arrow next to one of the courses to set the assignments connected to that course.

Here you should see mock data with lots of action links that don't currently connect to anything as the functionality is not fully set up for those pages.

Automatic Testing

All test cases have been automated to make sure both correct data and formatting appear in the relevant areas.

Added test files:

src/pages/Courses/CourseAssignments.test.tsx - 3 test cases
- Test cases were focused on the table and the mock data contents to ensure that everything was generated correctly. Once the backend is setup testcases will have to be updated to use real data rather then mock.

#	Expectation	Passing
1	Renders the extension and table for the selected course correctly	passed
2	Renders assignments in the table correctly.	passed
3	Trigger edit and delete actions and ensure that mock functionality works correctly.	passed

Team Members

Chris Kastritis (crkastri@ncsu.edu)
Mark Feng (mjfeng@ncsu.edu)
Mason Horne (mjhorne2@ncsu.edu)

Mentor: Prathima Putreddy Niranjana (pniranj@ncsu.edu)

Code Details

Github Pull Request - https://github.com/expertiza/reimplementation-front-end/pull/76

Repo - https://github.com/masonhorne/reimplementation-front-end/tree/main2

Demo - https://www.youtube.com/watch?v=qjDWAT-fkHo

CSC/ECE 517 Fall 2024 - E2491.UI for View assignments in Courses view

Contents

Purpose

Requirements