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
- 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.
- 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.
- 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.
- 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.
- 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
Created participant component which needs two props.
- type: which contains either value "student_tasks" (for assignments) or "courses" (for courses).
- id: of the assignment or course.
These two values would be provided by the parent component implementing the Participants component.
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