Merge pull request #88 from Xtern-Matching/87-table-headers-filters

87 table headers filters
IndyTechFellowship · Feb 13, 2017 · 518693f · 518693f
2 parents 9db6340 + 6e128a0
commit 518693f
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 11 deletions.
diff --git a/core/public/modules/dashboard/partials/reviewer.dashboard.html b/core/public/modules/dashboard/partials/reviewer.dashboard.html
@@ -13,33 +13,34 @@
                     Applicants
                 </div>
             </div>
+            <h2 class="ui header">Filters:</h2>
+            <div class="vertical-spacer"></div>
+            <div class="ui centered toggle checkbox filter toggle">
+                <input type="checkbox" ng-model="filters.graded"
+                        ng-true-value="true" ng-false-value="false" ng-change="change()">
+                <label class="ui header" style="text-align: center">Not Graded</label>
+            </div>
         </div>
     </div>
     <div class="eleven wide column" >
         <h2 class="ui header">Students </h2>
         <table class="ui striped selectable sortable table">
             <thead>
                 <tr>
-                    <th>
-                        Name
-                    </th>
-                    <th>
-                        Your Grade
+                    <th ng-repeat="header in tableHeaders" ng-click="sort(header)" class="sorted">
+                        {{header.title}}
                     </th>
                 </tr>
             </thead>
             <tbody>
                 <tr ng-repeat="student in summaryData" ng-click="rowClick(student.key)" class="clickable">
-                    <td>
-                        <div>{{student.firstName}} {{student.lastName}}</div>
-                    </td>
-                    <td>
-                        <div>{{student.currentReviewerGrade}}</div>
+                    <td ng-repeat="header in tableHeaders">
+                        {{student[header.displayProperty]}}
                     </td>
                 </tr>
             </tbody>
         </table>
-        <div class="cube">
+        <div class="cube" ng-hide="summaryData"> 
           <img class="side" src="/public/images/xtern-x.png" alt="Smiley face" height="150" width="150"></img>
       </div>
   </div>

diff --git a/core/public/modules/dashboard/reviewer.dashboard.controller.js b/core/public/modules/dashboard/reviewer.dashboard.controller.js
@@ -6,6 +6,25 @@ angular.module('Xtern').controller('ReviewerDashboardCtrl', function($scope, $st
     $scope.rawData = null;
     $scope.personsCount = 0;
 
+    $scope.filters ={
+        graded: false
+    };
+
+    $scope.change = function(){        
+        $scope.summaryData = $scope.rawData.filter(function(row){
+            if($scope.filters.graded && row.currentReviewerGrade){
+                return false;
+            }
+            return true;
+        });
+        $scope.personsCount = $scope.summaryData.length;
+    };
+
+    $scope.tableHeaders = [
+        {title: 'Name', displayProperty:'name', sortPropertyName: 'name', asc: true},
+        {title: 'Your Grade', displayProperty:'currentReviewerGrade', sortPropertyName: 'sortReviewerGrade', asc: true}
+    ];
+
     $scope.rowClick = function (key) {
         $state.go(PATH + '.profile', {key: key});
     };
@@ -14,8 +33,12 @@ angular.module('Xtern').controller('ReviewerDashboardCtrl', function($scope, $st
         var students = [];
         for(var i = 0; i < data.length; i++) {
             students[i] = rowClass(data[i],keys[i]);
+            students[i].name = students[i].firstName + " " + students[i].lastName;
             if(grades[i] !== null && grades[i] > 0) {
                 students[i].currentReviewerGrade = grades[i];
+                students[i].sortReviewerGrade = grades[i];
+            }else if(grades[i]){
+                students[i].sortReviewerGrade = -1;
             }
         }
         $scope.summaryData = students;
@@ -24,4 +47,20 @@ angular.module('Xtern').controller('ReviewerDashboardCtrl', function($scope, $st
         $('.ui.dropdown').dropdown();//activates semantic drowpdowns
         $('.ui.accordion').accordion();
     });
+
+    //Standard sort function
+    $scope.sort = function (header, event) {
+        var prop = header.sortPropertyName;
+        var asc = header.asc;
+        header.asc = !header.asc;
+        var ascSort = function (a, b) {
+            return a[prop] < b[prop] ? -1 : a[prop] > b[prop] ? 1 : 0;
+        };
+        var descSort = function (a, b) {
+            return ascSort(b, a);
+        };
+        var sortFunc = asc ? ascSort : descSort;
+        $scope.summaryData.sort(sortFunc);
+    };
+
 });