From 93dba3f92f7d4d269fb0ca43b308c0320d3365d5 Mon Sep 17 00:00:00 2001
From: Kevan Ahlquist <ahlqu039@umn.edu>
Date: Sat, 19 Mar 2016 17:45:45 -0500
Subject: [PATCH] Add column sorting to images page.

---
 app/components/images/images.html         | 36 +++++++++++++++++++----
 app/components/images/imagesController.js |  8 ++++-
 2 files changed, 37 insertions(+), 7 deletions(-)

diff --git a/app/components/images/images.html b/app/components/images/images.html
index 00fc2ec09..3f89048b2 100644
--- a/app/components/images/images.html
+++ b/app/components/images/images.html
@@ -21,15 +21,39 @@
 <table class="table table-striped">
     <thead>
         <tr>
-            <th><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Action</th>
-            <th>Id</th>
-            <th>Repository</th>
-            <th>VirtualSize</th>
-            <th>Created</th>
+            <th><label><input type="checkbox" ng-model="toggle" ng-change="toggleSelectAll()" /> Select</label></th>
+            <th>
+                <a href="#/images/" ng-click="order('Id')">
+                    Id
+                    <span ng-show="sortType == 'Id' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Id' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/images/" ng-click="order('RepoTags')">
+                    Repository
+                    <span ng-show="sortType == 'RepoTags' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'RepoTags' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/images/" ng-click="order('VirtualSize')">
+                    VirtualSize
+                    <span ng-show="sortType == 'VirtualSize' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'VirtualSize' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
+            <th>
+                <a href="#/images/" ng-click="order('Created')">
+                    Created
+                    <span ng-show="sortType == 'Created' && !sortReverse" class="glyphicon glyphicon-chevron-down"></span>
+                    <span ng-show="sortType == 'Created' && sortReverse" class="glyphicon glyphicon-chevron-up"></span>
+                </a>
+            </th>
         </tr>
     </thead>
     <tbody>
-        <tr ng-repeat="image in images | filter:filter | orderBy:predicate">
+        <tr ng-repeat="image in images | filter:filter | orderBy:sortType:sortReverse">
             <td><input type="checkbox" ng-model="image.Checked" /></td>
             <td><a href="#/images/{{ image.Id }}/?tag={{ image|repotag }}">{{ image.Id|truncate:20}}</a></td>
             <td>{{ image|repotag }}</td>
diff --git a/app/components/images/imagesController.js b/app/components/images/imagesController.js
index f73a8f1e8..ace6cce77 100644
--- a/app/components/images/imagesController.js
+++ b/app/components/images/imagesController.js
@@ -1,8 +1,14 @@
 angular.module('images', [])
     .controller('ImagesController', ['$scope', 'Image', 'ViewSpinner', 'Messages',
         function ($scope, Image, ViewSpinner, Messages) {
+            $scope.sortType = 'Created';
+            $scope.sortReverse = true;
             $scope.toggle = false;
-            $scope.predicate = '-Created';
+
+            $scope.order = function(sortType) {
+                $scope.sortReverse = ($scope.sortType === sortType) ? !$scope.sortReverse : false;
+                $scope.sortType = sortType;
+            };
 
             $scope.showBuilder = function () {
                 $('#build-modal').modal('show');