Add pagination to the history view, also remove 'last10' and 'all' fi…

…lter in favour of just 'last'.
darkwallet · Jul 2, 2014 · 7614b17 · 7614b17
1 parent bec7b66
commit 7614b17
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 36 deletions.
diff --git a/html/wallet/history.html b/html/wallet/history.html
@@ -1,17 +1,14 @@
-<div class="row">
+<div class="row" ng-controller="HistoryRowsCtrl">
     <div class="small-12 columns">
         <div class="row collapse panel radius" ng-show="!historyRows.length">
             You have no history in this pocket.
         </div>
         <div class="row collapse panel radius" ng-show="historyRows.length">
             <dl class="sub-nav">
                 <dt>Filter:</dt>
-                <dd ng-class="{active: 'last10'===txFilter}"><a ng-click="setHistoryFilter('last10')">Last 10</a></dd>
+                <dd ng-class="{active: 'last'===txFilter}"><a ng-click="setHistoryFilter('last')">Last</a></dd>
                 <dd ng-class="{active: 'weekly'===txFilter}"><a ng-click="setHistoryFilter('weekly')">Weekly</a></dd>
                 <dd ng-class="{active: 'monthly'===txFilter}"><a ng-click="setHistoryFilter('monthly')">Monthly</a></dd>
-                <!--<dd ng-class="{active: 'lastWeek'===txFilter}"><a ng-click="setHistoryFilter('lastWeek')">Last week</a></dd>
-                <dd ng-class="{active: 'lastMonth'===txFilter}"><a ng-click="setHistoryFilter('lastMonth')">Last month</a></dd>-->
-                <dd ng-class="{active: 'all'===txFilter}"><a ng-click="setHistoryFilter('all')">All</a></dd>
             </dl>
 
           <div ng-if="txFilter=='weekly' || txFilter=='monthly'">
@@ -120,16 +117,13 @@
              </div>
             </div>
           </div>
-		  <div class="pagination-centered topmargin" ng-show="historyRows.length">
-		      <ul class="pagination">
-		          <li class="arrow unavailable"><a href="">&laquo;</a></li>
-		          <li class="current"><a href="">1</a></li>
-		          <li><a href="">2</a></li>
-		          <li class="unavailable"><a href="">&hellip;</a></li>
-		          <li><a href="">12</a></li>
-		          <li><a href="">13</a></li>
-		          <li class="arrow"><a href="">&raquo;</a></li>
-		      </ul>
+		  <div class="pagination-centered topmargin" ng-show="nPages>1">
+		    <ul class="pagination">
+		        <li ng-click="setPage(page-1, true)" ng-class="{unavailable:page==0}" class="arrow unavailable"><a href="">&laquo;</a></li>
+		        <li ng-click="setPage($index, true)" ng-repeat="n in range(nPages) track by $index" ng-class="{current: page==$index}"><a>{{$index+1}}</a></li>
+		        <!--<li class="unavailable"><a href="">&hellip;</a></li>-->
+		        <li ng-click="setPage(page+1, true)" ng-class="{unavailable:page==nPages-1}" class="arrow"><a href="">&raquo;</a></li>
+		    </ul>
 		  </div>
         </div>
     </div>

diff --git a/js/frontend/controllers/history.js b/js/frontend/controllers/history.js
@@ -13,7 +13,27 @@ function (controllers, DarkWallet, Port) {
 
   $scope.overviewPocket = false;
 
-  $scope.historyRows = $history.rows;
+  // pages
+  $scope.nPages = 0;
+  $scope.page = 0;
+  var limit = 10;
+
+  $scope.setPage = function(page, updatePage) {
+      if (updatePage) {
+          $scope.page = page;
+      }
+      $scope.historyRows = $scope.allHistoryRows.slice($scope.page*limit, ($scope.page*limit) + limit);
+  };
+
+
+  // Set current rows
+  var setHistoryRows = function(rows, updatePage) {
+      $scope.allHistoryRows = rows;
+      $scope.nPages = Math.ceil($scope.allHistoryRows.length/limit);
+      $scope.setPage(0, updatePage);
+  }
+
+  setHistoryRows($history.rows, true);
 
   $tabs.loadRoute($routeParams.section, $routeParams.pocketType, $routeParams.pocketId);
 
@@ -27,7 +47,7 @@ function (controllers, DarkWallet, Port) {
     var changed = $history.setCurrentPocket(type, idx, force);
     if (changed) {
         $scope.pocket = $history.getCurrentPocket();
-        $scope.historyRows = $history.rows;
+        setHistoryRows($history.rows, true);
         $scope.selectedPocket = $history.selectedPocket;
         $tabs.updateTabs($scope.pocket.type, $scope.pocket.tasks);
         // If the rename form is open we need to change the default shown there
@@ -91,7 +111,7 @@ function (controllers, DarkWallet, Port) {
       // Check on gui balance updates to recalculate pocket balance so it shows properly
       if (data.type == 'balance') {
           if ($history.isCurrentPocket(data.pocketId)) {
-              $scope.historyRows = $history.onBalanceUpdate();
+              setHistoryRows($history.onBalanceUpdate(), false);
               if (!$scope.$$phase) {
                   $scope.$apply();
               }
@@ -107,7 +127,7 @@ function (controllers, DarkWallet, Port) {
           identityLoaded();
 
           // update history rows shown
-          $scope.historyRows = $history.onBalanceUpdate();
+          setHistoryRows($history.onBalanceUpdate(), true);
       }
       else if (data.type == 'rename') {
           $history.previousIdentity = data.newName;
@@ -123,6 +143,9 @@ function (controllers, DarkWallet, Port) {
   };
 
 
+  /**
+   * Set overview information (for extra balance on the dashboard area header)
+   */
   $scope.setOverview = function(overview) {
       $scope.overviewPocket = overview;
   }
@@ -173,8 +196,10 @@ function (controllers, DarkWallet, Port) {
 
   // Set the history filter
   $scope.setHistoryFilter = function(name) {
-      $scope.txFilter = name;
-      $scope.historyRows = $history.setHistoryFilter(name);
+      if ($scope.txFilter !== name) {
+          $scope.txFilter = name;
+          setHistoryRows($history.setHistoryFilter(name), true);
+      }
   };
 
   $scope.historyFilter = function(row, shownRows) {

diff --git a/js/frontend/controllers/history_rows.js b/js/frontend/controllers/history_rows.js
@@ -0,0 +1,15 @@
+/**
+ * @fileOverview HistoryRowsCtrl angular controller
+ */
+'use strict';
+
+define(['./module'], function (controllers) {
+  controllers.controller('HistoryRowsCtrl', ['$scope', '$history', function($scope, $history) {
+
+  if (['last10'].indexOf($history.txFilter) > -1) {
+     $scope.setHistoryFilter('last');
+  }
+
+
+  }]);
+});
diff --git a/js/frontend/controllers/index.js b/js/frontend/controllers/index.js
@@ -13,6 +13,7 @@ define([
     './bitid',
     './contacts',
     './history',
+    './history_rows',
     './identities',
     './latest',
     './lobby',

diff --git a/js/frontend/controllers/latest.js b/js/frontend/controllers/latest.js
@@ -6,7 +6,7 @@
 define(['./module'], function (controllers) {
   controllers.controller('LatestCtrl', ['$scope', '$history', function($scope, $history) {
 
-  if (['daily', 'weekly', 'monthly'].indexOf($history.txFilter) > -1) {
+  if (['daily', 'weekly', 'monthly', 'last'].indexOf($history.txFilter) > -1) {
      $scope.setHistoryFilter('last10');
   }
 

diff --git a/js/frontend/providers/history.js b/js/frontend/providers/history.js
@@ -24,7 +24,7 @@ function (providers, BtcUtils, DarkWallet, MultisigFund) {
    */ 
   function HistoryProvider($scope, $wallet) {
       this.pocket = {index: undefined, name: 'All Pockets', mpk: undefined, addresses: $wallet.allAddresses, isAll: true, type: 'init', incoming: 0, outgoing: 0};
-      this.txFilter = 'last10';
+      this.txFilter = 'last';
       this.addrFilter = 'unused';
       this.$wallet = $wallet;
       this.rows = [];
@@ -469,22 +469,10 @@ function (providers, BtcUtils, DarkWallet, MultisigFund) {
           return true;
       }
       switch(this.txFilter) {
-          case 'all':
+          case 'last':
           case 'weekly':
           case 'monthly':
               return true;
-          case 'lastWeek':
-              var ts = BtcUtils.heightToTimestamp(row.height, blockDiff);
-              if (ts > prevweek.getTime()) {
-                  return true;
-              }
-              break;
-          case 'lastMonth':
-              var ts = BtcUtils.heightToTimestamp(row.height, blockDiff);
-              if (ts > prevmonth.getTime()) {
-                  return true;
-              }
-              break;
           case 'last10':
           default:
               if (shownRows.indexOf(row.hash) !== -1) {