CSC/ECE 517 Spring 2023 - E2348 Replicate Roles and Institution UIs ReactJS: Difference between revisions

From Expertiza_Wiki
Jump to navigation Jump to search
(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...")
 
 
(58 intermediate revisions by 3 users not shown)
Line 1: Line 1:
== Overview of Expertiza ==
== 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, such as <code>assignment_node.rb</code>, <code>course_node.rb</code>, <code>team_node.rb</code>, <code>folder_node.rb</code>, and <code>questionnaire_node.rb</code>, are essential in executing this functionality.
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 ==
== 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 following is an Expertiza based OSS project which deals primarily with the Node model.  
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.  


The Node Ruby class, which derives from ApplicationRecord and offers functionality for creating and modifying tree structures, is defined in the node.rb file. The class provides a number of methods, including get partial name, get name, get directory, and get child type, for collecting details about the node and its descendants. It also contains the has paper trail method for versioning relationships with parent and child nodes through belongs to and has many associations, respectively. The Node class provides a flexible framework for creating and modifying trees in Ruby applications and is designed to be subclassed for usage in tree display code.
Following are the changes that will be done in the new implementation:


The node model defines a tree structure containing Assignments, Courses_table, Questionnaire Types, Questionnaires, and Teams. The node model class is a superclass for the seven files namely <code>assignment_node.rb</code>, <code>course_node.rb</code>, <code>folder_node.rb</code>, <code>questionnaire_node.rb</code>, <code>questionnaire_type_node.rb</code>, <code>team_node.rb</code> and <code>team_user_node.rb</code>. Most of the methods written in <code>node.rb</code> are implemented by polymorphism in their respective subclass files.  
1. Render the data on the respective pages in a tabular format shown in the mock up designs.


The following changes were made:<br/>
2. Provide the buttons for creating, editing and deleting entities depending on the pages in the tables.
1. Method names were made more informative of the method wherever necessary.<br/>
2. Some common methods in the subclasses were implemented in different ways. So the methods in the subclasses were refactored so that they are uniformly implemented.<br/>
3. Appropriate comments were added to the existing code so that the functionality is easier to understand.<br/>
4. A method was created to return true/false based on courses.private.<br/>
5. Finally, tests were updated according to the changes made in the methods.<br/>


== Files Modified ==
3. Displaying appropriate alerts after any changes are made (create/edit/delete).
=== Changes to <code>app/models/assignment_node.rb</code> ===
{| class="wikitable" style="width: 100%;
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Redefined <code>self.get</code> method and added two new methods <code>self.get_assignment_query_conditions</code> and <code>self.get_assignments_managed_by_user</code>.
|The <code>self.get</code> method calls these two methods and creates the database query for getting the assignments. Creating two extra methods and calling them from <code>self.get</code> makes the code readable and uniform among all the files.
|-
|2
|<code>self.get_assignment_query_conditions</code> has all the conditions needed for the database query.
|It makes it easy to list all the query conditions at one place rather than in one method.
|-
|3
|<code>self.get_assignments_managed_by_user</code> manages all the user permissions with various conditions.
|It is better to maintain all the rights and accesses at one place rather than in the same method as <code>self.get</code>.
|-
|4
|Renamed the methods <code>get_max_team_size</code>, <code>get_is_intelligent</code>, <code>get_require_quiz</code>, <code>get_allow_suggestions</code> to <code>get_max_assignment_team_size</code>, <code>get_assignment_is_intelligent</code>, <code>get_assignment_require_quiz</code> <code>get_assignment_allow_suggestions</code>.
|Adding the word assignment to the methods name makes the methods more informative and adds meaning.
|-
|5
|Added appropriate comments for all the methods of the file.
|Understanding the need of the method: A well-written comment makes it clear about what that method is supposed to do.
Code readability: Comments help to break up large blocks of code and make it easier to understand what is happening in each section.


Maintenance and updates: When the developer re-visits the code that was written months or years ago, it can be difficult to remember how each method works.
4. Integrate the frontend functionalities mentioned with the backend.


Team Work: While working with a team, comments to methods can help other coders understand your code and can facilitate collaboration.  
== Technologies To Be Used for the Design ==
1. ReactJs.


|}
2. React-Bootstrap for styling the pages of the components mentioned.


=== Changes to <code>app/controllers/tree_display_controller.rb</code> ===
== Changes to be made ==
{| class="wikitable" style="width: 100%;
Following are the new components that we will be implementing:
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Renamed the methods that were renamed in <code>assignment_node.rb</code> above
|The methods tha renamed in <code>assignment_node.rb</code> have to be the same in controller so that when they are called, it does not give an error.


|}
=== Roles ===


=== Changes to <code>app/models/course_node.rb</code> ===
This component will be used to display all the roles that expertiza has. As of now, the roles are administrators, super administrators and instructors. We will create a new route <code>/roles</code> which will list all the roles in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be options to perform CRUD operations. For roles, we will have the options to edit and delete a particular role.  
{| class="wikitable" style="width: 100%;
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Renamed the method <code>get_survey_distribution_id</code> to <code>get_course_survey_distribution_id</code>.
|Adding the word course to the method name makes the method more informative and adds meaning to survey distribution id.
|-
|2
|Added appropriate comments for all the methods of the file.  
|Understanding the need of the method: A well-written comment makes it clear about what that method is supposed to do.
Code readability: Comments help to break up large blocks of code and make it easier to understand what is happening in each section.


Maintenance and updates: When the developer re-visits the code that was written months or years ago, it can be difficult to remember how each method works.
=== Institutions ===


Team Work: While working with a team, comments to methods can help other coders understand your code and can facilitate collaboration.
This component will be used to display all the institutions that expertiza has. We will create a new route <code>/institutions</code> in the Administrations section of the website which will list all the institutions in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the institutions.  
|-
|3
|Added a method named - course_is_private?
|Currently the courses are categorized as private or not private. In future there can be a use case where true or false needs to be returned depending on whether the course is private or not. This has been handled by the course_is_private? method which is commented now and can be uncommented when required.
|}


=== Changes to <code>app/models/folder_node.rb</code> ===
=== Administrators ===
{| class="wikitable" style="width: 100%;
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Renamed the method <code>get_child_type</code> to <code>get_folder_child_type</code>.
|Adding the word folder to the method name makes the method more informative and adds meaning to the child type of the folder.
|-
|2
|Added appropriate comments for all the methods of the file.
|Understanding the need of the method: A well-written comment makes it clear about what that method is supposed to do.
Code readability: Comments help to break up large blocks of code and make it easier to understand what is happening in each section.


Maintenance and updates: When the developer re-visits the code that was written months or years ago, it can be difficult to remember how each method works.
This component will be used to display all the Administrators that expertiza has. We will create a new route <code>/administrators</code> in the Administrations section of the website which will list all the Administrators in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Administrators.  


Team Work: While working with a team, comments to methods can help other coders understand your code and can facilitate collaboration.
=== Super Administrators ===
|}


=== Changes to <code>app/models/node.rb</code> ===
This component will be used to display all the Super Administrators that expertiza has. We will create a new route <code>/superAdministrators</code> in the Super Administrators section of the website which will list all the Super Administrators in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Super Administrators.
{| class="wikitable" style="width: 100%;
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Changed the method name from <code>get_child_type</code> to <code>get_folder_child_type</code>
|The method name was changed in the <code>folder_node.rb</code>. Since <code>node.rb</code> is its super class, the method name in it also has to be the same
|}


=== Changes to <code>app/models/questionnaire_node.rb</code> ===
=== Instructors ===
{| class="wikitable" style="width: 100%;
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Redefined <code>self.get</code> method and added two new methods <code>self.get_questionnaire_query_conditions</code> and <code>self.get_questionnaires_managed_by_user</code>.
|The <code>self.get</code> method calls these two methods and creates the database query for getting the assignments. Creating two extra methods and calling them from <code>self.get</code> makes the code readable and uniform among all the files.
|-
|2
|<code>self.get_questionnaire_query_conditions</code> has all the conditions needed for the database query.
|It makes it easy to list all the query conditions at one place rather than in one method.
|-
|3
|<code>self.get_questionnaires_managed_by_user</code> manages all the user permissions with various conditions.
|It is better to maintain all the rights and accesses at one place rather than in the same method as <code>self.get</code>.
|-
|4
|Added appropriate comments for all the methods of the file.
|Understanding the need of the method: A well-written comment makes it clear about what that method is supposed to do.
Code readability: Comments help to break up large blocks of code and make it easier to understand what is happening in each section.


Maintenance and updates: When the developer re-visits the code that was written months or years ago, it can be difficult to remember how each method works.
This component will be used to display all the Instructors that expertiza has. We will create a new route <code>/instructors</code> in the Instructors section of the website which will list all the Instructors in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Instructors.


Team Work: While working with a team, comments to methods can help other coders understand your code and can facilitate collaboration.  
== Designs ==
|}
Following designs are that of the <code>users</code> component which has already been done. This project aims to replicate these designs for the components that we will be creating as mentioned in the previous section.


=== Changes to <code>app/models/questionnaire_type_node.rb</code> ===
=== Display ===
{| class="wikitable" style="width: 100%;
The following design for users shows the tabular format in which the users are displayed. For our new components, we will be replicating this tabular format with the headers depending on the component.
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Added appropriate comments for all the methods of the file.  
|Understanding the need of the method: A well-written comment makes it clear about what that method is supposed to do.
Code readability: Comments help to break up large blocks of code and make it easier to understand what is happening in each section.


Maintenance and updates: When the developer re-visits the code that was written months or years ago, it can be difficult to remember how each method works.
[[File:project_user.png|1000px|center]]


Team Work: While working with a team, comments to methods can help other coders understand your code and can facilitate collaboration.
|}


=== Changes to <code>app/models/team_node.rb</code> ===
=== Create ===
{| class="wikitable" style="width: 100%;
The following design for users shows the modal to create a new user. For our new components, we will be replicating this modal wherever a new entity has to be created with their specific details.  
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Added appropriate comments for all the methods of the file.
|Understanding the need of the method: A well-written comment makes it clear about what that method is supposed to do.
Code readability: Comments help to break up large blocks of code and make it easier to understand what is happening in each section.


Maintenance and updates: When the developer re-visits the code that was written months or years ago, it can be difficult to remember how each method works.
[[File:create_user.png|1000px|center]]


Team Work: While working with a team, comments to methods can help other coders understand your code and can facilitate collaboration.
|}


=== Changes to <code>app/models/team_user_node.rb</code> ===
=== Delete ===
{| class="wikitable" style="width: 100%;
The following design for users shows the modal to delete a user. For our new components, we will be replicating this modal wherever an entity has to be deleted.  
! &nbsp;#&nbsp; !! Change !! Why?
|-
|1
|Added appropriate comments for all the methods of the file.
|Understanding the need of the method: A well-written comment makes it clear about what that method is supposed to do.
Code readability: Comments help to break up large blocks of code and make it easier to understand what is happening in each section.


Maintenance and updates: When the developer re-visits the code that was written months or years ago, it can be difficult to remember how each method works.
[[File:Delete_user.png|1000px|center]]


Team Work: While working with a team, comments to methods can help other coders understand your code and can facilitate collaboration.
|}


=== Changes to <code>spec/models/course_node_spec.rb</code> ===
=== Update ===
{| class="wikitable" style="width: 100%;
The following design for users shows the modal to update a user. For our new components, we will be replicating this modal wherever an entity has to be updated.  
! &nbsp;#&nbsp; !! Change !! Why?
 
|-
[[File:Update_user.jpeg|300px|center]]
|1
|Changed the method name from <code>get_survey_distribution_id</code> to <code>get_course_survey_distribution_id</code> in the test case where it is used
|Any changes made to the name of methods in the files should also be reflected in the test cases for them to pass successfully. If a method name is changed in a file and the same is not updated in the test case, the test case will fail
|}


== Testing ==
== Testing ==


''' Testing was not in the scope for this project as it did not involve creating new methods or functions. However, care was taken that the existing test cases pass after refactoring the code as mentioned in the previous sections. Screenshots for all passing test cases have been attached below '''
''' Testing was not in the scope for this project as it is frontend development. Testing the frontend of a React website involves ensuring that the user interface of the website behaves as expected and delivers a seamless user experience. Manual testing will be conducted to ensure that all the UI components work as intended, like
 
 
1. Testing all the links to the buttons added,  
=== Test Plan - Manual/System Test Cases ===
We ran a few system tests manually to make sure the functionality works as expected.
 
==== 1) Test instructor login & redirect to home page ====
Login page was displayed properly from our branch.
After logging in user is properly redirected to the home page.
[[File:login.png|center|border|500px|Page shown to the user after logging in to expertiza]]
 
==== 2) Test Course Section ====
Then, when the user clicks the course section, the course section is loaded with all the public and private courses displayed.
[[File:courses.png|1000px|center]]
 
==== 3) Test Assignment section====
Then, when the user clicks the assignment section, the assignment section is loaded with all the assignments displayed.
[[File:assignments.png|1000px|center]]
 
==== 4) Test Questionnaire section====
Then, when the user clicks the questionnaire section, the questionnaire section is loaded with all the questionnaires displayed.
[[File:questionnaires.png|1000px|center]]
 
=== Automated Testing of <code>course_node.rb</code> ===
After refactoring the code for <code>course_node.rb</code>, all the test cases passed for it.
 
[[File:course_node.png|1000px|center]]
 
=== Automated Testing of <code>questionnaire_node.rb</code> ===
After refactoring the code for <code>questionnaire_node.rb</code>, all the test cases passed for it.
 
[[File:questionnaire.png|1000px|center]]
 
=== Automated Testing of <code>team_node.rb</code> ===
After refactoring the code for <code>team_node.rb</code>, all the test cases passed for it.


[[File:team.png|1000px|center]]
2. Testing the routes for all the 5 components in the Administrations Section on the Navigation Bar of the website,


== Relevant Links ==
3. Testing the data displayed correctly corresponding to the component's page.  
* '''Github Repository:''' https://github.com/palash27/expertiza/
* '''Pull Request:''' https://github.com/expertiza/expertiza/pull/2558
* '''VCL Server:''' http://152.7.177.86:8080/
Credentials


Username: instructor6
'''A link to the video showing the working of the added components is provided to make sure that manual testing is successful.'''


Password: password
https://www.youtube.com/watch?v=nkwzycUgwqw


== Contributors to this project ==
== Contributors to this project ==
* Palash Rathod (unityid: prathod, github: palash27)
* '''Palash Rathod''' (unityid: prathod, github: palash27)
* Neha Kale (unityid: nkale2, github: nehakale8)
* '''Neha Kale''' (unityid: nkale2, github: nehakale8)
* Vansh Mehta (unityid: vpmehta2, github: vanshmehta-7)
* '''Vansh Mehta''' (unityid: vpmehta2, github: vanshmehta-7)
* '''Github repo''' https://github.com/palash27/reimplementation-front-end
* '''Link to PR''' https://github.com/expertiza/reimplementation-front-end/pull/7

Latest revision as of 01:23, 26 April 2023

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.

Technologies To Be Used for the Design

1. ReactJs.

2. React-Bootstrap for styling the pages of the components mentioned.

Changes to be made

Following are the new components that we will be implementing:

Roles

This component will be used to display all the roles that expertiza has. As of now, the roles are administrators, super administrators and instructors. We will create a new route /roles which will list all the roles in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be options to perform CRUD operations. For roles, we will have the options to edit and delete a particular role.

Institutions

This component will be used to display all the institutions that expertiza has. We will create a new route /institutions in the Administrations section of the website which will list all the institutions in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the institutions.

Administrators

This component will be used to display all the Administrators that expertiza has. We will create a new route /administrators in the Administrations section of the website which will list all the Administrators in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Administrators.

Super Administrators

This component will be used to display all the Super Administrators that expertiza has. We will create a new route /superAdministrators in the Super Administrators section of the website which will list all the Super Administrators in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Super Administrators.

Instructors

This component will be used to display all the Instructors that expertiza has. We will create a new route /instructors in the Instructors section of the website which will list all the Instructors in a tabular format as shown in the mock up designs in the next section. Along with this list, there will be buttons added in table for creating, deleting, updating, the Instructors.

Designs

Following designs are that of the users component which has already been done. This project aims to replicate these designs for the components that we will be creating as mentioned in the previous section.

Display

The following design for users shows the tabular format in which the users are displayed. For our new components, we will be replicating this tabular format with the headers depending on the component.


Create

The following design for users shows the modal to create a new user. For our new components, we will be replicating this modal wherever a new entity has to be created with their specific details.


Delete

The following design for users shows the modal to delete a user. For our new components, we will be replicating this modal wherever an entity has to be deleted.


Update

The following design for users shows the modal to update a user. For our new components, we will be replicating this modal wherever an entity has to be updated.

Testing

Testing was not in the scope for this project as it is frontend development. Testing the frontend of a React website involves ensuring that the user interface of the website behaves as expected and delivers a seamless user experience. Manual testing will be conducted to ensure that all the UI components work as intended, like

1. Testing all the links to the buttons added,

2. Testing the routes for all the 5 components in the Administrations Section on the Navigation Bar of the website,

3. Testing the data displayed correctly corresponding to the component's page.

A link to the video showing the working of the added components is provided to make sure that manual testing is successful.

https://www.youtube.com/watch?v=nkwzycUgwqw

Contributors to this project

Retrieved from "https://wiki.expertiza.ncsu.edu/index.php?title=CSC/ECE_517_Spring_2023_-_E2348_Replicate_Roles_and_Institution_UIs_ReactJS&oldid=150205"