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

From Expertiza_Wiki
Jump to navigation Jump to search

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

  • Edit participants

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

Solution

The solution involves the following steps-

  • Changing the code for the table element to use the new Table component from src/components/Table/Table.tsx.
  • Fixing the search filter that appears above every table by adding code to change the span settings.
  • Updating warning messages according to the guidelines.
  • Updating text, icon and button formatting according to the design guidelines.
  • Adjusting pagination to ensure the component is only visible when the list of columns exceeds one full page.

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

Team

Mentor

  • Anvitha Reddy Gutha <agutha@ncsu.edu>

Members

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

Links

Pull Request: Expertiza Pull Request #79

Demo Video: Will be added towards the end of the project

Previous Wiki: Link

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

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2025_-_E2540_Integration_of_Assignment_participant_Frontend_with_participant_controller_Backend&oldid=164512"