Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2024 - E2435 Implement Frontend for the My Profile

2024-04-24T02:20:18Z

Skshett2: /* Contributors to this project */

== Expertiza ==

Expertiza stands as a versatile open-source web application constructed on the robust Ruby on Rails framework. Its primary function revolves around empowering instructors to craft tailored assignments, complete with curated topic lists, providing students with ample options for selection. Moreover, the platform extends its capabilities to facilitate seamless team formation, enabling students to collaborate efficiently on assignments and larger-scale projects.

One of Expertiza's standout features lies in its support for peer review processes, a crucial aspect of modern education. Through this functionality, students can engage in constructive feedback exchanges, offering evaluations and critiques on their peers' submissions. What sets Expertiza apart is its flexibility in accommodating various document formats, including URLs and wiki pages, ensuring comprehensive assessment avenues.

In essence, Expertiza represents more than just a mere educational tool; it embodies a comprehensive solution for managing assignments, fostering teamwork, and facilitating peer evaluations. Its open-source nature further enhances accessibility, making it freely available to educational institutions and individuals alike, thereby democratizing access to quality education tools.

== Overview ==

The My Profile page in Expertiza currently implemented in Ruby needs to be reimplemented using React and TypeScript to enhance user experience and maintainability. The reimplementation aims to maintain feature parity while improving intuitiveness and usability.

== Exisiting My Profile Page ==
[[File:Profile frontend.png | 1000px| center]]
Existing My Profile page within expertiza

== Flow Diagram ==

The actor can interact with the 'My Profile Page' by viewing the current information about the user and can also edit/update the information present on it. The Flow diagram below represents the interaction between the user (Actor) and the model, controllers and the database.
[[File:Sequence.drawio.png | 1000px| center]]
Flow Diagram

== Reimplementation Details ==

=== Technologies ===
*React: Front-end library for building user interfaces.
*TypeScript: Adds static typing to JavaScript, enhancing code quality and maintainability.

=== Reimplementation in React and TypeScript ===
*Rewrite the Profile Controller logic in React components.
*Convert form submissions and updates to asynchronous requests using React hooks or class-based components.

=== Anonymized View ===
*Ensure the option for anonymized view is preserved in the new implementation.
*Create a toggle or checkbox to switch between anonymized and standard views.

=== Timezones ===
* '''Description:''' Users will have the ability to set their preferred timezone, ensuring that timestamps and deadlines are displayed accurately according to their local time.
* '''Details'''
**Users can select their timezone from a dropdown menu or similar interface, choosing from a list of supported timezones.
**The selected timezone will be used to convert timestamps and deadlines to the user's local time, providing a more accurate representation of time-sensitive information.
**This feature improves usability and reduces confusion by presenting time-related information in a format that is familiar and relevant to the user.

=== Email Options ===
* '''Description:''' Users can customize their email notification preferences for various events such as work reviews, submissions, and meta-reviews.
* '''Details'''
**Checkboxes or similar controls will allow users to opt-in or opt-out of email notifications for specific events.
**Users can select the types of notifications they wish to receive, tailoring their email preferences to suit their needs and preferences.
**This feature provides users with greater control over their communication preferences, reducing unnecessary email notifications and improving overall user satisfaction.

=== User Interface Enhancement ===

* '''Description:''' The user interface (UI) will undergo a redesign to make it more intuitive and visually appealing. The goal is to create a modern look and feel that aligns with current design trends while ensuring consistency with the existing Expertiza interface.The UI design will be homogeneous to the current reimplementation of Expertiza to maintain consistency across the platform. It will feature a clean and intuitive layout with clear navigation and easily identifiable controls.
* '''Details:'''
**The redesign will focus on improving the layout, typography, color scheme, and overall aesthetic appeal of the user profile page.
**Elements such as buttons, forms, and navigation will be redesigned to provide a more seamless and enjoyable user experience.
**Homogeneity with the current reimplementation of Expertiza will be maintained to provide continuity and familiarity for existing users.

=== Form Handling ===
*Refactor the form handling logic to work seamlessly with React's state management system.
*Implement form validation and error handling to provide a smoother user experience.

=== Routing and Navigation ===
*Adjust routing and navigation to accommodate the new React components.
*Ensure proper redirection upon form submissions and updates.

=== Modularization and Componentization ===
*Break down complex functionalities into smaller, reusable components in React.
*Each component should have a single responsibility, making it easier to understand and maintain.
*Use clear and descriptive names for components, variables, and functions to convey their purpose effectively.

=== Consistent Coding Style ===
*Enforce a consistent coding style across the project using linters and code formatting tools.
*Follow established coding conventions and best practices to ensure readability and maintainability.
*Document code with comments and annotations to explain complex logic or implementation details.

=== Testing and Quality Assurance ===
*Conduct thorough testing of the reimplementation to ensure functionality and compatibility across browsers and devices.
*Address any bugs or issues discovered during testing before deploying the new version.

== Design Principles followed ==

=== Single Responsibility Principle (SRP) ===

*Each React component will have a single responsibility, such as displaying user information, managing language preferences, or handling email options.
*Separate concerns such as data fetching, state management, and rendering to improve modularity and maintainability.

=== Separation of Concerns (SoC) ===

*Dividing the user profile page into distinct components for different sections, such as profile information, language preferences, and email options.

=== Don't Repeat Yourself (DRY) ===

*Refactoring redundant code or logic into reusable React components, hooks, or utility functions.
*Avoiding duplicate data-fetching or state management logic across multiple components by centralizing it in shared modules.

=== Open/Closed Principle (OCP) ===

*Designing components to be open for extension by allowing for customization or configuration through props or context.
*Ensuring that components can be extended or modified without altering their core functionality by adhering to React's composition model.

==Files Added / Changed ==

=== Edit.tsx ===

The Edit component is a React functional component that manages the user profile information form. It integrates the Formik library to handle form state, validation, and submission efficiently.
The form includes various input fields such as full name, password, confirm password, email, institution, action preference, handle, preferred time zone, and preferred language. Each field is initialized with default values using the initialValues object.

To enforce validation rules, a Yup validation schema is defined. It ensures that fields like full name, password, confirm password, email, and handle are required and follow specific formats. Validation errors are displayed below each input field using the ErrorMessage component from Formik.

Additionally, the form layout and styling are improved to enhance the user experience. Labels for input fields are styled to have a bold font-weight, enhancing readability. The submit button is styled using React Bootstrap's Button component with a variant of "outline-success" for a visually appealing appearance.

A helpful note is added below the password fields, informing users that leaving the password field blank will result in no updates to the password. This ensures clarity and guides users effectively through the form.

Overall, these changes enhance the user profile page by providing a structured and visually appealing form with robust validation and error handling capabilities, resulting in an improved user experience.

[[File:Edit-1.png | 1000px| center]]

Changes in Edit.tsx

[[File:Edit-2.png | 1000px| center]]

Changes in Edit.tsx

[[File:Edit-3.png | 1000px| center]]

Changes in Edit.tsx

=== Edit.css ===

In the edit.css file, additional styles were added to further refine the appearance and layout of the user profile editing page. Specifically, adjustments were made to the .edit-form-container class to refine padding and limit the maximum width of the form container. These modifications aim to optimize the layout and improve readability.

A new class named .italics was introduced to style the italicized note below the password field. This class adjusts the font style, size, and margins to ensure the note is visually distinct and easily noticeable.

Lastly, a .custom-column-flex class was created to facilitate a flexbox layout with a column direction. This class helps align form elements vertically, ensuring consistent spacing and alignment across different screen sizes. Overall, these changes contribute to a more polished and user-friendly user profile editing experience.

[[File:Style-1.png | 1000px| center]]

Changes in Edit.css

== New My Profile Page ==

[[File:Current-my-profile-1.jpeg | 1000px| center]]
[[File:Current-my-profile-2.jpeg | 1000px| center]]
New my profile page

The My Profile page has been reimplemented using React and TypeScript to improve user experience and make it easier to maintain. The goal of the reimplementation is to keep all the existing features while making the page more intuitive and user-friendly.

== Testing ==

*'''Component Rendering:''' During our testing process, we thoroughly validated that all elements within the pages were correctly translated into React.js and Typescript components. We ensured that each component was properly implemented according to the specified requirements and guidelines.

*'''Styling Consistency:''' We rigorously checked that the new frontend design maintained uniform styling consistent with the existing application. This involved reviewing CSS files, inspecting page layouts, and verifying color schemes, fonts, and spacing to ensure visual coherence across the entire application.

*'''Functionality Testing:''' Our testing efforts focused on assessing the functionality of interactive features such as buttons and input fields to guarantee they operated as intended. We conducted comprehensive tests to validate user interactions, form submissions, and any other dynamic elements on the pages.

*'''Responsive Design Testing:''' To ensure a seamless user experience across different screen sizes and devices, we conducted thorough testing for responsiveness. This involved resizing browser windows and testing on various devices to confirm that the pages adapted appropriately to different viewport dimensions.

*'''Integration Testing:''' Integration testing was performed to test the integration of different components and modules within the pages. We verified that all components interacted correctly with each other and that data flow and state management were properly handled throughout the application.

*'''Cross-Browser Testing:''' To ensure broad compatibility, we conducted cross-browser testing to verify that the pages rendered correctly and functioned as expected across different web browsers. We tested on popular browsers such as Chrome, Firefox, Safari, and Edge to ensure a consistent experience for all users.

== Team ==
===== Mentor =====
* '''Riya Gori''' (rygori@ncsu.edu)

===== Members =====
* '''Aakarsh Satish''' (asatish2@ncsu.edu)
* '''Shubh Nisar''' (snisar@ncsu.edu)'''
* '''Sinchana Shetty''' (skshett2@ncsu.edu)'''

== Contributors to this project ==
* '''Shubh Nisar''' (unityid: snisar, github: Shubh-Nisar)
* '''Aakarsh Satish''' (unityid: asatish2, github: Aakarsh-Satish)
* '''Sinchana Shetty''' (unityid: skshett2, github: sinchanashetty11)
* '''Github repo''' https://github.com/sinchanashetty11/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/53

CSC/ECE 517 Spring 2024 - E2435 Implement Frontend for the My Profile

2024-04-24T02:19:10Z

Skshett2:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-04-24T02:18:38Z

Skshett2: /* Contributors to this project */

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Set up Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
Role-based access restrictions have been introduced to enhance security and user experience.
The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
Obsolete or redundant code segments have been removed to streamline the application.
Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[File:Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

== Testing ==

Testing was initially not considered within the project's scope, given its emphasis on frontend development. Nonetheless, verifying the functionality and user experience of a website's interface is essential. To this end, manual testing procedures will be employed to ascertain the correct operation of the UI components. These tests include:

# Verifying all the added button links to ensure they function correctly.
# Testing the navigation routes for all five components within the Administration Section on the website's navigation bar.
# Checking that the data is accurately displayed and corresponds with each specific component's page.

== Contributors to this project ==
* '''Shubh Nisar''' (unityid: snisar, github: Shubh-Nisar)
* '''Aakarsh Satish''' (unityid: asatish2, github: Aakarsh-Satish)
* '''Sinchana Shetty''' (unityid: skshett2, github: sinchanashetty11)
* '''Github repo''' https://github.com/Shubh-Nisar/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/53

CSC/ECE 517 Spring 2024 - E2435 Implement Frontend for the My Profile

2024-04-24T02:14:11Z

Skshett2:

== Expertiza ==

Expertiza stands as a versatile open-source web application constructed on the robust Ruby on Rails framework. Its primary function revolves around empowering instructors to craft tailored assignments, complete with curated topic lists, providing students with ample options for selection. Moreover, the platform extends its capabilities to facilitate seamless team formation, enabling students to collaborate efficiently on assignments and larger-scale projects.

One of Expertiza's standout features lies in its support for peer review processes, a crucial aspect of modern education. Through this functionality, students can engage in constructive feedback exchanges, offering evaluations and critiques on their peers' submissions. What sets Expertiza apart is its flexibility in accommodating various document formats, including URLs and wiki pages, ensuring comprehensive assessment avenues.

In essence, Expertiza represents more than just a mere educational tool; it embodies a comprehensive solution for managing assignments, fostering teamwork, and facilitating peer evaluations. Its open-source nature further enhances accessibility, making it freely available to educational institutions and individuals alike, thereby democratizing access to quality education tools.

== Overview ==

The My Profile page in Expertiza currently implemented in Ruby needs to be reimplemented using React and TypeScript to enhance user experience and maintainability. The reimplementation aims to maintain feature parity while improving intuitiveness and usability.

== Exisiting My Profile Page ==
[[File:Profile frontend.png | 1000px| center]]
Existing My Profile page within expertiza

== Flow Diagram ==

The actor can interact with the 'My Profile Page' by viewing the current information about the user and can also edit/update the information present on it. The Flow diagram below represents the interaction between the user (Actor) and the model, controllers and the database.
[[File:Sequence.drawio.png | 1000px| center]]
Flow Diagram

== Reimplementation Details ==

=== Technologies ===
*React: Front-end library for building user interfaces.
*TypeScript: Adds static typing to JavaScript, enhancing code quality and maintainability.

=== Reimplementation in React and TypeScript ===
*Rewrite the Profile Controller logic in React components.
*Convert form submissions and updates to asynchronous requests using React hooks or class-based components.

=== Anonymized View ===
*Ensure the option for anonymized view is preserved in the new implementation.
*Create a toggle or checkbox to switch between anonymized and standard views.

=== Timezones ===
* '''Description:''' Users will have the ability to set their preferred timezone, ensuring that timestamps and deadlines are displayed accurately according to their local time.
* '''Details'''
**Users can select their timezone from a dropdown menu or similar interface, choosing from a list of supported timezones.
**The selected timezone will be used to convert timestamps and deadlines to the user's local time, providing a more accurate representation of time-sensitive information.
**This feature improves usability and reduces confusion by presenting time-related information in a format that is familiar and relevant to the user.

=== Email Options ===
* '''Description:''' Users can customize their email notification preferences for various events such as work reviews, submissions, and meta-reviews.
* '''Details'''
**Checkboxes or similar controls will allow users to opt-in or opt-out of email notifications for specific events.
**Users can select the types of notifications they wish to receive, tailoring their email preferences to suit their needs and preferences.
**This feature provides users with greater control over their communication preferences, reducing unnecessary email notifications and improving overall user satisfaction.

=== User Interface Enhancement ===

* '''Description:''' The user interface (UI) will undergo a redesign to make it more intuitive and visually appealing. The goal is to create a modern look and feel that aligns with current design trends while ensuring consistency with the existing Expertiza interface.The UI design will be homogeneous to the current reimplementation of Expertiza to maintain consistency across the platform. It will feature a clean and intuitive layout with clear navigation and easily identifiable controls.
* '''Details:'''
**The redesign will focus on improving the layout, typography, color scheme, and overall aesthetic appeal of the user profile page.
**Elements such as buttons, forms, and navigation will be redesigned to provide a more seamless and enjoyable user experience.
**Homogeneity with the current reimplementation of Expertiza will be maintained to provide continuity and familiarity for existing users.

=== Form Handling ===
*Refactor the form handling logic to work seamlessly with React's state management system.
*Implement form validation and error handling to provide a smoother user experience.

=== Routing and Navigation ===
*Adjust routing and navigation to accommodate the new React components.
*Ensure proper redirection upon form submissions and updates.

=== Modularization and Componentization ===
*Break down complex functionalities into smaller, reusable components in React.
*Each component should have a single responsibility, making it easier to understand and maintain.
*Use clear and descriptive names for components, variables, and functions to convey their purpose effectively.

=== Consistent Coding Style ===
*Enforce a consistent coding style across the project using linters and code formatting tools.
*Follow established coding conventions and best practices to ensure readability and maintainability.
*Document code with comments and annotations to explain complex logic or implementation details.

=== Testing and Quality Assurance ===
*Conduct thorough testing of the reimplementation to ensure functionality and compatibility across browsers and devices.
*Address any bugs or issues discovered during testing before deploying the new version.

== Design Principles followed ==

=== Single Responsibility Principle (SRP) ===

*Each React component will have a single responsibility, such as displaying user information, managing language preferences, or handling email options.
*Separate concerns such as data fetching, state management, and rendering to improve modularity and maintainability.

=== Separation of Concerns (SoC) ===

*Dividing the user profile page into distinct components for different sections, such as profile information, language preferences, and email options.

=== Don't Repeat Yourself (DRY) ===

*Refactoring redundant code or logic into reusable React components, hooks, or utility functions.
*Avoiding duplicate data-fetching or state management logic across multiple components by centralizing it in shared modules.

=== Open/Closed Principle (OCP) ===

*Designing components to be open for extension by allowing for customization or configuration through props or context.
*Ensuring that components can be extended or modified without altering their core functionality by adhering to React's composition model.

==Files Added / Changed ==

=== Edit.tsx ===

The Edit component is a React functional component that manages the user profile information form. It integrates the Formik library to handle form state, validation, and submission efficiently.
The form includes various input fields such as full name, password, confirm password, email, institution, action preference, handle, preferred time zone, and preferred language. Each field is initialized with default values using the initialValues object.

To enforce validation rules, a Yup validation schema is defined. It ensures that fields like full name, password, confirm password, email, and handle are required and follow specific formats. Validation errors are displayed below each input field using the ErrorMessage component from Formik.

Additionally, the form layout and styling are improved to enhance the user experience. Labels for input fields are styled to have a bold font-weight, enhancing readability. The submit button is styled using React Bootstrap's Button component with a variant of "outline-success" for a visually appealing appearance.

A helpful note is added below the password fields, informing users that leaving the password field blank will result in no updates to the password. This ensures clarity and guides users effectively through the form.

Overall, these changes enhance the user profile page by providing a structured and visually appealing form with robust validation and error handling capabilities, resulting in an improved user experience.

[[File:Edit-1.png | 1000px| center]]
Changes in Edit.tsx

[[File:Edit-2.png | 1000px| center]]
Changes in Edit.tsx

[[File:Edit-3.png | 1000px| center]]
Changes in Edit.tsx

=== Edit.css ===

In the edit.css file, additional styles were added to further refine the appearance and layout of the user profile editing page. Specifically, adjustments were made to the .edit-form-container class to refine padding and limit the maximum width of the form container. These modifications aim to optimize the layout and improve readability.

A new class named .italics was introduced to style the italicized note below the password field. This class adjusts the font style, size, and margins to ensure the note is visually distinct and easily noticeable.

Lastly, a .custom-column-flex class was created to facilitate a flexbox layout with a column direction. This class helps align form elements vertically, ensuring consistent spacing and alignment across different screen sizes. Overall, these changes contribute to a more polished and user-friendly user profile editing experience.

[[File:Style-1.png | 1000px| center]]
Changes in Edit.css

== New My Profile Page ==

[[File:Current-my-profile-1.jpeg | 1000px| center]]
[[File:Current-my-profile-2.jpeg | 1000px| center]]
Current my profile page

The My Profile page has been reimplemented using React and TypeScript to improve user experience and make it easier to maintain. The goal of the reimplementation is to keep all the existing features while making the page more intuitive and user-friendly.

== Testing ==

*'''Component Rendering:''' During our testing process, we thoroughly validated that all elements within the pages were correctly translated into React.js and Typescript components. We ensured that each component was properly implemented according to the specified requirements and guidelines.

*'''Styling Consistency:''' We rigorously checked that the new frontend design maintained uniform styling consistent with the existing application. This involved reviewing CSS files, inspecting page layouts, and verifying color schemes, fonts, and spacing to ensure visual coherence across the entire application.

*'''Functionality Testing:''' Our testing efforts focused on assessing the functionality of interactive features such as buttons and input fields to guarantee they operated as intended. We conducted comprehensive tests to validate user interactions, form submissions, and any other dynamic elements on the pages.

*'''Responsive Design Testing:''' To ensure a seamless user experience across different screen sizes and devices, we conducted thorough testing for responsiveness. This involved resizing browser windows and testing on various devices to confirm that the pages adapted appropriately to different viewport dimensions.

*'''Integration Testing:''' Integration testing was performed to test the integration of different components and modules within the pages. We verified that all components interacted correctly with each other and that data flow and state management were properly handled throughout the application.

*'''Cross-Browser Testing:''' To ensure broad compatibility, we conducted cross-browser testing to verify that the pages rendered correctly and functioned as expected across different web browsers. We tested on popular browsers such as Chrome, Firefox, Safari, and Edge to ensure a consistent experience for all users.

== Team ==
===== Mentor =====
* '''Riya Gori''' (rygori@ncsu.edu)

===== Members =====
* '''Aakarsh Satish''' (asatish2@ncsu.edu)
* '''Shubh Nisar''' (snisar@ncsu.edu)'''
* '''Sinchana Shetty''' (skshett2@ncsu.edu)'''

CSC/ECE 517 Spring 2024 - E2435 Implement Frontend for the My Profile

2024-04-08T02:54:29Z

Skshett2: Created page with "Introduction"

Introduction

CSC/ECE 517 Spring 2024

2024-04-08T02:53:42Z

Skshett2:

* [[CSC/ECE 517 Spring 2024 - E2401 Implementing and testing import & export controllers]]
* [[CSC/ECE 517 Spring 2024 - E2405 Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Spring 2024 - E2407 Refactor review_mapping_controller.rb]]
* [[CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS]]
* [[CSC/ECE 517 Spring 2024 - E2429 Reimplement student_task list]]
* [[CSC/ECE 517 Spring 2024 - E2430 Reimplement student_task view]]
* [[CSC/ECE 517 Spring 2024 - E2410. View for Results of Bidding ]]
* [[CSC/ECE 517 Spring 2024 - E2414 Grading Audit Trail]]
* [[CSC/ECE 517 Spring 2024 - NTNX-1 : Extend NDB Operator to Support Postgres HA]]
* [[CSC/ECE 517 Spring 2024 - ‬NTNX-2‬‭ : Snapshot Functionality for provisioned databases]]
* [[CSC/ECE 517 Spring 2024 - E2411 : Fix "Back" link on “New Late Policy” page]]
* [[CSC/ECE 517 Spring 2024 - E2416. Reimplement the Question hierarchy]]
* [[CSC/ECE 517 Spring 2024 - E2420. Reimplement student_quizzes_controller]]
* [[CSC/ECE 517 Spring 2024 - E2424. Reimplement the Bookmarks Controller]]
* [[CSC/ECE 517 Spring 2024 - E2426. Create a UI for Assignment Edit page "Etc" tab in ReactJS]]
* [[CSC/ECE 517 Spring 2024 - E2417. Reimplement submitted content controller.rb]]
* [[CSC/ECE 517 Spring 2024 - E2425. Create a Courses user interface in ReactJS]]
* [[CSC/ECE 517 Spring 2024 - E2431. Reimplement grades/view_team]]
* [[CSC/ECE 517 Spring 2024 - E2404 Refactor student teams functionality]]
* [[CSC/ECE 517 Spring 2024 - E2406 Refactor review_mapping_helper.rb]]
* [[CSC/ECE 517 Spring 2024 - E2403 Mentor-Meeting Management]]
* [[CSC/ECE 517 Spring 2024 - E2421. Reimplement impersonating users (within impersonate controller.rb)]]
* [[CSC/ECE 517 Spring 2024 - E2413. Testing - Answer Tagging]]
* [[CSC/ECE 517 Spring 2024 - E2412. Testing for hamer.rb]]
* [[CSC/ECE 517 Spring 2024 - E2427. UI for questionnaire.rb]]
* [[CSC/ECE 517 Spring 2024 - E2419. Reimplement duties controller.rb and badges controller.rb]]
* [[CSC/ECE 517 Spring 2024 - E2432. UI for Participants.rb]]
* [[CSC/ECE 517 Spring 2024 - G2402 Implement REST client, REST API, and Graphql API endpoint for repositories]]
* [[CSC/ECE 517 Spring 2024 - G2400 DevOp for GitHub Miner app]]
* [[CSC/ECE 517 Spring 2024 - E2439 Testing for view_translation_substitutor.rb]]
* [[CSC/ECE 517 Spring 2024 - E2443 Reimplement grades_controller]]
* [[CSC/ECE 517 Spring 2024 - E2434 Reimplement Frontend for the Grades view]]
* [[CSC/ECE 517 Spring 2024 - E2435 Implement Frontend for the My Profile]]

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-25T02:01:47Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
Role-based access restrictions have been introduced to enhance security and user experience.
The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
Obsolete or redundant code segments have been removed to streamline the application.
Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[File:Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

== Testing ==

Testing was initially not considered within the project's scope, given its emphasis on frontend development. Nonetheless, verifying the functionality and user experience of a website's interface is essential. To this end, manual testing procedures will be employed to ascertain the correct operation of the UI components. These tests include:

# Verifying all the added button links to ensure they function correctly.
# Testing the navigation routes for all five components within the Administration Section on the website's navigation bar.
# Checking that the data is accurately displayed and corresponds with each specific component's page.

== Contributors to this project ==
* '''Shubh Nisar''' (unityid: snisar, github: Shubh-Nisar)
* '''Aakarsh Satish''' (unityid: asatish2, github: Aakarsh-Satish)
* '''Sinchana Shetty''' (unityid: skshett2, github: sinchanashetty11)
* '''Github repo''' https://github.com/Shubh-Nisar/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/40

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T20:48:27Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
Role-based access restrictions have been introduced to enhance security and user experience.
The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
Obsolete or redundant code segments have been removed to streamline the application.
Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[File:Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

== Testing ==

Testing was initially not considered within the project's scope, given its emphasis on frontend development. Nonetheless, verifying the functionality and user experience of a website's interface is essential. To this end, manual testing procedures will be employed to ascertain the correct operation of the UI components. These tests include:

# Verifying all the added button links to ensure they function correctly.
# Testing the navigation routes for all five components within the Administration Section on the website's navigation bar.
# Checking that the data is accurately displayed and corresponds with each specific component's page.

== Contributors to this project ==
* '''Shubh Nisar''' (unityid: snisar, github: Shubh-Nisar)
* '''Aakarsh Satish''' (unityid: asatish, github: Aakarsh-Satish)
* '''Sinchana Shetty''' (unityid: skshett2, github: sinchanashetty11)
* '''Github repo''' https://github.com/Shubh-Nisar/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/40

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T16:44:41Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
Role-based access restrictions have been introduced to enhance security and user experience.
The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
Obsolete or redundant code segments have been removed to streamline the application.
Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[File:Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

== Testing ==

Testing was initially not considered within the project's scope, given its emphasis on frontend development. Nonetheless, verifying the functionality and user experience of a website's interface is essential. To this end, manual testing procedures will be employed to ascertain the correct operation of the UI components. These tests include:

# Verifying all the added button links to ensure they function correctly.
# Testing the navigation routes for all five components within the Administration Section on the website's navigation bar.
# Checking that the data is accurately displayed and corresponds with each specific component's page.

== Contributors to this project ==
* '''Shubh Nisar''' (unityid: snisar, github: Shubh-Nisar)
* '''Aakarsh Satish''' (unityid: asatish, github: Aakarsh-Satish)
* '''Sinchana Shetty''' (unityid: skshett2, github: sinchanashetty11)
* '''Github repo''' https://github.com/Shubh-Nisar/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/7

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T04:23:49Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[File:Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

== Testing ==

Testing was initially not considered within the project's scope, given its emphasis on frontend development. Nonetheless, verifying the functionality and user experience of a website's interface is essential. To this end, manual testing procedures will be employed to ascertain the correct operation of the UI components. These tests include:

# Verifying all the added button links to ensure they function correctly.
# Testing the navigation routes for all five components within the Administration Section on the website's navigation bar.
# Checking that the data is accurately displayed and corresponds with each specific component's page.

== Contributors to this project ==
* '''Shubh Nisar''' (unityid: snisar, github: Shubh-Nisar)
* '''Aakarsh Satish''' (unityid: asatish, github: Aakarsh-Satish)
* '''Sinchana Shetty''' (unityid: skshett2, github: sinchanashetty11)
* '''Github repo''' https://github.com/Shubh-Nisar/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/7

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T04:16:41Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[File:Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

== Testing ==

Testing was initially not considered within the project's scope, given its emphasis on frontend development. Nonetheless, verifying the functionality and user experience of a website's interface is essential. To this end, manual testing procedures will be employed to ascertain the correct operation of the UI components. These tests include:

# Verifying all the added button links to ensure they function correctly.
# Testing the navigation routes for all five components within the Administration Section on the website's navigation bar.
# Checking that the data is accurately displayed and corresponds with each specific component's page.

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T01:51:59Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[File:Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T01:51:20Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

The files have been transitioned to TypeScript:
[[Screenshot_2024-03-23_at_9.49.58_PM.png |1000px|center]]

File:Screenshot 2024-03-23 at 9.49.58 PM.png

2024-03-24T01:51:03Z

Skshett2:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T01:46:07Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

When creating a new role, the role name must not include any numeric characters:
[[File:Screenshot_2024-03-23_at_9.08.04_PM.png |1000px|center]]

File:Screenshot 2024-03-23 at 9.08.04 PM.png

2024-03-24T01:45:44Z

Skshett2:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T01:43:42Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

A new column labeled "Parent Name" has been introduced on the Manage Role page, as illustrated in the accompanying screenshot. Additionally, the screenshot highlights the interactive feature where hovering over the 'Create Role' button, a functionality that is consistently applied to the 'Edit' and 'Delete' buttons as well. The layout of the table has been adjusted for optimal web page integration, and pagination has been implemented to enhance navigation and usability.
[[File:Screenshot_2024-03-23_at_9.05.27_PM.png |1000px|center]]

[[File:Screenshot_2024-03-23_at_9.06.05_PM.png |1000px|center]]

File:Screenshot 2024-03-23 at 9.06.05 PM.png

2024-03-24T01:43:21Z

Skshett2:

File:Screenshot 2024-03-23 at 9.05.27 PM.png

2024-03-24T01:38:51Z

Skshett2:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T01:38:20Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions: The update role option is disabled based on the role of user.
[[File:Screenshot 2024-03-23 at 9.07.25 PM.png |1000px|center]]

Added new column "parent name" in the manage role page:

File:Screenshot 2024-03-23 at 9.07.25 PM.png

2024-03-24T01:31:58Z

Skshett2:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T01:31:09Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

== UI Enhancements and Features in Screenshots ==

Role-based access restrictions:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T00:53:28Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes Made ==

1. '''Refactored the Questionnaire UI''': The existing non-TypeScript frontend of the questionnaire UI has been successfully transitioned to use TypeScript, enhancing code reliability and maintainability.

2. '''Developed with React.js''': The 'Roles' and 'Institution' user interfaces have been rebuilt using React.js, ensuring dynamic and responsive behavior. The React components created are modular, reusable, and effectively manage state.

3. '''Integrated TypeScript''': TypeScript has been implemented across the new UI components, providing better type-checking, reducing runtime errors, and facilitating easier debugging and maintenance.

4. '''Analyzed Existing Backend''': A thorough analysis and understanding of the existing Ruby on Rails backend were achieved to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements Implemented''':
- Role-based access restrictions have been introduced to enhance security and user experience.
- The user interface has been improved with intuitive navigational elements, tooltips for better guidance, enhanced table positioning, and pagination.
- New UI elements, such as a column for displaying parent names, have been added where necessary.

6. '''Code Quality and Maintenance Improvements''':
- Detailed comments and documentation have been added to the new codebase for better understandability and maintainability.
- Obsolete or redundant code segments have been removed to streamline the application.
- Validations and error-handling mechanisms have been implemented to improve the robustness of the UI.

7. '''Thorough Testing and Integration''':
- The new UI components have been thoroughly tested both individually and within the application context to ensure correct functionality across different scenarios and data sets.
- The new components have been integrated into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment Accomplished''':
- Code reviews were conducted with the development team to identify and implement potential improvements or necessary adjustments.
- The deployment of the updated application was prepared and executed, ensuring a smooth transition that did not adversely affect the existing user base.

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T00:27:40Z

Skshett2:

== Overview of Expertiza ==
Expertiza is an open-source learning management system designed with Ruby on Rails, facilitating a myriad of functionalities including the creation of assignments, tests, assignment teams, and courses. It stands out for its comprehensive peer review system, allowing thorough feedback among teams and group members. The focal point of this project is to enhance the User, Institution, and Roles frontend components. The specific challenge addressed involves refactoring the existing non-Typescript questionnaire UI to employ Typescript. Consequently, the team is tasked with developing these components' User Interface utilizing React.js and Typescript.

== Description of the Project ==

* Objective: Refactor the non-Typescript frontend questionnaire UI of Expertiza to use Typescript and develop the User Interface using React.js and Typescript.

* Key Tasks:
** Log in as a Super Admin.
** Navigate to Administrator settings to access and replicate 'Roles' and 'Institution' UIs.
** Replicate the 'Roles' and 'Institution' UIs using ReactJS, ensuring they retain full functionality within the new TypeScript and ReactJS framework.

* Development Process:
** Understand the Existing System: Analyze the current Ruby on Rails implementation of Roles and Institution UIs, including data models, controllers, and views.
** Setup Development Environment: Establish a TypeScript and ReactJS environment for developing the new UIs.
** Design Components: Create React components corresponding to UI parts, focusing on state and props management.
** Implement Components: Develop these components in TypeScript, mirroring the existing UIs' functionality.
** Integrate Components: Incorporate the new components into the main application, ensuring compatibility and functionality with the backend.
** Review and Refactor: Enhance code quality through reviews and refactoring, emphasizing readability and efficiency.

* Additional Features and Improvements:
** Implement role-based access restrictions for actions within the roles and institutions sections.
** Enhance UI with tooltips, improved table positioning, and pagination.
** Introduce a new column for displaying parent names.
** Enhance code quality by adding comments, removing obsolete code, and implementing form validations.

* Outcome: The project aims to transition the Expertiza UI components for 'Roles' and 'Institution' from Ruby on Rails to a more modern, efficient TypeScript and ReactJS-based implementation, incorporating user role restrictions and various UI improvements for a better user experience.

== Technologies Used ==

* '''React.js''': A JavaScript library for building user interfaces, particularly single-page applications. React will be used to develop dynamic and responsive UI components.

* '''TypeScript''': An open-source language that builds on JavaScript by adding static type definitions. TypeScript allows for writing clearer and more robust code, facilitating easier debugging and maintenance.

* '''Ruby on Rails''': Although the focus is on refactoring the front end, understanding the existing Ruby on Rails backend is crucial. Rails is a server-side web application framework written in Ruby, following the model-view-controller (MVC) framework.

== Changes to be Made ==

1. '''Refactoring the Questionnaire UI''': Transition the existing non-TypeScript frontend of the questionnaire UI to use TypeScript, enhancing code reliability and maintainability.

2. '''Developing with React.js''': Utilize React.js to rebuild the 'Roles' and 'Institution' user interfaces, ensuring that they are dynamic and responsive. The React components should be modular, reusable, and maintain state effectively.

3. '''Integrating TypeScript''': Implement TypeScript across the new UI components for better type-checking, reducing runtime errors and facilitating debugging and maintenance.

4. '''Understanding Existing Backend''': Gain a comprehensive understanding of the existing Ruby on Rails backend to ensure seamless integration and functionality with the new TypeScript and React.js frontend.

5. '''UI Enhancements''':
- Introduce role-based access restrictions to enhance security and user experience.
- Improve the user interface with intuitive navigational elements, tooltips for better user guidance, and enhanced table positioning and pagination for ease of use.
- Add new UI elements where necessary, such as a column for displaying parent names in relevant tables.

6. '''Code Quality and Maintenance''':
- Add detailed comments and documentation to the new codebase for better understandability and maintainability.
- Remove any obsolete or redundant code segments to streamline the application.
- Implement validations and error-handling mechanisms to improve the robustness of the UI.

7. '''Testing and Integration''':
- Thoroughly test the new UI components individually and within the context of the entire application to ensure they function correctly across different scenarios and data sets.
- Integrate the new components into the existing application infrastructure, ensuring compatibility and functional integrity.

8. '''Review and Deployment''':
- Conduct code reviews with the development team to identify any potential improvements or necessary adjustments.
- Prepare for the deployment of the updated application, ensuring that the transition is smooth and does not affect the existing user base adversely.

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T00:23:46Z

Skshett2:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T00:23:25Z

Skshett2:

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-24T00:19:08Z

Skshett2: /* Description of Project */

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-23T23:26:24Z

Skshett2: /* Overview of Expertiza */

CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS

2024-03-18T21:05:57Z

Skshett2: Created page with "== Overview of Expertiza == Expertiza is a learning management system that is developed with Ruby on Rails and is accessible as open source software. It can create assignments, tests, assignment teams, and courses, among a wide range of other features and functions. It also has a thorough system for giving other teams and groups of teammates peer reviews and feedback. The files that are largely addressed in this project are the frontend React Components of User, Institut..."

== Overview of Expertiza ==
Expertiza is a learning management system that is developed with Ruby on Rails and is accessible as open source software. It can create assignments, tests, assignment teams, and courses, among a wide range of other features and functions. It also has a thorough system for giving other teams and groups of teammates peer reviews and feedback. The files that are largely addressed in this project are the frontend React Components of User, Institution and Roles. A fully functional UI for these components will be developed using React for this project.

== Description of Project ==
This project focuses on creating User Interfaces for the 5 components of the Administration Section of the website - '''Roles, Institutions, Administrators, Super Administrators, Instructors''' pages using React JS. Previously, Ruby template parser was used for building the application. However, in the new reimplementation the backend and frontend applications have been separated and they are run independently. This allows us to have more flexibility with the technology stack. It is for this reason, the frontend application is being developed using React JS.

The components that we are responsible for are the pages for Roles, Institutions, Administrators, Super Administrators, Instructors. The previous implementation just listed out the names along with the options to show, edit or delete them. In the new implementation, we aim to beautify these pages by making use of CSS frameworks with React JS.

Following are the changes that will be done in the new implementation:

1. Render the data on the respective pages in a tabular format shown in the mock up designs.

2. Provide the buttons for creating, editing and deleting entities depending on the pages in the tables.

3. Displaying appropriate alerts after any changes are made (create/edit/delete).

4. Integrate the frontend functionalities mentioned with the backend.

CSC/ECE 517 Spring 2024

2024-03-18T21:04:23Z

Skshett2: Created page with "* CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS"

* [[CSC/ECE 517 Spring 2024 - E2428 Replicate Roles and Institution UIs ReactJS]]