CSC/ECE 517 Fall 2023 - E2364. Create a UI for Course's & Assignment's "Add Participants" page

Problem Statement

The project revolves around creating the "Add Participants" feature for assignments and courses. The main page shows all the participants for a specific assignment or course. Only admins can view this page. Admins can add new participants, edit existing participants, and delete participants added to the assignment or course. More details of the problem statement can be found here: Issue 14.

Tasks Completed

1. Create a page to display all the participants:
   • Designed a dynamic table to display all the participants
   • Implemented Participant Component
   • Followed the component design pattern of the project.
2. Feature to add new participants:
   • Designed a modal where admins can fill out the participant details
   • Implemented Add Participant Component
   • Followed the component design pattern of the project.
3. Feature to edit existing participants:
   • Designed a modal where admins can edit the participant details
   • Implemented Edit Participant Component
   • Followed the component design pattern of the project.
4. Feature to delete participants:
   • Designed a modal where admins get a confirmation box before deleting a participant.
   • Implemented Delete Participant Component
   • Followed the component design pattern of the project.
5. Protected Routes:
   • Only people with permissions of TA or above level are allowed access to the page.
   • Implemented Route Protection mentioned in the project

Component Details

1. Created participant component which needs two props.
   1. type: which contains either value "student_tasks" (for assignments) or "courses" (for courses).
   2. id: of the assignment or course.
2. Created add/edit participant modal which is similar to the user add/edit modal
3. Created delete participant modal.

Files Created/Updated

• reimplementation-front-end\src\App.tsx
• reimplementation-front-end\src\pages\Participants\Participant.tsx
• reimplementation-front-end\src\pages\Participants\participantColumns.tsx
• reimplementation-front-end\src\pages\Participants\ParticipantDelete.tsx
• reimplementation-front-end\src\pages\Participants\ParticipantEditor.tsx
• reimplementation-front-end\src\pages\Participants\participantUtil.ts
• reimplementation-front-end\src\utils\interfaces.ts

Results

• Manage Participants Page:

• Add Participants Page:

Team

Mentor

• Renji Joseph Sabu (rsabu@ncsu.edu)

Members

• Atharva Thorve <athorve@ncsu.edu>
• Mrityunjay Joshi <mjoshi6@ncsu.edu>
• Divit Kalathil <dakalath@ncsu.edu>

Pull Request

• https://github.com/expertiza/reimplementation-front-end/pull/17