CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend

Introduction

Expertiza is an open-source project developed with Ruby on Rails with the purpose of providing a platform for students to learn from one another through peer review.This project aims to fix the defects and improve the functionality in Expertiza of the Participants UI and integration. It will make the functionality smoother, more reliable, and align with Expertiza's collaborative learning objectives. The participants tab is linked to the Assignments tab and contains a table of participants in an assignment. It allows the user to add, delete and edit participants as well.

Project Goals

There are 2 main goals for this project -

• Appropriately integrating the frontend to the backend which currently fetches static data and is not connected to the backend robustly.
• Changing up the UI to match the novel standards set by the new version using the design document. It will involve formatting and using the recommended guidelines to implement parts of the page such as tables and table filtering.

Sequence Diagram

• This sequence diagram illustrates the complete interaction flow between the User, the UI Component, and the Backend Controller during the process of opening and displaying the Participants page for an assignment in the Expertiza system.

• The flow begins when the user selects an assignment, prompting the UI to request participant data from the backend. The backend processes this request and responds with a structured JSON payload. Once received, the frontend dynamically renders the participants table using an improved layout, potentially including grouped columns, collapsible sections, or enhanced filters.

• The diagram emphasizes how the frontend and backend collaborate to display live participant information in a modernized, React-based interface, replacing previously hardcoded or static displays.

Implemented Changes

Manage Participant Frontend Integration

Problem

The current implementation makes use of API calls to incorrect routes. This may be due to the frontend being implemented before the backend and wrong assumptions were made, or the backend's code has been updated without changing the frontend. In either case, the frontend needs to be properly integrated with the backend.

The screenshot shows the current API calls. Notice that one of the URLs is "participants/[type]/[id]". This is intended to fetch the participants to put into the table. However, the closest URLs are either "participants/user/[id]" or "participants/assignment/[id]". The URLs for applying CRUD to participants need to be updated to conform with the backend.

Solution

Update the URLs of the API calls to properly integrate with the backend. There also needs to be logic to handle getting participants by user or by assignment.

Update Frontend UI

Problem

• Participants list page

As seen in the below screenshot, the icon, button and text formatting have to be changed according to the new guidelines. Also pagination must be implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted must also be implemented.

• Add participants

As seen in the below screenshot button color of the "Add user" has to be changed according to the new design guidelines

• Edit participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

• Delete participants

As seen in the below screenshot, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons which should be removed

[[ |900px|]]

Implemented changes

• Participants list page

As seen in the below screenshot, the icon, button and text formatting are to be changed according to the new design guidelines. Pagination is implemented to ensure the component is only visible when the list of columns exceeds one full page. The new table component with the filter span adjusted is also be implemented.

[[ |900px|]]

Code snippets

This code was added for pagination

This code was added to update the table according to the design document

• Add participants

As seen in the below screenshot button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to normal case

[[ |900px|]]

Code snippets

This code was added to update the "Add user" button to red

• Edit participants

As seen in the below screenshot, the is improper text and button formatting is changed according to the design guidelines, the "Save changes" button is changed to red. The redundancy with the Cancel and X (close) buttons is also removed

[ |900px|]]

Code snippets

This code was added to update the "Save changes" button to red, the cancel button is removed to eliminate redundancy

• Delete participants

As seen in the below screenshot, the is improper text and button formatting is changed according to the design guidelines, the "Confirm" button is changed to red. The redundancy with the Cancel and X (close) buttons is also removed

[[ |900px|]]

Code snippets

This code was added to update the "Confirm" to red, the cancel button is removed to eliminate redundancy

Add/Edit/Remove Participants

Problem

Most of the changes needed for this problem is for adding a new participant. In particular, there is not a dedicated form for creating a new participant, simply a button that fills in default information. The edit and remove forms need to also have some small formatting changes.

Solution

The form for editing should be the same as for creating a participant, except that we change some text. Then, the edit/create form and the remove form has some minor text formatting changes, as well as removing some redundant buttons.

Testing

Manual Tests

The project will test different aspects of the frontend code in order to ensure the integration of the backend, as well as ensuring the proper formatting of the page.

Frontend/Backend Integration Tests

• Ensure the table shows participants
• Ensure role-based access to participants
• Ensure participants are properly updated/created with proper permissions

UI Tests

• Ensure the proper icon is used for editing a participant
• Ensure the proper icon is used for deleting a participant
• Ensure the table text format has the correct font size and line height
• Ensure the table has proper pagination

Demo Video

Please find the demo video going over the features at []

Pull Requests

You can find the changes made in the Frontend of this project project through [].

You can find the changes made in the Backend of this project project through [].

List of changes

Update Frontend UI

• src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
• /src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Updated icon, text and button formatting
• /src/pages/AssignmentParticipants/EditParticipantModal.tsx - Updated text and button formatting
• /src/pages/AssignmentParticipants/ConfirmRemoveModal.tsx - Updated text and button formatting
• /src/pages/AssignmentParticipants/ParticipantsTable.tsx - Added new Table component and updated icon, text and button formatting

Relevant Links

Pull Request that we worked on: []

Previous Wiki: Link

Guidance on Using Service Objects in Rails: Rails Service Objects Tutorial

Design Document [1]

Project Mentor

• Anvitha Reddy Gutha <agutha@ncsu.edu>

Members

• Aryan Inguva <ainguva@ncsu.edu>
• Maya Mei <gmei@ncsu.edu>
• Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>