Expertiza_Wiki - User contributions [en]

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-05-03T05:21:36Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Implementation==

Here is the main code for the regular expression check in Name of assignment and sub directory fields. Now, each time when a create button is clicked, the page is not checked with the model constraints but the reactjs component only. So, without reloading each time the checks are shown on the page as shown in the figure below.

[[File:Validate.PNG]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

File:Validation.PNG

2017-05-03T05:14:53Z

Rpothir:

File:Validate.PNG

2017-05-03T03:26:56Z

Rpothir:

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-23T19:24:30Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Vaidatinguser.PNG]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-23T19:23:43Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:validatinguser.png]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

File:Vaidatinguser.PNG

2017-04-23T19:22:06Z

Rpothir:

File:Userentries.png

2017-04-23T19:21:18Z

Rpothir: uploaded a new version of "File:Userentries.png": Reverted to version as of 19:35, 7 April 2017

File:Userentries.png

2017-04-23T19:21:02Z

Rpothir: uploaded a new version of "File:Userentries.png": Reverted to version as of 19:18, 23 April 2017

File:Userentries.png

2017-04-23T19:20:28Z

Rpothir: uploaded a new version of "File:Userentries.png": Reverted to version as of 19:16, 23 April 2017

File:Userentries.png

2017-04-23T19:18:15Z

Rpothir: uploaded a new version of "File:Userentries.png"

File:Userentries.png

2017-04-23T19:16:06Z

Rpothir: uploaded a new version of "File:Userentries.png"

File:Userentries.png

2017-04-23T19:14:14Z

Rpothir: uploaded a new version of "File:Userentries.png"

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-23T19:13:36Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

Another way to check is from editing page too.
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit icon page.
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment which is updated with special characters is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-23T19:11:45Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Correcting the code in edit assignment page too.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-23T19:10:51Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintenance like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as

This is essential in both new assignment or editing assignment page.

* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Though mentioned a mandatory no special characters, it was not properly implemented. System is accepting the special characters.
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

'''UML Diagram'''

The following diagram depicts the flow of events leading to validations.

[[File:Uml for validation.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

=== Fixing Tooltips ===
On exploring, it was noticed that all the existing tooltips work. However, we intend to increase the proximity of the tooltips in the assignment tab by increasing the size of the images.

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:39:22Z

Rpothir: /* Problem Statement */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignments tab.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

===UML Diagram===

The following diagram depicts the flow for future.

[[File:Uml for validation.png]]

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-13T01:38:10Z

Rpothir: /* Problem Statement */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
[https://en.wikipedia.org/wiki/React_(JavaScript_library) ReactJS] is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips - Needed to increase the proximity of the tool tips in the assignment tab by increasing the size of the image.

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]
 
 
 

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Upon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive ReactJS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

==Proposed Solution==
=== Assignment Creation ===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

Below is the mock view of what our implementation is going to look like:

[[File:new_imp.png]]

==== Files to be modified ====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

=== Assignment Edition ===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

Below is the mock display of what our implementation is going to look like:

[[File:Edit-new_imp.png]]

==== Files to be modified ====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

=== Make the table in topics tab sortable by its header ===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

=== Validating user entries ===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

==== Files to be modified ====
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

===UML Diagram===

The following diagram depicts the flow for future.

[[File:Uml for validation.png]]

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Topic Creation/Editing====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(user-name:instructor6 password:password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-10T17:43:52Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Edit topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Opon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive React JS form for adding and editing topic.

Currently this logic is implemented in new method in sign_up_controller.rb file and is invoked in the _add_topics.rb ruby injection file. With this action new.html.erb page is rendered. This should be avoided.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab_assignment.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

==Proposed Solution==
===Assignment Creation===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

====Files to be modified====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

===Assignment Edition===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

====Files to be modified====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_add_topics.html.erb'' when New Topic link is clicked. This should show a form in that page to create topic.
* Delete/avoid usage of ''sign_up_sheet/new.html.erb'' page.
* Implement an React JS functional component to handle creation of topic and saving it to database.

=== Editing topic ===
* An interactive React JS component should be created and should be called by the ruby injection page ''sign_up_sheet/_all_actions.html.erb'' when edit action is clicked. This should show a form in that page to edit topic.
* Delete/avoid usage of ''sign_up_sheet/edit.html.erb'' page.
* Implement an React JS functional component to handle editing of topic and updating it to database.

===Make the table in topics tab sortable by its header===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

The following diagram depicts the flow for future.

[[File:Uml for validation.png]]

===Files to be modified===
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

=== Topic Creation/Editing ===
* Login as an instructor ''(instructor6/password)''
* Create an assignment
* Click 'New Topic' link or 'edit' action in topics table for a particular topic
* A pop window or form should be displayed in the same page
* Add topic details in that window/ form
* Save it
* Created or modified topic should be seen in topics table

====Make the table in topics tab sortable by its header====
* Login as an instructor ''(instructor6/password)''
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

===Automation testing===
The above tests all will be automated using rspec. Rspec Mock-ups will be created for checking the navigation flow of newly created React JS components.

==Future Work==

We will try to convert edit assignment page in to React JS. Design pages more clearly.

==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''
#''https://github.com/expertiza/expertiza/pull/855

File:Uml for validation.png

2017-04-10T17:43:03Z

Rpothir: uploaded a new version of "File:Uml for validation.png"

File:Uml for validation.png

2017-04-10T17:39:49Z

Rpothir: uploaded a new version of "File:Uml for validation.png"

File:Uml for validation.png

2017-04-10T17:34:01Z

Rpothir:

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T22:10:08Z

Rpothir: /* Test Plan */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Delete topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Opon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive React JS form for adding and editing topic.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_asgmnt.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

==Proposed Solution==
===Assignment Creation===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

====Files to be modified====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

===Assignment Edition===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

====Files to be modified====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===

===Make the table in topics tab sortable by its header===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

===Files to be modified===
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red in rspec and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

==Future Work==
==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T19:40:49Z

Rpothir: /* Validating user entries */

== Introduction ==
This page is a part of CSC/ECE 517 Final Project for Spring 2017 to describe the changes made by us to the open source software project Expertiza. We are converting the assignment creation form to ReactJS. Following contains a brief introduction to Expertiza, ReactJS followed by the problems we are tackling, our strategy for the implementation and the test plan.

==Expertiza==
Expertiza is a Ruby on Rails based web application where students can submit and peer review learning objects such as codes, articles, websites etc., It is an open source software project funded by National Science Foundation(NSF). The instructor has the capability to create assignments with varied specifications such as topics, courses, team size, level of reviews etc., later review the submitted work and provide feedback. Students can enter their submissions and also review others' work.

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

==Problem Statement==
The Assignment Create and Edit Form are multi level forms. It consists of multiple inputs and user interactions. Many input types have dependency on interactions by the user. For example, on check for a particular checkbox, remaining form is displayed. Also, edit page is reloaded whenever a topic is added. The task is to convert this pages into ReactJS components.

'''Tasks to be done'''
*Organize the form layout, create several mockups and validate them to your users
*Make the table in topics tab sortable by its header
*Allow users to edit / add topics in the table instead of loading a new page
*Implement the new layout and convert the javascript to a ReactJS component
*Validate user entries
*Fix tooltips that don’t work

==Current Implementation==
===Assignment Creation===
The assignment creation form consists of multiple inputs and requires interactions from the user. The current implementation is mostly in HTML with data validations being done by JQuery. When a user wants to create a new assignment by clicking the new assignment button, a server request is generated and new view is rendered. Again, another server request to make database entry is generated once the user fills in the data and clicks on 'save' button and again a new view is rendered. This kind of implementation doesn't support dynamic view rendering hence lacks the fluidity in overall user experience that one would expect.

[[File:Create1.JPG]]

[[File:Create2.JPG]]

===Assignment Edition===
Similar to assignment creation page, edit page lacks the dynamic view rendering which makes the user experience cumbersome. Every time user wants to make changes to the assignment, a server request is generated and new view is rendered. The save button hit on completion will again generate another server request and render a new view.

[[File:Edit.jpg]]

=== Add/Delete topics in Assignment ===
In current implementation whenever a topic is added to the assignment, a request is sent to the server and user is redirected to a form in another page. Opon creation of topic user is rendered back to edit assignment page. This process involves lot of redirection. Now, the task is to avoid this redirection of pages and create a interactive React JS form for adding and editing topic.

'''Add topic:'''

[[File:Add_topic_form.PNG]]

Similar is the case for editing a topic. For editing a topic user is rendered to a form in edit page and again redirected to edit assignment page.

'''Edit Topic:'''

[[File:Edit_topic_form.PNG]]

===Make the table in topics tab sortable by its header===
Currently after creating an assignment, we can add topics related to the assignment. The "Topics" tab in the edit assignment form shows the list of topics that are added to the assignment. The picture below shows the current page for displaying the list of topics of an assignment. The list is not sortable. The task is to make it sortable using ReactJS by topic id, topic name, Num. of slots, Available slots, Num. on waitlist columns as sorting on remaining columns doesn't give any meaningful display.

[[File:topics_tab.png]]

===Validating user entries===
The entries for the assignment creation are not according to any restrictions, that can add problem to database maintainence like sorting the entries, comparing them, retrieving. There are many such problem causing situations in the new assignment form, such as
* User can add the number as new assignment name or he can give only special characters for it like "$$$$".
* Neglecting check boxes may lead to confusion with deadlines.

[[File:Userentries.png]]

==Proposed Solution==
===Assignment Creation===
The new implementation will use ReactJS to generate a drop-down window on clicking on the New Assignment button (private/public) , providing same features as before. Database entry is made on submitting the form and the form is closed.

====Files to be modified====
*apps/assets/javascripts/tree_display.jsx.erb
*apps/controllers/assignments_controller.rb
*apps/controllers/tree_display_controller.rb

===Assignment Edition===
Similar to assignment creation, in the new implementation, using ReactJS, when the edit assignment button is clicked, instead of making a server request and rendering a new view, a drop down window appears and saving the details will make the database entry.Since all the processing is done on the client side there will be decrease in the number of server requests.

====Files to be modified====
*apps/views/tree_display/list.html.erb
*apps/views/assignments/edit.html.erb
*apps/views/assignments/edit/_general.html.erb

=== Addition of topics ===

===Make the table in topics tab sortable by its header===
Following sub-tasks identified to implement sortable feature for topics table.
* Modify sign_up_sheet/_table_header.html.erb partial to change the table header fields to sortable type.
* Add sort functionality using ReactJS for each column that is meaningful to be sorted.

===Validating user entries===
The following tasks are to be implemented to achieve users validation,
* Add the regular expression validation to avoid special characters in the names of assignment or directories.
* Create alert messages to notify user if any important check boxes are missed.
* Create validation for edge cases like giving empty values.

===Files to be modified===
As, the project needs to be implemented in reactJS, which helps in reducing the complexing binding in MVC framework, only changing the javascript file can help to achieve this without changing model,
* app/assets/javascripts/tree_display.jsx.erb

==Test Plan==
Rails development is the Test Driven development, which helps in ensuring the implementation of all proposed implementations. We will be writing all the implementations proposed as tests that will eventually be red and try to make them green by adding to the development part.

For now the manual testing of these current implementations can help in testing the functionality from UI.
===Manual Testing===
Steps to manually test the feature are as follows:

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Verify if drop-down window is displayed.
*Make valid entries for the available fields and click on 'create'.
*Verify if new assignment is successfully created.

====Assignment Creation====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the Edit button for any of the available assignment.
*Verify if drop-down window is displayed.
*Make changes and click on 'save'.
*Verify if the changes made are successfully updated.

====Make the table in topics tab sortable by its header====
* Create an assignment
* Add 2 topics to the assignment
* Click sort on Topic ID and check if they are sorted
* Click sort on Topic title and check if they are sorted
* Similarly test using other columns

====Validating user entries====
*Log in as an instructor ''(user-name:instructor6 password:password)''
*Go to Manage->Assignments and click on the Assignments tab.
*Click on the 'New public assignment' or 'New private assignment' button
*Try adding the assignment using the weird names, with special symbols, ignoring check boxes
*Verify if the assignment is shown in the table.

==Future Work==
==References==

#''http://railscasts.com/episodes/228-sortable-table-columns sortable-columns''
#''https://www.airpair.com/reactjs/posts/reactjs-a-guide-for-rails-developers adding-reactjs''

File:Userentries.png

2017-04-07T19:39:43Z

Rpothir: uploaded a new version of "File:Userentries.png"

File:Userentries.png

2017-04-07T19:35:07Z

Rpothir:

File:WhatsApp Image 2017-04-07 at 3.21.59 PM.jpeg

2017-04-07T19:26:20Z

Rpothir: uploaded a new version of "File:WhatsApp Image 2017-04-07 at 3.21.59 PM.jpeg": Validating user entries current imlementation

Current implementation on validating user entries

File:WhatsApp Image 2017-04-07 at 3.21.59 PM.jpeg

2017-04-07T19:24:55Z

Rpothir: Current implementation on validating user entries

Current implementation on validating user entries

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T18:17:14Z

Rpothir: /* Current Implementation */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T18:16:06Z

Rpothir: /* Validating user entries */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T18:14:49Z

Rpothir: /* ReactJS */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T18:14:28Z

Rpothir: /* ReactJS */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T18:12:07Z

Rpothir: /* Validating user entries */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T18:06:16Z

Rpothir: /* ReactJS */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T18:05:17Z

Rpothir: /* Test Plan */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T17:49:33Z

Rpothir: /* Proposed Solution */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T17:35:31Z

Rpothir: /* Validating user entries */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T03:37:33Z

Rpothir: /* Current Implementation */

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-07T02:00:09Z

Rpothir: /* ReactJS */

== Introduction ==

==Expertiza==

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
* It has every functionality that an user interface required
* Easy data binding.
* Only single component changes are stored/changed without reloading the complete page.
* Fast and efficient
* Easy to scale

===Pros===

==Problem Statement==
==Current Implementation==
==Proposed Solution==
==Test Plan==
==Future Work==
==References==

CSC/ECE 517 Spring 2017/Convert Assignment Creation Form to ReactJS

2017-04-06T00:53:21Z

Rpothir:

== Introduction ==

==Expertiza==

==ReactJS==
ReactJS is the javascript framework developed by Facebook to solve the specific problem, ''UI rendering''. It is developed to solve the problem with complex binding in MVC framework using only one-way data binding. It is used for dynamic reloading of the page. It helps in reloading only the particular component required using Virtual DOM, which makes it fast by temporarily storing DOM

'''Reasons for using ReactJS'''
It has every functionality that an user interface required
Easy data binding.
Only single component changes are stored/changed without reloading the complete page.
Fast and efficient
Easy to scale

===Pros===
==Problem Statement==
==Current Implementation==
==Proposed Solution==
==Test Plan==
==Future Work==
==References==

User:Rpothir

2017-03-31T21:08:51Z

Rpothir: /* Test Plan and Development */

This wiki page describes the work on the OSS project titled '''E1716-Improve email notifications''' for the course CSC/ECE 517, Spring 2017.

== Expertiza==

Expertiza is an online collaboration tool for the students and instructors. It is an open source project developed on Ruby on Rails platform. It has several features that help the users to contribute jointly by creating the list of users by importing CSV file, assigning work, share the work, giving reviews, forming teams and finally notifying every action using email notifications.

----
== Motivation ==

Though expertiza is a great platform, there are quite a few enhancements in sending emails to users on the reviews, deadlines and accounts creations. So this contribution helps in learning to contribute to open source projects.

==Description of the current project ==
The existing functionality implements the email notifications' feature in response to certain events. However, there are cases where email notifications are sent which are redundant as well as cases where email notifications need to be sent but are not sent. The current project aims at improving this email-notification functionality. For example, Expertiza uses a peer review system wherein, after the first round of submission, submitted work is peer reviewed. Using the recommendations made and the improvements suggested in the peer reviews, an assignment participant can then proceed to improve his work. Thus, a participant is notified via email whenever a review for his/her submitted work is provided. Similarly, a reviewer is notified via email when a new submission is made for the work that he/she reviewed. Now, if the participant makes an improvement in his/her submission after the last round of reviews has been done, sending an email to the reviewer regarding this is redundant. However, in the current state of application, a reviewer is notified in this case too. Thus, there are similar cases, where the email notification needs to be enabled/disabled and that is the objective of our project.

==Peer Review Information==
For users intending to view the deployed Expertiza associated with this assignment, the user login credentials are below:
user_name: 'expertiza.development@gmail.com'
password: 'qwer@1234'

The issues/tasks that needed modifications were identified:

1. Notify an instructor by e-mail when a student suggests a topic.

2. The email message telling reviewers to revise their reviews should not be sent after the last review deadline has passed.

3.Send out an email to the invitee when a participant sends out an invitation to another participant to join a team.

4. The student who issued the invitation should also be e-mailed when the invitee joins the team.

5. Create an option (in the instructor’s profile) to get a copy of ‘e-mails being sent to students (this is so the instructor can verify correct functioning of the system).

6.When students' accounts are created by importing a CSV file on the Users page, they receive e-mails with their user-ID and password. But if an account is created by adding them as participants to an assignment when they don't already have an account, e-mail is not sent. Students should receive e-mails upon account creation, regardless of how their account is created.

== Test Plan and Development ==

'''Topic Suggestion'''

'''Test plan:'''

The mail should be sent to the instructor as soon as a new topic is suggested by the student. Since the process going here is a method call and mailer invocation, corresponding tests to check whether the emails are sent to instructor have been written in the RSpec.

[[File:suggestion test.jpg]]

'''Development:'''

Earlier Scenario:

Some of the assignments have an option to suggest a topic to the instructor. But when a student suggests a topic, this event is not notified to the instructor leaving it to go unnoticed and the student must mail the instructor regarding the suggestion.

Updates/Changes:

The suggestions controller is modified so that whenever a student suggests a topic, an email is sent to the professor. The changes made are shown below.

Updated the controllers/suggestion_controller.rb so that whenever a new suggestion is getting saved it must invoke the mailer function. This is also being done when the suggestion is getting accepted too.
[[File:suggestion save.jpg]]

The mailer function as shown below contains the to address which is the instructor's email address, the subject along with the topic name and body with the proposer's details. This function invokes the suggestion_topic function in the mailer which send the mail.

[[File:suggestion mail call.jpg]]

As mentioned above the function defined in the mailer send the mail in the following format to the instructor.

[[File:suggestion mailer.jpg]]

The mail format and view would be

[[File:suggestion view.jpg]]

'''Inviting a participant to join the team'''

'''Test Plan'''

The main features to test in this particular task is to make sure that the defined methods are getting called at right times with the right parameters. Also, it is required to test whether the mailer is invoked at right time thereby avoiding unnecessary emails. Here, both the controller and mailers are being tested. The RSpec tests for both the invitation and acceptance are mentioned below.

[[File:invitation test.jpg]]

'''Development'''

Earlier Scenario:

Whenever a user invites another participant to join the team, he/she can just add them in expertiza and must wait until the participant logs into expertiza to see the invitation.

Changes/Updates:

We have included the mailer call whenever a user is inviting a participant so that an email is sent out stating that an invitation is pending.

Whenever a new invitation is created and set into waiting status, the email is call is made in controllers/invitation_controller.rb

[[File:invitation call.jpg]]

The email call calls a function named 'accept_invitation' in the invitation controller where the appropriate fields required for the email are gathered and the mailer is called.

[[File:invitation fun.jpg]]

In the mailer, the 'accept_invitation' function is invoked where the to address is addressed to the participant who is being invited.

[[File:invitation mailer.jpg]]

The format of the mail being set is customized in views/mailer/accept_invitation.html.erb as shown below.

[[File:invitation view.jpg]]

'''Notification regarding the Accepted Invitation'''

Earlier scenario:

As mentioned earlier, whenever a participant accepts the team invitation the user who sent the invitation gets to know about the news only after logging into Expertiza which may take longer to form the team.

Changes/Updates:

So here, we have included a mailer so that whenever a participant accepts the team request, an email is sent to the user who invited him/her. This makes sure that the user who invited has been notified immediately after the team request has been accepted thereby avoiding delays in team formation.

Whenever a new invitation is accepted the status is confirmed and the email call is made in controllers/invitation_controller.rb

[[File:accepted call.jpg]]

The email call calls a function named 'accepted_invitation' in the invitation controller where the appropriate fields required for the email are gathered and the mailer is called.

[[File:accepted fun.jpg]]

In the mailer, the 'accepted_invitation' function is invoked where the to address is addressed to the user who invited the participant to join the team in the first place.

[[File:accepted mailer.jpg]]

The format of the mail being set is customized in views/mailer/accepted_invitation.html.erb as shown below.

[[File:accepted view.jpg]]

'''Copy of emails to Instructor'''

Proposal:

To creation an option to get a copy of ‘e-mails being sent to students so the instructor can verify correct functioning of the system.

Changes:

In regard with the proposal, we created an option in the instructor profile which allows the instructor to get all the emails that are being sent to the students. On consultation with the instructor, the instructor email was added as cc in the mails being sent. For this, a new migration is done on database to add a new column of Boolean data type.

In the profile of the instructor a check box is added to facilitate instructors to receive the copy of mails sent to students.

[[File:copy_of_all_mails.jpg]]

Inside the mailer, the option is checked and if satisfied, all the generic mails are also forwarded to the instructor.

[[File:mailer.jpg]]

User:Rpothir

2017-03-31T20:09:36Z

Rpothir: /* Implementation */

This wiki page describes the work on the OSS project titled '''E1716-Improve email notifications''' for the course CSC/ECE 517, Spring 2017.

== Expertiza==

Expertiza is an online collaboration tool for the students and instructors. It is an open source project developed on Ruby on Rails platform. It has several features that help the users to contribute jointly by creating the list of users by importing CSV file, assigning work, share the work, giving reviews, forming teams and finally notifying every action using email notifications.

----
== Motivation ==

Though expertiza is a great platform, there are quite a few enhancements in sending emails to users on the reviews, deadlines and accounts creations. So this contribution helps in learning to contribute to open source projects.

==Description of the current project ==
The existing functionality implements the email notifications' feature in response to certain events. However, there are cases where email notifications are sent which are redundant as well as cases where email notifications need to be sent but are not sent. The current project aims at improving this email-notification functionality. For example, Expertiza uses a peer review system wherein, after the first round of submission, submitted work is peer reviewed. Using the recommendations made and the improvements suggested in the peer reviews, an assignment participant can then proceed to improve his work. Thus, a participant is notified via email whenever a review for his/her submitted work is provided. Similarly, a reviewer is notified via email when a new submission is made for the work that he/she reviewed. Now, if the participant makes an improvement in his/her submission after the last round of reviews has been done, sending an email to the reviewer regarding this is redundant. However, in the current state of application, a reviewer is notified in this case too. Thus, there are similar cases, where the email notification needs to be enabled/disabled and that is the objective of our project.

==Peer Review Information==
For users intending to view the deployed Expertiza associated with this assignment, the user login credentials are below:
user_name: 'expertiza.development@gmail.com'
password: 'qwer@1234'

The issues/tasks that needed modifications were identified:

1. Notify an instructor by e-mail when a student suggests a topic.

2. The email message telling reviewers to revise their reviews should not be sent after the last review deadline has passed.

3.Send out an email to the invitee when a participant sends out an invitation to another participant to join a team.

4. The student who issued the invitation should also be e-mailed when the invitee joins the team.

5. Create an option (in the instructor’s profile) to get a copy of ‘e-mails being sent to students (this is so the instructor can verify correct functioning of the system).

6.When students' accounts are created by importing a CSV file on the Users page, they receive e-mails with their user-ID and password. But if an account is created by adding them as participants to an assignment when they don't already have an account, e-mail is not sent. Students should receive e-mails upon account creation, regardless of how their account is created.

== Test Plan and Development ==

'''Topic Suggestion'''

'''Test plan:'''

The mail should be sent to the instructor as soon as a new topic is suggested by the student. Since the process going here is a method call and mailer invocation, corresponding tests to check whether the mails are sent to instructor have been written in the RSpec.

[[File:suggestion test.jpg]]

'''Development:'''

Earlier Scenario:

Some of the assignments have an option to suggest a topic to the instructor. But when a student suggests a topic, this event is not notified to the instructor leaving it to go unnoticed and the student must mail the instructor regarding the suggestion.

Updates/Changes:

The suggestions controller is modified so that whenever a student suggests a topic, an email is sent to the professor. The changes made are shown below.

Updated the controllers/suggestion_controller.rb so that whenever a new suggestion is getting saved it must invoke the mailer function. This is also being done when the suggestion is getting accepted too.
[[File:suggestion save.jpg]]

The mailer function as shown below contains the to: address which is the instructor's email address, the subject along with the topic name and body with the proposer's details. This function invokes the suggestion_topic function in the mailer which send the mail.

[[File:suggestion mail call.jpg]]

As mentioned above the function defined in the mailer send the mail in the following format to the instructor.

[[File:suggestion mailer.jpg]]

The mail format and view would be

[[File:suggestion view.jpg]]

'''Inviting a participant to join the team'''

'''Test Plan'''

The main features to test in this particular task is to make sure that the defined methods are getting called at right times with the right parameters. Also, it is required to test whether the mailer is invoked at right time thereby avoiding unnecessary emails. Here, both the controller and mailers are being tested. The RSpec tests for both the invitation and acceptance are mentioned below.

[[File:invitation test.jpg]]

'''Development'''

Earlier Scenario:

Whenever a user invites another participant to join the team, he/she can just add them in expertiza and must wait until the participant logs into expertiza to see the invitation.

Changes/Updates:

We have included the mailer call whenever a user is inviting a participant so that an email is sent out stating that an invitation is pending.

Whenever a new invitation is created and set into waiting status, the email is call is made in controllers/invitation_controller.rb

[[File:invitation call.jpg]]

The email call calls a function named 'accept_invitation' in the invitation controller where the appropriate fields required for the email are gathered and the mailer is called.

[[File:invitation fun.jpg]]

In the mailer, the 'accept_invitation' function is invoked where the to address is addressed to the participant who is being invited.

[[File:invitation mailer.jpg]]

The format of the mail being set is customized in views/mailer/accept_invitation.html.erb as shown below.

[[File:invitation view.jpg]]

'''Notification regarding the Accepted Invitation'''

Earlier scenario:

As mentioned earlier, whenever a participant accepts the team invitation the user who sent the invitation gets to know about the news only after logging into Expertiza which may take longer to form the team.

Changes/Updates:

So here, we have included a mailer so that whenever a participant accepts the team request, an email is sent to the user who invited him/her. This makes sure that the user who invited has been notified immediately after the team request has been accepted thereby avoiding delays in team formation.

Whenever a new invitation is accepted the status is confirmed and the email call is made in controllers/invitation_controller.rb

[[File:accepted call.jpg]]

The email call calls a function named 'accepted_invitation' in the invitation controller where the appropriate fields required for the email are gathered and the mailer is called.

[[File:accepted fun.jpg]]

In the mailer, the 'accepted_invitation' function is invoked where the to address is addressed to the user who invited the participant to join the team in the first place.

[[File:accepted mailer.jpg]]

The format of the mail being set is customized in views/mailer/accepted_invitation.html.erb as shown below.

[[File:accepted view.jpg]]

'''Copy of emails to Instructor'''

Proposal: In

User:Rpothir

2017-03-19T01:03:06Z

Rpothir:

The wiki page describes the work on OSS project titled '''E1716-Improve email notifications''' for Spring 2017

== Expertiza==

Expertiza is an online collaboration tool for the students and instructors. It is an open source project developed on Ruby on Rails platform. It has several features that helps users to contribute jointly by creating the list of users by importing csv file, assigning work, share the work, giving reviews, forming teams and finally notifying every action using email notifications.

----
== Motivation ==

Though expertiza is a great platform, there are quite a few enhancements in sending emails to users on the reviews, deadlines and accounts creations. So this contribution helps in learning to contribute to an open source projects.

User:Rpothir

2017-03-18T18:11:10Z

Rpothir: Added introduction

User:Rpothir

2017-03-18T17:41:06Z

Rpothir: just started page

The wiki page describes the work on OSS project titled '''E1716-Improve email notifications''' for Spring 2017