Expertiza_Wiki - User contributions [en]

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

2025-04-22T23:28:17Z

Ainguva: /* Implemented Changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 400px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 600px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== 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

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== 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>

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

2025-04-22T23:28:00Z

Ainguva: /* Implemented Changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 500px]]

Delete

[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== 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

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== 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>

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

2025-04-22T23:27:12Z

Ainguva: /* Manage Participant Frontend Integration */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 250px]]

Delete

[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====
*app/controllers/api/v1/participants_controller.rb - Adding the participant role as part of authorization.
*app/helper/participant_helper.rb - Adding participant to the permissions map which manages changes to permission due to change in role.

=== 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

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== 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>

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

2025-04-22T23:24:22Z

Ainguva: /* Manage Participant Frontend Integration */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 250px]]

Delete

[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

====Frontend====
*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

====Backend====

=== 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

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== 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>

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

2025-04-22T23:23:49Z

Ainguva: /* List of changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 250px]]

Delete

[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

*/src/App.tsx - Adding the new route and appropriate props.
*/src/pages/AssignmentParticipants/AssignmentParticipants.tsx - Addition of API calls and appropriate state creation.
*/src/pages/AssignmentParticipants/EditParticipantModal.tsx - Removal of redundant sliders to edit permissions.
*/src/utils/interfaces.ts - Addition of IAssignmentParticipantResponse interface.

=== 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

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document:
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]

== 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>

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

2025-04-22T23:20:43Z

Ainguva: /* Future Scope */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 250px]]

Delete

[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* The TA role is to be added post merge of the TA feature.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

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

2025-04-22T23:18:52Z

Ainguva: /* Implemented Changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add

[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated

[[File: E2540-editparticipant.png | 250px]]

Delete

[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

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

2025-04-22T23:18:30Z

Ainguva: /* Implemented Changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 400px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add
[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated
[[File: E2540-editparticipant.png | 250px]]

Delete
[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

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

2025-04-22T23:18:21Z

Ainguva: /* Implemented Changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 750px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 300px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add
[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated
[[File: E2540-editparticipant.png | 250px]]

Delete
[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

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

2025-04-22T23:18:02Z

Ainguva: /* Implemented Changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 1000px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 500px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.

Add
[[File: E2540-addparticipant.png | 500px]]

Edit - Users and Participants table can be updated
[[File: E2540-editparticipant.png | 250px]]

Delete
[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

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

2025-04-22T23:17:00Z

Ainguva: /* Implemented Changes */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

1) App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 500px]]

2) interfaces.ts
* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 500px]]

3) AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 500px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 500px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.
- Add
[[File: E2540-addparticipant.png | 500px]]

- Edit - Users and Participants table can be updated
[[File: E2540-editparticipant.png | 250px]]

- Delete
[[File: E2540-deleteparticipant.png | 500px]]

4) EditParticipantModal.tsx
* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 500px]]

5) participant_controller.rb
* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 500px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

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

2025-04-22T23:14:13Z

Ainguva: /* Solution */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

==== Implemented Changes ====

** App.tsx
* The path now correctly points to the new participants page as opposed to the older one while also passing the right props in the router.

[[File: E2540-routes.png | 250px]]

** AssignmentParticipants.tsx
* The appropriate fetch calls have been added to populate the participants table from the DB using the backend APIs namely fetchParticipants, fetchUsers, fetchAssignements. It is filtered by assignment due to how it can be accessed through the Assignments Table.

[[File: E2540-fetchcalls.png | 250px]]

* A new interface, IAssignmentParticipantResponse has been added to structure the response data in the interfaces.ts file.
[[File: E2540-interface.png | 250px]]

* The participants state contains the following parameters which is stored and used while fetching, editing or deleting the table.
[[File: E2540-participantstate.png | 250px]]

* The code to using the static data has been replaced by API calls for add, edit and delete as seen below.
- Add
[[File: E2540-addparticipant.png | 250px]]

- Edit - Users and Participants table can be updated
[[File: E2540-editparticipant.png | 250px]]

- Delete
[[File: E2540-deleteparticipant.png | 250px]]

* The permission sliders in the edit modal (seen in the below screenshot) which were a redundant feature has been removed as authorization role (Participant, Reader, Reviewer, Submitter, Mentor) automatically updates the permissions the user has.
[[File: E2540-sliders.png | 250px]]

* The backend was changed to incorporate "participant" as a role in participants_controller.rb and participants_helper.rb to manage permissions.
[[File: E2540-backend.png | 250px]]

=== 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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Solution ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

File:E2540-backend.png

2025-04-22T23:13:57Z

Ainguva:

File:E2540-sliders.png

2025-04-22T23:12:22Z

Ainguva:

File:E2540-deleteparticipant.png

2025-04-22T23:11:19Z

Ainguva:

File:E2540-editparticipant.png

2025-04-22T23:10:13Z

Ainguva:

File:E2540-addparticipant.png

2025-04-22T23:09:06Z

Ainguva:

File:E2540-participantstate.png

2025-04-22T23:06:38Z

Ainguva:

File:E2540-interface.png

2025-04-22T23:04:49Z

Ainguva:

File:E2540-fetchcalls.png

2025-04-22T23:01:45Z

Ainguva:

File:E2540-routes.png

2025-04-22T22:56:59Z

Ainguva:

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

2025-04-22T22:40:30Z

Ainguva: /* Future Scope */

== 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 ==

[[File:Spring 2025 - E2540 - Sequence_diagram.png|400px|]]

*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.

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one Assignment entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

====4. Backend ====

Must add relevant for Backend here

== Design principles ==

 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

Must add relevant for Backend here

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

Must add relevant for backend

== 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |600px|]]

* Add participants

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

[[File:Spring 2025 - E2540 - Add_participants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |600px|]]

* 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

[[File:Spring 2025 - E2540 Before-remove-participant.png |600px|]]

==== Implemented changes ====
* Participants list page
As seen in the below screenshot, the icon, button and text formatting were 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.

[[File:Spring 2025 - E2540 After-participant-list.png |600px|]]

Code snippets

This code was added for pagination

[[File:Spring 2025- E2540 - Pagination.png|500px]]

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

[[File:Spring 2025 - E2540 - Table.png|500px]]

* Add participants

As seen in the screenshot below, the button color of the "Add user" is changed to Red according to the new design guidelines and camel case has been changed to capitalize the first letter of the first word.

[[File:Spring 2025 - E2540 after-add-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 - E2540 - Add user.png|500px]]

* Edit participants

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

[[File:Spring 2025 - E2540 After-edit-participant.png |600px|]]

Code snippets

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

[[File:Spring 2025 E2540 - Edit participant.png|500px]]

* Delete participants

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

[[File:Spring 2025 - E2540 After-delete-modal.png |600px|]]

Code snippets

This code was added to update the "Confirm" to red. The cancel button was removed to eliminate redundancy.

[[File:Spring 2025 - E2540 - Delete participant.png|500px]]

=== 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. Shown in the demo video.
* Ensure participants are properly updated/created with proper permissions. Shown in the demo video.

==== UI Tests ====

* Ensure the proper icon is used for editing a participant. Shown in the demo video.
* Ensure the proper icon is used for deleting a participant. Shown in the demo video.
* Ensure the table has proper pagination. Shown in the demo video.
* Ensure the table text format has the correct font size and line height. As shown in the screenshot below, the table content has the proper font size, and the casing is correct.
[[File:Spring 2025 - E2540 Table-font-size-check.png | 700px]]

== Future Scope ==
* The frontend code requires refactoring to follow the design guidelines of expertiza. The structure of the code in the three files - AssignmentParticipants.tsx, ConfirmRemoveModal.tsx and EditParticipantModal.tsx must be changed such that the API calls are moved to the files which would handle add, edit and delete. Also the stylesheets (the .css files) must be moved to ensure it follows the pattern of the other features.

* Enforce CRUD permissions of participants in backend.

== Demo Video ==

You can find the demo video going over the features [https://youtu.be/Zxt6-GaokJA here]

== 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 ==

=== Manage Participant Frontend Integration ===

=== 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

=== Add/Edit/Remove Participants ===

== Conclusion ==

This project has successfully modernized and integrated the Assignment Participants page in Expertiza by:

*Linking frontend to backend: Replacing hard‑coded data with robust API calls to the Rails participant_controller, ensuring live, per‑assignment participant data is fetched and rendered dynamically.

*UI alignment: Updating table layouts, buttons, modals, and pagination to match the new design guidelines, improving consistency, readability, and user feedback.

*State & architecture improvements: Leveraging React+TypeScript, Redux Toolkit, and a custom API hook for clean state management and scalable component communication.

*Testing & validation: Performing thorough manual integration and UI tests (as shown in the demo video) to confirm correct CRUD operations, styling, and iconography across all participant flows.

These changes not only deliver a smoother, more reliable participant management experience aligned with Expertiza’s collaborative learning objectives, but also establish a clear foundation for future enhancements—such as enforcing backend permissions, adding automated test suites, and extending participant features.

== Relevant Links ==

Pull Request that we worked on:
[https://github.com/expertiza/reimplementation-front-end/pull/79]

Previous Wiki that we referred to:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

Design Document
[https://github.com/AnvithaReddyGutha/reimplementation-front-end/blob/main/design_document.md]



== 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>

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

2025-04-08T02:32:16Z

Ainguva: /* Links */

== Introduction ==

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 ==

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

==== 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 Gutha

=== Members ===

* Aryan Inguva
* Maya Mei
* Shuba Kalyanasundaram



== Links ==
Pull Request:
[https://github.com/expertiza/reimplementation-front-end/pull/79 Expertiza Pull Request #79]

Demo Video:

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

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

2025-04-08T02:31:53Z

Ainguva: /* Links */

== Introduction ==

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 ==

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

==== 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 Gutha

=== Members ===

* Aryan Inguva
* Maya Mei
* Shuba Kalyanasundaram



== Links ==
Pull Request:
[https://github.com/expertiza/expertiza/pull/2901 Expertiza Pull Request #2901]

Demo Video:

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2024_-_E2490.1_Improving_Assignment_Participants_Management_UI_in_Expertiza Link]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

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

2025-04-08T02:31:06Z

Ainguva:

== Introduction ==

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 ===

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

==== 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

== 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 Gutha

=== Members ===

* Aryan Inguva
* Maya Mei
* Shuba Kalyanasundaram



== Links ==
Pull Request:
[https://github.com/expertiza/expertiza/pull/2901 Expertiza Pull Request #2901]

Demo Video:
[https://youtu.be/TjYkx6SSC0Y E2485 Review Bidding Feature Demo Video]

Previous Wiki:
[https://wiki.expertiza.ncsu.edu/index.php/CSC/ECE_517_Fall_2021_-_E2151._Allow_reviewers_to_bid_on_what_to_review Link]

Reference Link for Webservice Details:
[https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Fall_2020_-_E2085._Allow_reviewers_to_bid_on_what_to_review match_topics webservice link details]

Guidance on Using Service Objects in Rails:
[https://www.toptal.com/ruby-on-rails/rails-service-objects-tutorial Rails Service Objects Tutorial]

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

2025-04-08T02:29:12Z

Ainguva: /* Team */

== Introduction ==

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.

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

==== 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.

== 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 Gutha

=== Members ===

* Aryan Inguva
* Maya Mei
* Shuba Kalyanasundaram

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

2025-04-08T02:28:39Z

Ainguva:

== Introduction ==

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.

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

==== 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.

== 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

=== Members ===

* Aryan
* Maya

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

2025-04-08T02:26:53Z

Ainguva: /* Problem */

== Introduction ==

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.

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

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

[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

==== 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 ===

== 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

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

2025-04-08T02:26:34Z

Ainguva: /* Problem */

== Introduction ==

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.

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

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.

[[File:Spring 2025 - E2540_Participants_list_page.png |900px|]]

* Add participants

[[File:Spring 2025 - E2540 - Add_participants.png |900px|]]

* Edit participants
As seen below, there is improper text and button formatting. There is also a redundancy with the Cancel and X (close) buttons.
[[File:Spring 2025 - E2540 -Edit_partcipants.png |900px|]]

==== 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 ===

== 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

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

2025-04-08T02:22:51Z

Ainguva: /* Problem */

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

2025-04-08T02:21:04Z

Ainguva: /* Problem */

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

2025-04-08T02:19:16Z

Ainguva: /* Solution */

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

2025-04-08T02:06:34Z

Ainguva: /* Introduction */

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

2025-04-08T02:06:20Z

Ainguva: /* Project Goals */

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

2025-04-08T02:05:55Z

Ainguva: /* Introduction */

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

2025-04-03T22:09:16Z

Ainguva: /* Problem */

== Introduction ==

Explaining Expertiza

=== Project Goals ===

Details of the project

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 500px]]

==== Solution ====

=== Update Frontend UI ===

==== Problem ====

==== Solution ====

== Testing ==

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

2025-04-03T22:09:08Z

Ainguva: /* Problem */

== Introduction ==

Explaining Expertiza

=== Project Goals ===

Details of the project

== Proposed 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.

[[File:E2540-before-ParticipantCode.png | 1000px]]

==== Solution ====

=== Update Frontend UI ===

==== Problem ====

==== Solution ====

== Testing ==

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

2025-04-03T22:08:52Z

Ainguva: /* Manage Participant Frontend Integration */

== Introduction ==

Explaining Expertiza

=== Project Goals ===

Details of the project

== Proposed 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.

[[File:E2540-before-ParticipantCode.jpg | 1000px]]

==== Solution ====

=== Update Frontend UI ===

==== Problem ====

==== Solution ====

== Testing ==

File:E2540-before-ParticipantCode.png

2025-04-03T21:58:25Z

Ainguva:

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-25T00:44:59Z

Ainguva: /* Implementation Details */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses

Original UI

[[File:E2523-task-1-course-before.png|800px]]

Reimplemented UI

[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page in the reimplemented UI:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====

Manage TA modal

Original UI

[[File:Manage-ta-before.png|800px]]

Reimplemented UI

[[File:E2523-TAmodal_after.png|800px]]

Add TA modal

Original UI

[[File:E2523-task-2-manage-ta-add-before.png|800px]]

Reimplemented UI

[[File:E2523-Manage-ta-add-after.png|800px]]

Add TA alert

Original UI

[[File:E2523-Old-alert.png|800px]]

Reimplemented UI

[[File:E2523-alert-after.png|800px]]

Code Snippet:

Icon change for adding TA:

[[File:E2523-Code_snippets_for_icons_-a.png|500px]]

Alert messages change:

[[File:E2523-alerts.png|400px]]

==== Task 3 ====

Submissions Table

Original UI

[[File:E2523-Submission-before.png|800px]]

Reimplemented UI

[[File:Task3subafter.png|800px]]

Submissions History Table

Original UI

[[File:E2523-Submission-history-before.png|800px]]

Reimplemented UI

[[File:Task3subhistafter.png|800px]]

Navbar

Original UI

[[File:E2523-Navbar-before.png|500px]]

Reimplemented UI

[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==
Please find the demo video going over the features at https://youtu.be/hhPBc9CfjSs

== List of Changes ==

==== Non-task Specific ====

* src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
* src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

==== Task 1 ====

* src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
* src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
* src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
* src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
* src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

==== Task 2 ====

* /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
* /src/pages/TA/TAColumns.tsx - Updated Icon
* /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
* /src/pages/TA/TADelete.tsx - Updated button formatting

==== Task 3 ====
* /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting

* /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.

* /src/layout/Header.tsx - Removed the Assignments tab to add the Submissions tab under Manage.

== Pull Request ==

You can find the changes made in this project through this pull request.

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Enhancing TA UX: Improve user experience with editing and managing TAs.

* Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.

* Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.

* More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-25T00:26:06Z

Ainguva: /* Demo Video */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses (Left: before, Right: after)

[[File:E2523-task-1-course-before.png|800px]]
[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====

Manage TA modal (Left: before, Right: after)

[[File:Manage-ta-before.png|800px]]
[[File:E2523-TAmodal_after.png|800px]]

Add TA modal (Left: before, Right: after)

[[File:E2523-task-2-manage-ta-add-before.png|800px]]
[[File:E2523-Manage-ta-add-after.png|800px]]

Add TA alert (Left: before, Right: after)

[[File:E2523-Old-alert.png|800px]]
[[File:E2523-alert-after.png|800px]]

Code Snippet:

Icon change for adding TA:

[[File:E2523-Code_snippets_for_icons_-a.png|500px]]

Alert messages change:

[[File:E2523-alerts.png|400px]]

==== Task 3 ====
Before:

Submissions Table (Left: before, Right: after)

[[File:E2523-Submission-before.png|800px]]
[[File:Task3subafter.png|800px]]

Submissions History Table (Left: before, Right: after)

[[File:E2523-Submission-history-before.png|800px]]
[[File:Task3subhistafter.png|800px]]

Navbar (Left: before, Right: after)

[[File:E2523-Navbar-before.png|500px]]
[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==
Please find the demo video going over the features at https://youtu.be/hhPBc9CfjSs

== List of Changes ==

==== Non-task Specific ====

* src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
* src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

==== Task 1 ====

* src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
* src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
* src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
* src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
* src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

==== Task 2 ====

* /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
* /src/pages/TA/TAColumns.tsx - Updated Icon
* /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
* /src/pages/TA/TADelete.tsx - Updated button formatting

==== Task 3 ====
* /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting

* /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.

* /src/layout/Header.tsx - Removed the Assignments tab to add the Submissions tab under Manage.

== Pull Request ==

You can find the changes made in this project through this pull request.

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Enhancing TA UX: Improve user experience with editing and managing TAs.

* Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.

* Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.

* More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-24T21:36:37Z

Ainguva: /* Task 3 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses (Left: before, Right: after)

[[File:E2523-task-1-course-before.png|800px]]
[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====

Manage TA modal (Left: before, Right: after)

[[File:Manage-ta-before.png|800px]]
[[File:E2523-TAmodal_after.png|800px]]

Add TA modal (Left: before, Right: after)

[[File:E2523-task-2-manage-ta-add-before.png|800px]]
[[File:E2523-Manage-ta-add-after.png|800px]]

Add TA alert (Left: before, Right: after)

[[File:E2523-Old-alert.png|800px]]
[[File:E2523-alert-after.png|800px]]

Code Snippet:

Icon change for adding TA:

[[File:E2523-Code_snippets_for_icons_-a.png|500px]]

Alert messages change:

[[File:E2523-alerts.png|400px]]

==== Task 3 ====
Before:

Submissions Table (Left: before, Right: after)

[[File:E2523-Submission-before.png|800px]]
[[File:Task3subafter.png|800px]]

Submissions History Table (Left: before, Right: after)

[[File:E2523-Submission-history-before.png|800px]]
[[File:Task3subhistafter.png|800px]]

Navbar (Left: before, Right: after)

[[File:E2523-Navbar-before.png|500px]]
[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

==== Non-task Specific ====

* src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
* src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

==== Task 1 ====

* src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
* src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
* src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
* src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
* src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

==== Task 2 ====

* /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
* /src/pages/TA/TAColumns.tsx - Updated Icon
* /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
* /src/pages/TA/TADelete.tsx - Updated button formatting

==== Task 3 ====
* /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting

* /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.

* /src/layout/Header.tsx - Removed the Assignments tab to add the Submissions tab under Manage.

== Pull Request ==

You can find the changes made in this project through this pull request.

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Enhancing TA UX: Improve user experience with editing and managing TAs.

* Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.

* Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.

* More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-24T21:34:35Z

Ainguva: /* Task 3 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses (Left: before, Right: after)

[[File:E2523-task-1-course-before.png|800px]]
[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====

Manage TA modal (Left: before, Right: after)

[[File:Manage-ta-before.png|800px]]
[[File:E2523-TAmodal_after.png|800px]]

Add TA modal (Left: before, Right: after)

[[File:E2523-task-2-manage-ta-add-before.png|800px]]
[[File:E2523-Manage-ta-add-after.png|800px]]

Add TA alert (Left: before, Right: after)

[[File:E2523-Old-alert.png|800px]]
[[File:E2523-alert-after.png|800px]]

Code Snippet:

Icon change for adding TA:

[[File:E2523-Code_snippets_for_icons_-a.png|500px]]

Alert messages change:

[[File:E2523-alerts.png|400px]]

==== Task 3 ====
Before:

Submissions Table (Left: before, Right: after)

[[File:E2523-Submission-before.png|800px]]
[[File:Task3subafter.png|800px]]

Submissions History Table (Left: before, Right: after)

[[File:E2523-Submission-history-before.png|800px]]
[[File:Task3subhistafter.png|800px]]

Navbar (Left: before, Right: after)

[[File:E2523-Navbar-before.png|500px]]
[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

==== Non-task Specific ====

* src/components/Table/Pagination.tsx - Updated pagination component to only be visible if there is more than one page
* src/components/Table/Table.tsx - Updated table component to include a "disableGlobalFilter" option

==== Task 1 ====

* src/pages/Courses/Courses.tsx - Updated text, table, and button formatting
* src/pages/Courses/CourseColumns.tsx - Updated text and table formatting
* src/pages/Courses/CourseCopy.tsx - Updated text and button formatting
* src/pages/Courses/CourseDelete.tsx - Updated text and button formatting
* src/pages/Courses/CourseEditor.tsx - Updated text and button formatting

==== Task 2 ====

* /src/pages/TA/TA.tsx - Updated Icon, text and button formatting
* /src/pages/TA/TAColumns.tsx - Updated Icon
* /src/pages/TA/TAEditor.tsx - Updated Icon, button, text and warning message formatting
* /src/pages/TA/TADelete.tsx - Updated button formatting

==== Task 3 ====
* /src/pages/Submissions/SubmissionsView.tsx - Added new Table component. Updated text and button formatting

* /src/pages/Submissions/SubmissionsHistoryView.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsEntry.tsx - Added new Table component. Updated text and button formatting.

* /src/pages/Submissions/SubmissionsTable/SubmissionsList.tsx - Added new Table component. Updated text and button formatting.

== Pull Request ==

You can find the changes made in this project through this pull request.

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Enhancing TA UX: Improve user experience with editing and managing TAs.

* Backend Implementation/Integration of Submissions and Submissions History: Currently, the Submissions page uses mock data, as the backend is currently not developed.

* Implementation of Deleting TAs: While out of the scope of this project, the past project did not implement the deletion of TAs, so that feature is currently not available.

* More Robust Logging: With more standardized logging, the debugging process could be streamlined, as useful information can be shown in the console.

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-23T22:36:24Z

Ainguva: /* Task 3 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses (Left: before, Right: after)

[[File:E2523-task-1-course-before.png|800px]]
[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====

Manage TA modal (Left: before, Right: after):

[[File:Manage-ta-before.png|800px]]
[[File:E2523-task-2-after.png|800px]]

Add TA modal:

[[File:E2523-task-2-manage-ta-add-before.png|800px]]
[[File:E2523-Manage-ta-add-after.png|800px]]

Code Snippet:

==== Task 3 ====
Before:

Submissions Table (Left: before, Right: after)

[[File:E2523-Submission-before.png|800px]]
[[File:Task3subafter.png|800px]]

Submissions History Table (Left: before, Right: after)

[[File:E2523-Submission-history-before.png|800px]]
[[File:Task3subhistafter.png|800px]]

Navbar (Left: before, Right: after)

[[File:E2523-Navbar-before.png|500px]]
[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

== Pull Request ==

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Drag-and-Drop Reordering: Enable users to reorder table rows (e.g., TA list or reviewers) for a more interactive experience.

* Inline Editing: Add inline editing capabilities for certain fields like names or roles without opening modals.

* Enhanced Alerts and Notifications: Use toast notifications or alert banners with auto-dismiss and action buttons for better UX.

* Dark Mode Support: Introduce a toggle to switch between light and dark themes for user comfort.

* Should add Maya's point

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-23T22:35:45Z

Ainguva: /* Task 3 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses (Left: before, Right: after)

[[File:E2523-task-1-course-before.png|800px]]
[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====

Manage TA modal (Left: before, Right: after):

[[File:Manage-ta-before.png|800px]]
[[File:E2523-task-2-after.png|800px]]

Add TA modal:

[[File:E2523-task-2-manage-ta-add-before.png|800px]]
[[File:E2523-Manage-ta-add-after.png|800px]]

Code Snippet:

==== Task 3 ====
Before:

Submissions Table (Left: before, Right: after)

[[File:E2523-Submission-before.png|800px]]
[[File:Task3subafter.png|800px]]

Submissions History Table (Left: before, Right: after)

[[File:E2523-Submission-history-before.png|800px]]
[[File:Task3subhistafter.png|800px]]

Navbar (Left: before, Right: after)

[[File:Task3navbarafter.png|1000px]]
[[File:E2523-Navbar-before.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

== Pull Request ==

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Drag-and-Drop Reordering: Enable users to reorder table rows (e.g., TA list or reviewers) for a more interactive experience.

* Inline Editing: Add inline editing capabilities for certain fields like names or roles without opening modals.

* Enhanced Alerts and Notifications: Use toast notifications or alert banners with auto-dismiss and action buttons for better UX.

* Dark Mode Support: Introduce a toggle to switch between light and dark themes for user comfort.

* Should add Maya's point

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-23T22:35:14Z

Ainguva: /* Task 3 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====

Manage Courses (Left: before, Right: after)

[[File:E2523-task-1-course-before.png|800px]]
[[File:E2523-task-1-courses-after.png|800px]]

No pagination if there is only one page:

[[File:E2523-task-1-courses-after-no-pagination.png|800px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====

Manage TA modal (Left: before, Right: after):

[[File:Manage-ta-before.png|800px]]
[[File:E2523-task-2-after.png|800px]]

Add TA modal:

[[File:E2523-task-2-manage-ta-add-before.png|800px]]
[[File:E2523-Manage-ta-add-after.png|800px]]

Code Snippet:

==== Task 3 ====
Before:

Submissions Table (Left: before, Right: after)

[[File:E2523-Submission-before.png|800px]]
[[File:Task3subafter.png|800px]]

Submissions History Table (Left: before, Right: after)

[[File:E2523-Submission-history-before.png|800px]]
[[File:Task3subhistafter.png|800px]]

Navbar (Left: before, Right: after)

[[File:Task3navbarafter.png|400px]]
[[File:E2523-Navbar-before.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

== Pull Request ==

== Conclusion ==
The enhancements implemented in this project have greatly improved the UI consistency, usability, and maintainability of the Expertiza platform. By reworking outdated components and aligning them with modern design guidelines, we ensured a cleaner, more user-friendly experience across different user roles.
The following pull requests were central to our reimplementation work:
* https://github.com/expertiza/reimplementation-front-end/pull/70
* https://github.com/expertiza/reimplementation-front-end/pull/72
* https://github.com/expertiza/reimplementation-front-end/pull/57
These PRs focused on restructuring table components, refining modal behavior, updating icons, enhancing accessibility, and ensuring overall alignment with the Expertiza design system. We successfully completed all assigned features and UI refinements while strictly adhering to the Expertiza design guidlines provided. This included updates to typography, spacing, component styling, and standardized interactions across the application.

== Future Scope ==
* Drag-and-Drop Reordering: Enable users to reorder table rows (e.g., TA list or reviewers) for a more interactive experience.

* Inline Editing: Add inline editing capabilities for certain fields like names or roles without opening modals.

* Enhanced Alerts and Notifications: Use toast notifications or alert banners with auto-dismiss and action buttons for better UX.

* Dark Mode Support: Introduce a toggle to switch between light and dark themes for user comfort.

* Should add Maya's point

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-23T20:08:16Z

Ainguva: /* Task 1 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====
Before:

[[File:E2523-task-1-course-before.png|1000px]]

After:

[[File:E2523-task-1-courses-after.png|1000px]]

No pagination if there is only one page

[[File:E2523-task-1-courses-after-no-pagination.png|1000px]]

Code snippet:

Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====
Before:

After:

Code Snippet:

==== Task 3 ====
Before:

After:

Submissions Table:

[[File:Task3subafter.png|1000px]]

Submissions History Table:

[[File:Task3subhistafter.png|1000px]]

Navbar:

[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

== Pull Request ==

== Conclusion ==

== Future Scope ==
* Drag-and-Drop Reordering: Enable users to reorder table rows (e.g., TA list or reviewers) for a more interactive experience.

* Inline Editing: Add inline editing capabilities for certain fields like names or roles without opening modals.

* Enhanced Alerts and Notifications: Use toast notifications or alert banners with auto-dismiss and action buttons for better UX.

* Dark Mode Support: Introduce a toggle to switch between light and dark themes for user comfort.

* Should add Maya's point

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-23T20:06:05Z

Ainguva: /* Task 1 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====
Before:

[[File:E2523-task-1-course-before.png|1000px]]

After:

[[File:E2523-task-1-courses-after.png|1000px]]

No pagination if there is only one page

[[File:E2523-task-1-courses-after-no-pagination.png|1000px]]

Code snippet:
Global filter span in the Table component changed:

[[File: Tablespanchange.png|500px]]

==== Task 2 ====
Before:

After:

Code Snippet:

==== Task 3 ====
Before:

After:

Submissions Table:

[[File:Task3subafter.png|1000px]]

Submissions History Table:

[[File:Task3subhistafter.png|1000px]]

Navbar:

[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

== Pull Request ==

== Conclusion ==

== Future Scope ==
* Drag-and-Drop Reordering: Enable users to reorder table rows (e.g., TA list or reviewers) for a more interactive experience.

* Inline Editing: Add inline editing capabilities for certain fields like names or roles without opening modals.

* Enhanced Alerts and Notifications: Use toast notifications or alert banners with auto-dismiss and action buttons for better UX.

* Dark Mode Support: Introduce a toggle to switch between light and dark themes for user comfort.

* Should add Maya's point

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2

2025-03-23T20:05:41Z

Ainguva: /* Task 1 */

== 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 provides the tools necessary for an instructor to manage courses and assignments, for which students can be assigned to teams and submit assignments. After submission, peer assessment allows for students to give feedback to each other, facilitating critical thinking and learning. Both the frontend and backend of Expertiza are currently going through reimplementations. In particular, the frontend is being developed in Typescript.

== Problem Statement ==
Expertiza is an open-source project, so many developers contribute to the project, and often with differing design choices. This UI project aims to provide more consistency between different pages and tools. In particular, the focus is on the Submissions and Courses pages, and subsequent pages/modals. The changes should reduce visual clutter and provide consistency between UI, making the interface much easier to use.

== Functional Requirements ==

==== Overall Requirements ====

====== Merging Past Pull Requests ======
The UI changes that were changed in this project are done on top of three pull requests of the frontend reimplementation project, and thus, the tasks of this project were separated in accordance to these pull requests. These pull requests were [https://github.com/expertiza/reimplementation-front-end/pull/70| UI for Courses], [https://github.com/expertiza/reimplementation-front-end/pull/72| Reimplement add TA], and [https://github.com/expertiza/reimplementation-front-end/pull/57| UI for View Submissions].

====== UI Design Guidelines ======
This project follows design guidelines shown in this document. All tables need to use the prebuilt Table component. This Table component uses a Pagination component, which allows users to select different pages of a table. However, this Pagination component should only be visible if there are more than one page. Another important guideline is the text formatting. Headings should follow camel case capitalization, while other text should capitalize only the first letter of the first word. Most changes done in this project are made to adhere to this guideline. Finally, the icons, buttons, and notifications all needed to follow particular styles provided in the design document.

====== Non-task Specific Requirements ======
There are some requirements that are applied to components used by all three tasks.
* Pagination should only be visible if there is more than one page of entries.
* The Table component needs to include a “disableGlobalFilter” option

==== Task 1 Requirements ====
Task 1 deals with the UI changes needed for UI for Courses. All of these changes are done to the Courses page.
* The page’s header needs to be updated to follow text formatting guidelines.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The date format used for the “Creation date” and “Updated date” should show the user’s local time and should not show seconds and milliseconds.
* The button for creating a course should be red, and contain the text “Create Course”.
* Confirmation buttons should be red.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.
* Note: Manage TAs is part of task 2

==== Task 2 Requirements ====
Task 2 deals with the UI changes needed for Reimplement add TA. All of these changes are done to the Manage TAs modal of the Courses page.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* The button for adding a TA should be updated.
* Confirmation buttons should be red.
* Error notification should use the Alert component.
* Text labels should follow non-header capitalization guidelines.
* Subsequent modals should also follow the same guidelines.

==== Task 3 Requirements ====
Task 3 deals with the UI changes needed for UI for View Submissions.
* The table headers should follow non-header capitalization guidelines.
* The table should not use either the global or column filters.
* Text labels should follow non-header capitalization guidelines.
* Submission History should also follow the same guidelines

== Technologies ==

Frontend: React, TypeScript

State Management: React Hooks (useState, useEffect, useMemo, useCallback), React Context API, Redux Toolkit (with useDispatch, useSelector)

Styling and UI: CSS Modules / SCSS, Bootstrap / React Bootstrap

== Technical Design ==

====1. Frontend ====
The application is developed using React with TypeScript, enforcing a strongly-typed, modular, and scalable architecture. The combination of TypeScript and React provides compile-time type checking and improved developer tooling such as autocompletion, interfaces, and error detection. This makes the codebase more maintainable and less prone to runtime errors.

======Main Table Component: ======
* Serves as the central layout element for multiple modules like reviewer assignments, Teaching Assistant (TA) lists, and user management.
* Dynamically renders rows and columns based on props and external data.
* Incorporates reusable logic like sorting, filtering, pagination, and responsive design.

=====Row Components:=====
* Represent individual units of data such as one TA entry or one review entry.
* Contain contextual actions like Delete, Edit, Confirm, Submit.
* Includes modal triggers or dynamic tooltips.

=====Helper Components:=====
* Used for encapsulating business logic or UI elements such as tooltips, alert banners, loaders, and tag renderers.
* Commonly uses components like dropdown selectors, role toggles, and conditional status displays.

=====Modal Components:=====
* Used for confirming actions like deletion, submission, or role changes.
* Tied closely to global state (e.g., Redux or Context) to remain consistent across modules.

====2. State Management====
State management in this application is handled using a layered strategy, combining React Hooks, Context API, Redux Toolkit, and a custom API integration hook. This ensures a clean separation of concerns, scalable logic handling, and seamless component communication across the app.

* React Hooks: useState, useEffect, useMemo, useCallback - For managing and optimizing local component state.

* React Context API: Centralized state sharing for cross-component communication (used for shared data like authentication and user role).

* REdux Toolkit(with React-Redux): Handles global state logic such as authentication, alert messages and persistent settings.

* API Integration: Custom useAPI hook manages asynchronous API requests, error handling and response processing. All backend communication is abstracted here for clean separation of concerns.

==== 3. Styling and UI ====
* SCSS / CSS Modules: Used for modular and scoped styling which promotes maintainable and reusable style definitions.

* Bootstrap / React-Bootstrap: Provides consistent components like Button, Row, Col, and Modal aligned with Expertiza’s design system

* CSS-inJS: Not used directly but alternatives like inline styles and component based styling via props are utilized in some components.

* Custom Styles: Additional custom classes are used for tooltips, warning messages from controls and icon replacements to match the UI guidelines.

== Design Principles ==
 Consistency: Ensures a uniform experience by maintaining consistent typography, color schemes, iconography, spacing, and component behavior across all views and tables.

 Readability: Enhances user comprehension through a clean, structured layout, appropriate font sizes, adequate white space, and proper alignment of content.

 Simplicity: Reduces cognitive load by eliminating non-essential elements, minimizing the number of visible actions, and focusing user attention on primary content and controls.

 Reusability: Promotes the reuse of modular table components and UI elements (like buttons, badges, or input fields) to reduce duplication and ensure uniform behavior throughout the application.

 Scalability: UI components are built in a modular and extensible way, allowing easy integration of additional features without breaking the existing design.

 Feedback & Visibility: Provides immediate feedback through hover states, alerts, and visual cues for actions like submission, deletion, or errors.

== Implementation Details ==

==== Task 1 ====
Before:

[[File:E2523-task-1-course-before.png|1000px]]

After:

[[File:E2523-task-1-courses-after.png|1000px]]

No pagination if there is only one page

[[File:E2523-task-1-courses-after-no-pagination.png|1000px]]

Code snippet:
Global filter span in the Table component changed:
[[File: Tablespanchange.png|1000px]]

==== Task 2 ====
Before:

After:

Code Snippet:

==== Task 3 ====
Before:

After:

Submissions Table:

[[File:Task3subafter.png|1000px]]

Submissions History Table:

[[File:Task3subhistafter.png|1000px]]

Navbar:

[[File:Task3navbarafter.png|200px]]

Code Snippet:

New Table:

[[File:Task3-Code-Table.png|1000px]]

New Navbar:

[[File:Codenavbar.png|400px]]

== Demo Video ==

== List of Changes ==

== Pull Request ==

== Conclusion ==

== Future Scope ==
* Drag-and-Drop Reordering: Enable users to reorder table rows (e.g., TA list or reviewers) for a more interactive experience.

* Inline Editing: Add inline editing capabilities for certain fields like names or roles without opening modals.

* Enhanced Alerts and Notifications: Use toast notifications or alert banners with auto-dismiss and action buttons for better UX.

* Dark Mode Support: Introduce a toggle to switch between light and dark themes for user comfort.

* Should add Maya's point

== Project Mentor ==
* Anvitha Reddy Gutha <agutha@ncsu.edu>

== Team Members ==
* Aryan Inguva <ainguva@ncsu.edu>
* Maya Mei <gmei@ncsu.edu>
* Shuba Shwetha Kalyanasundaram <skalyan3@ncsu.edu>

File:Tablespanchange.png

2025-03-23T20:04:24Z

Ainguva: