View source for E1877 Sort instructor reports by name, ID, score, etc

This wiki page describes the changes made according to the specification of E1877 OSS final project for Fall 2018.
----
== Peer Review Information ==
The following credentials are recommended for testing the changes:

* Instructor Login: Username: super_administrator2 Password: password
* Youtube Link: https://youtu.be/ZhXLnN5kpW8
* Github Pull-Request Link: https://github.com/expertiza/expertiza/pull/1287

== Introduction ==
=== Background ===
Expertiza is a web portal which can be used to manage assignments related to a course. It provides a platform to view assignments, manage teams, select topics and work on improvement through anonymous peer reviews.

=== Problem Statement ===
Expertiza allows instructors to view kinds of reports of assignments in their courses such as submissions, scores, and review reports. To improve the report views, some table columns such as team name, score, the average should be made sortable by using the same existing sort library.

===== What needs to be done? =====

* '''#issue 1:''' We have to sort “Topic name”, “Team name”, “Team member(s)”, “Links” alphabetically in the “view submissions” table. 
[[File:1_1877.png]]

* '''#issue 2:''' We have to sort “Team” alphabetically, sort “Average” and “Range” (the first percentage) for “View scores” table, 
[[File:2_1877.png]]

* '''#issue 3:''' For “View review report” table, we can see that the columns “Reviewer” and “Metric” are already sortable. So we need to make other columns sortable. We have to sort “Review done” by the first number than the second number (e.g., 0/1, 0/2, 0/3, 1/1, 1/5, 2/2...), sort “Team reviewed” alphabetically and sort “Score awarded / Avg. score” (the first percentage) in both ascending or descending order.
[[File:3_1877.png]]

* '''#issue 4:''' For “Author feedback report” table, we have to do several changes. The first change includes changing the header name “Review response rejoined” to “Review responded to” and “Last rejoined at” to “Last responded at”. After that we are supposed to sort “Rejoinder” and “Review responded to” as string (alphabetically), sort “# author feedbacks done” by the first number than the second number, and sort “Last responded at” as a date. We will select MM/DD/YYYY as the default format for date.
[[File:4_1877.png]]

* '''#issue 5:''' We have to sort the first 3 columns as a string and sort the last column as a date(MM/DD/YYYY) in the “View scores” table
[[File:5_1877.png]]

== Solution ==
We will be using tablesorter jQuery to sort the table. For table columns which have constraints on them for sorting, we will be creating custom scripts which tablesorter library supports to sort those columns. According to the problem type, we are supposed to perform three kinds of sorting. All these have one thing in common. Adding up the tablesorter script in the body before using them. After including the script, we are supposed to do some modifications in the table tag by including the class. Three types of scenario may arise:

#Sorting by columns alphabetically - To sort the columns alphabetically, the table-head attribute must include sorter-true class with it to enable the sorting alphabetically.
#Sorting by date - It includes adding of a date default format in the script to denote the sorter type that must be used to sort the column of the date.
#Sorting by the first number followed by the second number - It will require splitting up of the data into two parts separated by '/' and then sorting the first part, followed by the second part.

=== About jQuery tablesorter 2.0===
tablesorter is a jQuery plugin for turning a standard HTML table with THEAD and TBODY tags into a sortable table without page refreshes. tablesorter can successfully parse and sort many types of data including linked data in a cell. It has many useful features including:

* Multi-column sorting
* Multi-tbody sorting
* Parsers for sorting text, URIs, integers, currency, floats, IP addresses, dates (ISO, long and short formats), time. Add your own easily
* Support secondary "hidden" sorting (e.g., maintain alphabetical sort when sorting on other criteria)
* Extensibility via widget system
* Cross-browser: IE 6.0+, FF 2+, Safari 2.0+, Opera 9.0+
* Small code size

== UML Design ==
[[File:6_1877.png | center]]

== Modification of Files ==
The following files were modified:
* app/views/assignments/list_submissions.html.erb (issue 1)
* app/views/grades/_team_title.html.erb (issue 2)
* app/views/grades/_tabbing.html.erb (issue 2)
* app/views/grades/_team.html.erb (issue 2)
* app/views/grades/_team_charts.html.erb (issue 2)
* app/views/grades/_team_title.html.erb (issue 2)
* app/views/grades/view.html.erb (issue 2)
* app/assets/javascripts/grading.js (issue 2)
* app/views/review_mapping/_review_report.html.erb (issue 3)
* app/views/review_mapping/_feedback_report.html.erb (issue 4)
* app/helpers/review_mapping_helper.rb (issue 4)
* app/views/review_mapping/_teammate_review_report.html.erb (issue 5)

== Solutions Implemented ==
=== Issue 1 ===
We have modified the views/assignments/list_submissions.html.erb by adding the tablesorter class in the table tag. Then with the table head, we added suitable classes and added scripts at the top of the file to sort the table contents within the file.

Added the following script to the file.
<pre>
<script>
   $(function () {
     /*Function for sorting the table */
     $("#submissionsTable").tablesorter({
       sortList: [[0,0]] //sort First Column by default when page loads
     });
   });
 </script>
</pre>

Then, we changed the table to this.

<pre>
<table id ="submissionsTable" class="table table-striped" style="margin-top: 50px">
     <thead>
         <% if @assignment.topics? %>
           <th class="sorter-true" style="font-weight: bold; font-size: 15px;">Topic name</th>
         <% end %>
         <% if @assignment.max_team_size > 1 %>
           <th class="sorter-true" style="font-weight: bold; font-size: 15px;">Team name</th>
           <th class="sorter-true" style="font-weight: bold; font-size: 15px;">Team member(s)</th>
         <% else %>
           <th class="sorter-true" style="font-weight: bold; font-size: 15px;">Participant name</th>
         <% end %>  
         <th class="sorter-true" style="font-weight: bold; font-size: 15px;">Links</th> 
         <th class="sorter-false" style="font-weight: bold; font-size: 15px;"></th>
       </tr>        
</pre>

[[File:new_1_1877.png]]

=== Issue 2 ===
We have modified the /view.html.erb, _teams.html.erb, _team_title.html.erb and _team.html.erb by adding the tablesorter class in the table tag. In this section, we were facing some issues and the code was highly unstructured. Also, the JavaScript was not proper in terms of usability and there were some elements which were not working properly as the code was static. We cleaned the code in these four files including the assets/javascripts/grading.js file. To make the view expandable, we made this change to the grading.js file. Also as the view which expanded on clicking of plus sign(beside Team Name) was added as a row, we made it as a columns and are expanding this column using javascript and css. We made this change as tablesorter library was sorting the expanded view as well and spoiling the table structure on sorting the table by Team name.

<pre>
//E1877: changes made to adjust width of expandables
var offsets = obj.getBoundingClientRect();
obj.style.width="calc(100vw - 103px)";
</pre>

[[File:new_2_1877.png]]

=== Issue 3 ===
We have modified the views/review_mapping/_review_report.html.erb file and also added a custom script to sort "Reviews done" and "Score awarded / Avg. score". To sort "team reviewed", we used tablesorter which is similar to the issue#1. Following script has been added for custom sort.
<pre>
<script>
    $(function () {
        // E1877: Function for sorting the table */
        $("#report_Table").tablesorter({
           // E1877: sortList: [[1, 0]], sort First Column by default when page loads
            textSorter: {
                3: function (value1, value2) {
                    //E1877: splitting by % and comparisons of values
                    var result1 = value1.split("%");
                    var result2 = value2.split("%");
                    if (parseInt(result1[0]) > parseInt(result2[0])) {
                        return 1;
                    }
                    else if (parseInt(result1[0]) < parseInt(result2[0])) {
                        return -1;
                    }
                    else {
                        return 0;
                    }
                }
            },
            headers: {
                2: {
                    sorter: 'averageParser' //E1877: custom Parser to parse Metrics data for the custom parser
                }
            }
        });
    });

</pre>

[[File:new_3_1877.png]]

=== Issue 4 ===
Initially, we referred to /views/review_mapping/_feedback_report.html.erb file for making the changes. In this, we started by renaming the column which was quite easy. Then we applied tablesorter for "Rejoinder" and “Review responded to”. For "Last responded at", we added the date feature which is set to MM/DD/YYYY format. Again for the “# author feedbacks done”, we used the same script which was used in Issue#3. The script after adding date has been added below:

<pre>
<script>
   $(function () {
     /*Function for sorting the table */
     $("#authorFeedback").tablesorter({
         dateFormat : "mmddyyyy", //E1877: set the default date format
       sortList: [[0,0]] // E1877: sort First Column by default when page loads
     });
   });
 </script>
</pre>

We have demonstrated the implementation part of the image below. You can see the arrow marks beside the table header. This has been implemented with all the other issues as well. You can refer to our YouTube video for further reference.

[[File:sol_4.png|center]]

=== Issue 5 ===
To solve this issue, we used the same tablesorter jquery plugin as used in issue 1 combined with the date data member as used in issue 4. We have modified the /views/review_mapping/_teammate_review_report.html.erb file to complete the solution.

[[File:new_5_1877.png]]

== Testing Plan ==
=== Functional Testing ===

===== For issue 1 =====
# Login as a super_admininstrator2.
# Click Assignments tab next to Courses
# Select the "View submissions" icon for the assignment for which you want to see the report of
# Sort the table by clicking on headers

===== For issue 2 =====
# Login as a super_admininstrator2.
# Click Assignments tab next to Courses
# Select the "View Scores" icon for the assignment for which you want to see the report of
# Sort the table by clicking on headers

===== For issue 3 =====
# Login as a super_admininstrator2.
# Click Assignments tab next to Courses
# Select the "View report" icon for the assignment for which you want to see the report of
# Sort the table by clicking on headers

===== For issue 4 =====
# Login as a super_admininstrator2.
# Click Assignments tab next to Courses
# Select the "View report" icon for the assignment for which you want to see the report of
# Select the "Author Feedback report" from the drop-down menu
# Sort the table by clicking on headers

===== For issue 5 =====
# Login as a super_admininstrator2.
# Click Assignments tab next to Courses
# Select the "View submissions" icon for the assignment for which you want to see the report of
# Select the "Teammate Review report" from the drop-down menu
# Sort the table by clicking on headers

== Team Information ==
#Ayush Arnav (aarnav@ncsu.edu)
#Rayan Dasoriya (rdasori@ncsu.edu)
#Rashik Bhasin (rbhasin@ncsu.edu)
#Prakshatkumar Shah (pmshah2@ncsu.edu)
#'''Mentor:''' Xiao Ma (xma21@ncsu.edu)

==References==

#[https://github.com/expertiza/expertiza Expertiza on GitHub]
#[https://github.com/expertiza/expertiza/pull/1287 GitHub Pull Request]
#[http://expertiza.ncsu.edu/ The Live Expertiza Website] 
#[https://mottie.github.io/tablesorter/docs/ tablesorter jQuery]
#Clean Code: A handbook of agile software craftsmanship. Author: Robert C Martin