order tags by created time

Signed-off-by: lijun <lijun@qiyi.com>

Author: xiaodot

app/styles/main.css

@@ -144,3 +144,7 @@ footer img {
 .css-form input.ng-valid.ng-dirty {
   background-color: #78FA89;
 }
+
+.caret{
+  cursor: pointer;
+}

app/tag/tag-controller.js

@@ -45,12 +45,12 @@ angular.module('tag-controller', ['registry-services'])
       if(! $scope.tagsCurrentPage){
         $scope.tagsCurrentPage = 1;
       }else{
-        $scope.tagsCurrentPage = parseInt($scope.tagsCurrentPage) 
+        $scope.tagsCurrentPage = parseInt($scope.tagsCurrentPage)
         if($scope.tagsCurrentPage > $scope.maxTagsPage || $scope.tagsCurrentPage < 1){
-          $scope.tagsCurrentPage = 1; 
+          $scope.tagsCurrentPage = 1;
         }
       }
-      // Select wanted tags 
+      // Select wanted tags
       var idxShift = 0;
       $scope.displayedTags = $scope.tags;
       if($scope.tagsPerPage){
@@ -68,13 +68,13 @@ angular.module('tag-controller', ['registry-services'])
         }
       }
     });
-      
 
-    
+
+
     // Copy collection for rendering in a smart-table
     $scope.displayedTags = [].concat($scope.tags);
 
-    
+
     // selected tags
     $scope.selection = [];
 
@@ -83,6 +83,29 @@ angular.module('tag-controller', ['registry-services'])
       return filterFilter($scope.displayedTags, { selected: true });
     };
 
+    // sort tags
+    $scope.orderByCreated  = true;
+
+    function compare(a, b){
+      var at = new Date(a.details.created),
+          bt = new Date(b.details.created);
+
+      return at.getTime() - bt.getTime();
+    }
+
+    $scope.sortTags = function(){
+      if($scope.orderByCreated){
+        $scope.displayedTags.sort(compare);
+      }
+      else{
+        // if $scope.orderByCreated is false, that means $scope.displayedTags.sort(compare) has been invoked.
+        // then just need to call reverse() function
+        $scope.displayedTags.reverse();
+      }
+
+      $scope.orderByCreated = !$scope.orderByCreated;
+    }
+
     $scope.openConfirmTagDeletionDialog = function(size) {
       var modalInstance = $modal.open({
           animation: true,

app/tag/tag-list-directive.html

@@ -12,7 +12,11 @@
       <tr>
         <th  ng-class="{strike: deleted}"><span class="glyphicon glyphicon-tag"></span> Tag</th>
         <th ><span class="glyphicon glyphicon-qrcode"></span> Image ID</th>
-        <th ><span class="glyphicon glyphicon-calendar"></span> Created</th>
+        <th ng-click="sortTags()" ng-class="{dropup: orderByCreated==true, dropdown: orderByCreated==false}">
+          <span class="glyphicon glyphicon-calendar"></span>
+          Created
+          <span class="caret"></span>
+        </th>
         <th ><span class="glyphicon glyphicon-user"></span> Author</th>
         <th ><span class="glyphicon glyphicon-eye-open"></span> Docker version</th>
         <!-- <th ><span class="glyphicon glyphicon-arrow-up"></span> Parent's ID</th> -->