Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:25:19Z

Ybhatia2: /* Part 2: Frontend Files CHanged */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files Modified ==

=== Part 1: Backend Files Changed ===

* database.yml
* routes.rb
* docker-compose.yml
* Participants Controller
* Assignments Controller

=== Part 2: Frontend Files Changed ===

* src/pages/Assignments/Assignment.tsx
* src/pages/Participants/Participants.tsx
* src/App.tsx

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==
*https://github.com/expertiza/reimplementation-front-end/pull/102
*https://github.com/expertiza/reimplementation-back-end/pull/203
*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:24:55Z

Ybhatia2: /* Relevant Links */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files Modified ==

=== Part 1: Backend Files Changed ===

* database.yml
* routes.rb
* docker-compose.yml
* Participants Controller
* Assignments Controller

=== Part 2: Frontend Files CHanged ===

* src/pages/Assignments/Assignment.tsx
* src/pages/Participants/Participants.tsx
* src/App.tsx

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==
*https://github.com/expertiza/reimplementation-front-end/pull/102
*https://github.com/expertiza/reimplementation-back-end/pull/203
*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:24:13Z

Ybhatia2: /* Relevant Links */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files Modified ==

=== Part 1: Backend Files Changed ===

* database.yml
* routes.rb
* docker-compose.yml
* Participants Controller
* Assignments Controller

=== Part 2: Frontend Files CHanged ===

* src/pages/Assignments/Assignment.tsx
* src/pages/Participants/Participants.tsx
* src/App.tsx

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==
*https://github.com/expertiza/reimplementation-front-end/pull/102
*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:24:00Z

Ybhatia2: /* Relevant Links */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files Modified ==

=== Part 1: Backend Files Changed ===

* database.yml
* routes.rb
* docker-compose.yml
* Participants Controller
* Assignments Controller

=== Part 2: Frontend Files CHanged ===

* src/pages/Assignments/Assignment.tsx
* src/pages/Participants/Participants.tsx
* src/App.tsx

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==
https://github.com/expertiza/reimplementation-front-end/pull/102
*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:17:27Z

Ybhatia2: /* UI Screenshots */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

[[File:SS-2.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:17:05Z

Ybhatia2: /* UI Screenshots */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== UI Screenshots ==
'''Dark mode screenshot of View Assignments in Courses'''
[[File:SS-2.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:16:54Z

Ybhatia2: /* Part 2: Merging Assignments View UI into Courses */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-2.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== UI Screenshots ==
'''Dark mode screenshot of View Assignments in Courses'''
[[File:SS-2.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:16:29Z

Ybhatia2: /* UI Screenshots */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-2.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

[[File:SS-3.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

File:SS-3.jpg

2025-04-29T13:16:00Z

Ybhatia2:

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:15:24Z

Ybhatia2: /* UI Screenshots */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:SS-2.jpg|800px|center|Dark mode screenshot of Manage Courses page]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

File:SS-2.jpg

2025-04-29T13:14:13Z

Ybhatia2:

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-29T13:13:28Z

Ybhatia2: /* UI Screenshots */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:SS-1.jpg|800px|center|Screenshot of Manage Assignments page]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

File:SS-1.jpg

2025-04-29T13:11:01Z

Ybhatia2:

File:E2506ss1.jpg

2025-04-29T13:08:47Z

Ybhatia2:

CSC/ECE 517 Spring 2025

2025-04-09T04:26:26Z

Ybhatia2: /* Final Projects */

* [[CSC/ECE 517 Spring 2025 - E2503. Refactor the Team hierarchy]]
* [[CSC/ECE 517 Spring 2025 - E2504. Mentor-meeting management]]
* [[CSC/ECE 517 Spring 2025 - E2505. Testing Answer Tagging]]
* [[CSC/ECE 517 Spring 2025 - E2508. Reimplement bidding-algorithm web service]]
* [[CSC/ECE 517 Spring 2025 - E2509. Reimplement feedback_response_map.rb]]
* [[CSC/ECE 517 Spring 2025 - E2519. Implement view for results of bidding]]
* [[CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1]]
* [[CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews]]
* [[CSC/ECE 517 Spring 2025 - E2517. Reimplement internationalization (frontend + backend)]]
* [[CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2]]
* [[CSC/ECE 517 Spring 2025 - E2515: Reimplement student_teams_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2501: Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Spring 2025 - E2502: Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2512. Reimplement responses controller]]
* [[CSC/ECE 517 Spring 2025 - E2510. Reimplement grades_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2507. Reimplement back end for submission records]]
* [[CSC/ECE 517 Spring 2025 - E2514. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2518. Reimplement password resets (frontend + backend)]]
* [[CSC/ECE 517 Spring 2025 - E2516. Reimplement teams_users_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2511. Reimplement participants_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2521. UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Spring 2025 - E2513. Reimplement sign_up_topic.rb as project_topic.rb]]
* [[CSC/ECE 517 Spring 2025 - E2506. Implement testing for new Bookmarks Controller]]

== Final Projects ==
* [[CSC/ECE 517 Spring 2025 - E2509 Refactoring and Enhancing the Feedback Response Map Controller]]
* [[CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Spring 2025 - E2524 Reimplement student review controller]]
* [[CSC/ECE 517 Spring 2025 - E2525 Reimplement review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2526 Reimplement Teams and Participant hierarchies]]
* [[CSC/ECE 517 Spring 2025 - E2530 Reimplement Grades Controller (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza]]
* [[CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers]]
* [[CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend]]
* [[CSC/ECE 517 Spring 2025 - E2532. Reimplement Missing ResponseMap Subclasses]]
* [[CSC/ECE 517 Spring 2025 - E2542. Refactor review_bids_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2533. Reimplement the Team hierarchy]]
* [[CSC/ECE 517 Spring 2025 - E2531 Refactor participants_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2528 Testing for Survey Deployment]]
* [[CSC/ECE 517 Spring 2025 - E2514. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2516. Reimplement teams_users_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2535 Reimplement User Profile Management (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2536. Improve assessment360 controller]]
* [[CSC/ECE 517 Spring 2025 - E2527. Mentor-meeting management: assignments with topics]]
* [[CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses]]
* [[CSC/ECE 517 Spring 2025 - E2529. Testing for the Questionnaire Helper in Expertiza]]
* [[CSC/ECE 517 Spring 2025 - E2500. Refactor Student Teams Functionality]]

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T04:24:44Z

Ybhatia2: /* Team */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==
'''Mentor:''' Mitesh Anil Agarwal [mailto:magarwa3@ncsu.edu magarwa3@ncsu.edu]

'''Team Members:'''
* Yuvraj Singh Bhatia [mailto:ybhatia2@ncsu.edu ybhatia2@ncsu.edu]
* Sanjana Dalal [mailto:sdalal2@ncsu.edu sdalal2@ncsu.edu]

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025

2025-04-09T04:22:33Z

Ybhatia2: /* Final Projects */

* [[CSC/ECE 517 Spring 2025 - E2503. Refactor the Team hierarchy]]
* [[CSC/ECE 517 Spring 2025 - E2504. Mentor-meeting management]]
* [[CSC/ECE 517 Spring 2025 - E2505. Testing Answer Tagging]]
* [[CSC/ECE 517 Spring 2025 - E2508. Reimplement bidding-algorithm web service]]
* [[CSC/ECE 517 Spring 2025 - E2509. Reimplement feedback_response_map.rb]]
* [[CSC/ECE 517 Spring 2025 - E2519. Implement view for results of bidding]]
* [[CSC/ECE 517 Spring 2025 - E2522. Enhancing UI Consistency in Expertiza 1]]
* [[CSC/ECE 517 Spring 2025 - E2520. Reimplement heatgrid UI for reviews]]
* [[CSC/ECE 517 Spring 2025 - E2517. Reimplement internationalization (frontend + backend)]]
* [[CSC/ECE 517 Spring 2025 - E2523: Enhancing UI Consistency in Expertiza 2]]
* [[CSC/ECE 517 Spring 2025 - E2515: Reimplement student_teams_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2501: Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Spring 2025 - E2502: Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2512. Reimplement responses controller]]
* [[CSC/ECE 517 Spring 2025 - E2510. Reimplement grades_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2507. Reimplement back end for submission records]]
* [[CSC/ECE 517 Spring 2025 - E2514. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2518. Reimplement password resets (frontend + backend)]]
* [[CSC/ECE 517 Spring 2025 - E2516. Reimplement teams_users_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2511. Reimplement participants_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2521. UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Spring 2025 - E2513. Reimplement sign_up_topic.rb as project_topic.rb]]
* [[CSC/ECE 517 Spring 2025 - E2506. Implement testing for new Bookmarks Controller]]

== Final Projects ==
* [[CSC/ECE 517 Spring 2025 - E2509 Refactoring and Enhancing the Feedback Response Map Controller]]
* [[CSC/ECE 517 Spring 2025 - E2539 Reimplement Student Task View (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2521 UI for View submissions/assign grades (except heatgrid)]]
* [[CSC/ECE 517 Spring 2025 - E2524 Reimplement student review controller]]
* [[CSC/ECE 517 Spring 2025 - E2525 Reimplement review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2526 Reimplement Teams and Participant hierarchies]]
* [[CSC/ECE 517 Spring 2025 - E2530 Reimplement Grades Controller (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2538 Reimplementing Questionnaire Page in Expertiza]]
* [[CSC/ECE 517 Spring 2025 - E2534 UI for Assign Reviewers]]
* [[CSC/ECE 517 Spring 2025 - E2540 Integration of Assignment participant Frontend with participant controller Backend]]
* [[CSC/ECE 517 Spring 2025 - E2532. Reimplement Missing ResponseMap Subclasses]]
* [[CSC/ECE 517 Spring 2025 - E2542. Refactor review_bids_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2533. Reimplement the Team hierarchy]]
* [[CSC/ECE 517 Spring 2025 - E2531 Refactor participants_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2528 Testing for Survey Deployment]]
* [[CSC/ECE 517 Spring 2025 - E2514. Reimplement student_quizzes_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2516. Reimplement teams_users_controller.rb]]
* [[CSC/ECE 517 Spring 2025 - E2535 Reimplement User Profile Management (Frontend + Backend)]]
* [[CSC/ECE 517 Spring 2025 - E2536. Improve assessment360 controller]]
* [[CSC/ECE 517 Spring 2025 - E2527. Mentor-meeting management: assignments with topics]]
* [[CSC/ECE 517 Spring 2025 - E2529. Testing for the Questionnaire Helper in Expertiza]]
* [[CSC/ECE 517 Spring 2025 - E2500. Refactor Student Teams Functionality]]
* [[CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses]]

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:49:52Z

Ybhatia2: /* Manual Tests */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:49:01Z

Ybhatia2: /* Backend Implementation */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:46:37Z

Ybhatia2: /* Design Goals */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:27:35Z

Ybhatia2: /* Design Goals */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control. Admins and Instructors have full CRUD permissions on courses, while TAs are limited to read and update access only. This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
* Single Responsibility Principle (SRP)
* Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:25:11Z

Ybhatia2: /* Design Goals */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
**Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:23:57Z

Ybhatia2: /* 3.1 Objectives */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:20:40Z

Ybhatia2: /* 9. Relevant Links */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:20:35Z

Ybhatia2: /* 8. Team */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:20:29Z

Ybhatia2: /* 7. Test Plan */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

==Test Plan ==

=== Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:20:16Z

Ybhatia2: /* 6. Files That May Be Modified */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:20:05Z

Ybhatia2: /* 5. Implementation Plan */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:19:49Z

Ybhatia2: /* 4. Design Goals */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:19:42Z

Ybhatia2: /* 3. Purpose and Scope */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:19:34Z

Ybhatia2: /* 2. Problem Statement */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:19:24Z

Ybhatia2: /* 1.Background */

== Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:18:39Z

Ybhatia2: /* 8. Relevant Links */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 9. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:18:31Z

Ybhatia2: /* 7. Team */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 8. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:18:24Z

Ybhatia2: /* 6. Test Plan */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 7. Test Plan ==

=== 7.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 7.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:18:11Z

Ybhatia2: /* 5. Files That May Be Modified */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 6. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:18:01Z

Ybhatia2: /* 4. Implementation Plan */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 5. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 5.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 5.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:17:40Z

Ybhatia2: /* 3. Purpose and Scope */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Design Goals ==

The design goals for this project focus on improving system integrity, performance, maintainability, and clarity in handling course-related operations.

* '''Role-Based CRUD Operations:'''
Implement precise role-based access control:
** Admins and Instructors have full CRUD permissions on courses
** TAs are limited to read and update access only
This ensures data integrity and system security by restricting access based on user roles.

* '''Efficient Data Handling:'''
CRUD operations are optimized for handling large datasets, using efficient database queries and pagination where necessary. This ensures that courses and assignments load quickly and scale well with increasing data size.

* '''Error Handling and Validation:'''
All inputs are validated on both frontend and backend. The backend returns standardized error responses with helpful messages, ensuring robustness and better feedback during failures or invalid operations.

* '''API Documentation and Testing:'''
RSwag is used to generate interactive Swagger API documentation for all CRUD endpoints. This improves testing, encourages adoption, and simplifies integration for future developers.

* '''Modular and Scalable Architecture:'''
The backend follows modular design principles such as:
** Single Responsibility Principle (SRP)
** Don’t Repeat Yourself (DRY)
Code is organized into manageable units like service objects, controllers, and serializers, making the application easy to maintain and extend.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:06:28Z

Ybhatia2: /* UI Screenshots */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:06:14Z

Ybhatia2: /* UI Screenshot */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshots ===

[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]
''Dark mode screenshot of View Assignments in Courses''

[[File:newiamge.png|700px|center|alt=Light mode screenshot of View Assignments in Courses]]
''Light mode screenshot of View Assignments in Courses''

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:04:27Z

Ybhatia2: /* UI Screenshot */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshot ===
[[File:Frontend.png|700px|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|alt=Dark mode screenshot of View Assignments in Courses]]

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:03:57Z

Ybhatia2: /* UI Screenshot */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshot ===
[[File:Frontend.png|700px|alt=Dark mode screenshot of View Assignments in Courses]]

[[File:newiamge.png|700px|alt=Dark mode screenshot of View Assignments in Courses]]

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T03:02:19Z

Ybhatia2: /* UI Screenshot */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshot ===
[[File:Frontend.png|700px|alt=Dark mode screenshot of View Assignments in Courses]]

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

File:Newiamge.png

2025-04-09T02:55:05Z

Ybhatia2:

File:Backend.png

2025-04-09T02:48:40Z

Ybhatia2: Ybhatia2 uploaded a new version of File:Backend.png

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T02:47:55Z

Ybhatia2: /* 4.1 Frontend Implementation */

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== UI Screenshot ===
[[File:Frontend.png|700px|center|alt=Dark mode screenshot of View Assignments in Courses]]

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end

File:Frontend.png

2025-04-09T02:45:31Z

Ybhatia2:

CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

2025-04-09T02:45:06Z

Ybhatia2: CSC/ECE 517 Spring 2025 - E2506. Merging UI for View Assignments in Courses

== 1.Background ==

Expertiza is software that uses Ruby on Rails to manage a website for managing assignments, teams, submissions, and reviews. This web application is managed by students and faculty at NC State, offering instructors full control over class assignments. Expertiza supports a variety of functions, including topic creation, group assignments, and peer review, making it a robust tool for handling diverse types of assignments. For a complete overview of Expertiza's capabilities, visit the Expertiza wiki.

== 2. Problem Statement ==
The current course management interface in Expertiza lacks seamless integration between its frontend and backend components. While a new React-based UI and backend implementation have been proposed via pull requests, it is essential to ensure that they function cohesively and reliably when connected. Additionally, there exists a standalone UI for viewing assignments under courses, which is not yet integrated into the main course management interface.

This project addresses two key issues:
* '''Integration Validation:''' Verifying that the frontend and backend communicate correctly, and that all course-related operations work as expected with proper role-based access control.
* '''UI Merging:''' Integrating the “View Assignments in Courses” page into the existing React course management UI to provide a unified and intuitive experience for users.

By resolving these issues, the project aims to improve system usability, reduce UI fragmentation, and ensure robust backend interaction through proper testing and integration.

== 3. Purpose and Scope ==
This project is designed to enhance the reliability, usability, and maintainability of the course management interface in Expertiza by addressing integration inconsistencies and UI separation. The scope is limited to validating and merging the frontend-backend integration for course-related views and actions.

=== 3.1 Objectives ===
* '''Validate Integration:''' Ensure the frontend and backend components in the pull request work correctly, including API communications, role-based access, and state updates.
* '''UI Consolidation:''' Merge the separate “View Assignments in Courses” UI into the main course management React interface.
* '''Codebase Cleanup:''' Remove redundant or standalone implementations once merged to avoid duplication.
* '''Maintain Compatibility:''' Ensure that permissions, routing, and rendering work consistently across all merged components.
* '''Improve UX:''' Provide a cohesive user experience by unifying related course features into a single interface.

== 4. Implementation Plan ==
This project is structured into two main parts. As implementation has not yet started, the following outlines our proposed approach to accomplish both tasks.

=== 4.1 Frontend Implementation ===
Set up the reimplementation frontend locally from the repository.

* Test the existing course UI to ensure data is rendered from the backend
* Verify table functionalities like sorting, filtering, pagination, and responsiveness
* Integrate the “View Assignments in Courses” UI into the course view
* Add toggle button or collapsible UI element to show/hide assignments
* Implement dark/light mode toggle using React state and conditional TailwindCSS classes
* Ensure proper UI formatting for assignment rows, including icons and action handlers
* Test user interactions and error/success messages

=== 4.2 Backend Implementation ===
Set up the reimplementation backend API locally and link it with the frontend.

* Validate all course-related API endpoints (GET, POST, PUT, DELETE)
* Ensure assignments returned by the backend are filtered by course ID
* Monitor backend logs for errors and fix request/response mismatches
* Confirm compatibility of existing assignment APIs with frontend integration
* Refactor or adjust backend routes to support course-assignment mapping

== 5. Files That May Be Modified ==

=== Part 1: Verifying Course Management Frontend-Backend Integration ===
These files relate to the Course management UI and API interaction layer. They may be reviewed, debugged, or enhanced to ensure API integration works correctly.

* src/components/Form/FormSelect.tsx
* src/components/Form/interfaces.ts
* src/components/Table/GlobalFilter.tsx
* src/components/Table/Table.tsx
* src/pages/Courses/Course.tsx
* src/pages/Courses/CourseColumns.tsx
* src/pages/Courses/CourseCopy.tsx
* src/pages/Courses/CourseDelete.tsx
* src/pages/Courses/CourseEditor.tsx
* src/pages/Courses/CourseUtil.ts
* src/utils/interfaces.ts

=== Part 2: Merging Assignments View UI into Courses ===
These files are specific to displaying the list of assignments beneath each course in a collapsible extension, as shown in PR #76:

* src/pages/Assignments/Assignment.tsx
* src/pages/Courses/Course.tsx (Updated to render assignment extensions)
* src/pages/Courses/CourseAssignments.tsx
* src/pages/Courses/CourseAssignments.test.tsx
* src/pages/ViewTeamGrades/grades.scss (Styling for grades UI, potentially reused)

These files may require changes to merge both UIs and introduce features such as assignment expansion, reusable tables, and future dark mode toggle.

== 6. Test Plan ==

=== 6.1 Manual Tests ===
This project will include manual testing to ensure both frontend-backend integration and UI correctness after merging the "View Assignments in Courses" feature into the course management UI.

'''Frontend/Backend Integration Tests'''
* Ensure the Courses table loads all available course records using backend data.
* Verify that assignment lists expand correctly under each course.
* Validate that create, edit, delete, and copy operations on courses function correctly and reflect real-time updates.
* Confirm that assignment data is fetched and rendered within the appropriate course context.
* Simulate API failure or incorrect responses and verify appropriate error messages are displayed.

'''UI Tests'''
* Confirm that the correct action icons are used for editing, deleting, and copying courses and assignments.
* Ensure the assignment table layout matches the rest of the application in font size, spacing, and alignment.
* Validate that assignment rows expand/collapse smoothly beneath their corresponding courses.
* Check pagination behavior (if implemented) and confirm usability across all screen sizes (desktop and mobile).
* Test dark/light mode toggle (if implemented) to ensure it switches the UI theme without breaking layout or styles.

=== 6.2 Automated Tests ===
* '''Frontend:''' We will include unit tests using `CourseAssignments.test.tsx` to validate the rendering and behavior of the assignments table.
* '''Backend:''' API endpoints for courses and assignments will be validated using RSpec controller tests (to be added as implementation progresses).

== 7. Team ==

'''Mentor:''' Mitesh Anil Agarwal <magarwa3@ncsu.edu>

'''Team Members:'''
* Yuvraj Singh Bhatia <ybhatia2@ncsu.edu>
* Sanjana Dalal <sdalal2@ncsu.edu>

== 8. Relevant Links ==

*https://github.com/expertiza/reimplementation-front-end/pull/70
*https://github.com/expertiza/reimplementation-front-end/pull/76
*https://github.com/expertiza/reimplementation-front-end
*https://github.com/expertiza/reimplementation-back-end