From 066d108012d3a4a7e14b5580ea1c65bfcd4caa01 Mon Sep 17 00:00:00 2001
From: kunw <kunw@vmware.com>
Date: Sat, 6 Aug 2016 16:12:48 +0800
Subject: [PATCH] updates paginator with following the restriction mode

---
 .../js/components/log/list-log.directive.html |   2 +-
 .../js/components/log/list-log.directive.js   |   2 +-
 .../paginator/paginator.directive.js          | 219 +++++++++---------
 3 files changed, 113 insertions(+), 110 deletions(-)

diff --git a/static/resources/js/components/log/list-log.directive.html b/static/resources/js/components/log/list-log.directive.html
index 498129f2b..8da7229d5 100644
--- a/static/resources/js/components/log/list-log.directive.html
+++ b/static/resources/js/components/log/list-log.directive.html
@@ -48,7 +48,7 @@
             </tbody>
           </table>
         </div>
-        <paginator class="pull-right" total-count="//vm.totalCount//" page-size="//vm.pageSize//" page="vm.page" display-count="3"></paginator>
+        <paginator class="pull-right" total-count="//vm.totalCount//" page-size="//vm.pageSize//" page="vm.page" display-count="2"></paginator>
       </div>
     </div>
   </div>
diff --git a/static/resources/js/components/log/list-log.directive.js b/static/resources/js/components/log/list-log.directive.js
index 9daad971c..a345cdb93 100644
--- a/static/resources/js/components/log/list-log.directive.js
+++ b/static/resources/js/components/log/list-log.directive.js
@@ -53,7 +53,7 @@
     };
 
     vm.page = 1;
-    vm.pageSize = 2;            
+    vm.pageSize = 1;            
     
     $scope.$watch('vm.totalCount', function(current) {
       if(current) {
diff --git a/static/resources/js/components/paginator/paginator.directive.js b/static/resources/js/components/paginator/paginator.directive.js
index a224730a6..3ef88974f 100644
--- a/static/resources/js/components/paginator/paginator.directive.js
+++ b/static/resources/js/components/paginator/paginator.directive.js
@@ -32,7 +32,7 @@
     return directive;
     
     function link(scope, element, attrs, ctrl) {
-     
+      
       scope.$watch('vm.totalCount', function(current) {
         if(current) {
           var totalCount   = current;         
@@ -40,54 +40,10 @@
           var displayCount = parseInt(ctrl.displayCount);
           
           console.log('Total Count:' + totalCount + ', Page Size:' + pageSize + ', Display Count:' + displayCount);
-          
-          var TimeCounter = function() {
-            this.time = 0;
-            this.minimum = 0;
-            this.maximum = 0;
-          }
-          
-          TimeCounter.prototype.setMaximum = function(maximum) {
-            this.maximum = maximum;
-          }
-          
-          TimeCounter.prototype.increment = function() {
-            if(this.time < this.maximum) {
-              ++this.time;
-              ++ctrl.page;
-            }
-            scope.$apply();
-          }
-          
-          TimeCounter.prototype.canIncrement = function() {
-            if(this.time < this.maximum) {
-              return true;
-            }
-            return false;
-          }
-          
-          TimeCounter.prototype.decrement = function() {
-            if(this.time > this.minimum) {
-              --this.time;
-              --ctrl.page;
-            }
-            scope.$apply();
-          }
-          
-          TimeCounter.prototype.canDecrement = function() {
-            if(this.time > this.minimum) {
-              return true;
-            }
-            return false;
-          }
-          
-          TimeCounter.prototype.getTime = function() {
-            return this.time;
-          }
-          
+
           var buttonCount = Math.ceil(totalCount / pageSize);
-          var tc = new TimeCounter();
-                      
+          ctrl.buttonCount = buttonCount;
+                                
           if(buttonCount <= displayCount) {
             tc.setMaximum(0);
           }else{
@@ -97,20 +53,6 @@
           element.find('ul li:first a').on('click', previous);          
           element.find('ul li:last a').on('click', next);
           
-          var drawButtons = function(time) {
-            element.find('li[tag="pagination-button"]').remove();
-            var buttons = [];
-            for(var i = 1; i <= displayCount; i++) {
-              var displayNumber = displayCount * time + i;
-              if(displayNumber <= buttonCount) {
-                buttons.push('<li tag="pagination-button"><a href="javascript:void(0)" page="' + displayNumber + '">' + displayNumber + '</a></li>');
-              }
-            }
-            $(buttons.join(''))
-              .insertAfter(element.find('ul li:eq(0)')).end()
-              .on('click', buttonClickHandler); 
-          }
-          
           drawButtons(tc.getTime());    
 
           togglePrevious(tc.canDecrement());
@@ -118,54 +60,115 @@
           
           togglePageButton();
           
-          function togglePrevious(status) {
-            if(status){
-              element.find('ul li:first').removeClass('disabled');
-            }else{
-              element.find('ul li:first').addClass('disabled');
-            }
-          }
-                    
-          function toggleNext(status) {
-            if(status) {
-              element.find('ul li:last').removeClass('disabled');
-            }else{
-              element.find('ul li:last').addClass('disabled');
-            } 
-          }
-          
-          function buttonClickHandler(e) {
-            ctrl.page = $(e.target).attr('page');
-            togglePageButton();                                      
-            togglePrevious(tc.canDecrement());
-            toggleNext(tc.canIncrement());
-            scope.$apply();
-          }  
-          
-          function togglePageButton() {
-            element.find('li[tag="pagination-button"]').removeClass('active');
-            element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').parent().addClass('active');
-          }          
-         
-          function previous() {
-            if(tc.canDecrement()) {
-              tc.decrement();
-              drawButtons(tc.getTime());
-              element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');  
-            }
-            scope.$apply(); 
-          }      
-          
-          function next() {
-            if(tc.canIncrement()) {    
-              tc.increment();
-              drawButtons(tc.getTime());     
-              element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
-            }
-            scope.$apply();
-          }
         }
       }); 
+      
+      var TimeCounter = function() {
+        this.time = 0;
+        this.minimum = 0;
+        this.maximum = 0;
+      }
+      
+      TimeCounter.prototype.setMaximum = function(maximum) {
+        this.maximum = maximum;
+      }
+      
+      TimeCounter.prototype.increment = function() {
+        if(this.time < this.maximum) {
+          ++this.time;
+          ++ctrl.page;
+        }
+        scope.$apply();
+      }
+      
+      TimeCounter.prototype.canIncrement = function() {
+        if(this.time < this.maximum) {
+          return true;
+        }
+        return false;
+      }
+      
+      TimeCounter.prototype.decrement = function() {
+        if(this.time > this.minimum) {
+          --this.time;
+          --ctrl.page;
+        }
+        scope.$apply();
+      }
+      
+      TimeCounter.prototype.canDecrement = function() {
+        if(this.time > this.minimum) {
+          return true;
+        }
+        return false;
+      }
+      
+      TimeCounter.prototype.getTime = function() {
+        return this.time;
+      }
+      
+      var tc = new TimeCounter();
+           
+      function drawButtons(time, displayCount, buttonCount) {
+        element.find('li[tag="pagination-button"]').remove();
+        var buttons = [];
+        for(var i = 1; i <= ctrl.displayCount; i++) {
+          var displayNumber = ctrl.displayCount * time + i;
+          if(displayNumber <= ctrl.buttonCount) {
+            buttons.push('<li tag="pagination-button"><a href="javascript:void(0)" page="' + displayNumber + '">' + displayNumber + '<span class="sr-only"></span></a></li>');
+          }
+        }
+        $(buttons.join(''))
+          .insertAfter(element.find('ul li:eq(0)')).end()
+          .on('click', buttonClickHandler); 
+      }
+      
+      function togglePrevious(status) {
+        if(status){
+          element.find('ul li:first').removeClass('disabled');
+        }else{
+          element.find('ul li:first').addClass('disabled');
+        }
+      }
+                    
+      function toggleNext(status) {
+        if(status) {
+          element.find('ul li:last').removeClass('disabled');
+        }else{
+          element.find('ul li:last').addClass('disabled');
+        } 
+      }
+          
+      function buttonClickHandler(e) {
+        ctrl.page = $(e.target).attr('page');
+        togglePageButton();                                      
+        togglePrevious(tc.canDecrement());
+        toggleNext(tc.canIncrement());
+        scope.$apply();
+      }  
+          
+      function togglePageButton() {
+        element.find('li[tag="pagination-button"]').removeClass('active');
+        element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').parent().addClass('active');
+      }          
+         
+      function previous() {
+        if(tc.canDecrement()) {
+          tc.decrement();
+          drawButtons(tc.getTime());
+          element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');  
+        }
+        scope.$apply(); 
+      }      
+          
+      function next() {
+        if(tc.canIncrement()) {    
+          tc.increment();
+          drawButtons(tc.getTime());     
+          element.find('li[tag="pagination-button"] a[page="' + ctrl.page + '"]').trigger('click');
+        }
+        scope.$apply();
+      }
     }
   }