feat(account): dashboard boxes pagination (#475)

* feat(account): dashboard boxes pagination

Add pagination controls to dashboard to paginate through boxes

* Change handling default value for parameter

* Map and replace Box model

* Disable next page button

* Add simple label with items per page

Author: mpfeil

app/scripts/controllers/account.dashboard.js

@@ -13,14 +13,18 @@
     var localStorageOrderByKey = 'osem.dashboard.orderBy';
 
     vm.boxes = [];
+    vm.boxes_count = 0;
     vm.listStyle = 'tiles';
     vm.orderByProperty = 'createdAt';
+    vm.page = 0;
     vm.claimToken = '';
     vm.claimPattern = /^[a-z0-9]*$/;
     vm.errorMessage = '';
 
     vm.claimDevice = claimDevice;
     vm.closeAlert = closeAlert;
+    vm.nextPage = nextPage;
+    vm.previousPage = previousPage;
 
     activate();
 
@@ -47,9 +51,10 @@
     function getUsersBoxes () {
       vm.boxes = [];
 
-      return AccountService.getUsersBoxes()
-        .then(function (boxes) {
-          vm.boxes = boxes;
+      return AccountService.getUsersBoxes(vm.page)
+        .then(function (response) {
+          vm.boxes = response.data.boxes;
+          vm.boxes_count = response.data.boxes_count;
         });
     }
 
@@ -81,12 +86,24 @@
       vm.errorMessage = '';
     }
 
+    function nextPage () {
+      vm.page = vm.page + 1;
+    }
+
+    function previousPage () {
+      vm.page = vm.page - 1;
+    }
+
     $scope.$watch('dashboard.listStyle', function (value) {
       LocalStorageService.setValue(localStorageKey, value);
     });
 
     $scope.$watch('dashboard.orderByProperty', function (value) {
       LocalStorageService.setValue(localStorageOrderByKey, value);
     });
+
+    $scope.$watch('dashboard.page', function () {
+      return getUsersBoxes();
+    });
   }
 })();

app/scripts/services/account.js

@@ -134,15 +134,22 @@
       }
     }
 
-    function getUsersBoxes () {
-      return $http.get(app.API_URL + '/users/me/boxes', { auth: true })
+    function getUsersBoxes (page) {
+
+      page = (page === undefined) ? 0 : page;
+
+      return $http.get(app.API_URL + '/users/me/boxes' + '?page=' + page, { auth: true })
         .then(getUsersBoxesComplete)
         .catch(getUsersBoxesFailed);
 
       function getUsersBoxesComplete (response) {
-        return response.data.data.boxes.map(function (b) {
+        // Map response to Box model and replace it in response
+        const boxes = response.data.data.boxes.map(function (b) {
           return new Box(b);
         });
+        response.data.data.boxes = boxes;
+
+        return response.data;
       }
 
       function getUsersBoxesFailed (error) {

app/views/account.dashboard.html

@@ -4,7 +4,7 @@
     <div class="col-lg-6 col-sm-12 col-md-12" style="margin-bottom: 30px;">
       <div class="thumbnail" style="height: 100%;">
         <div class="caption">
-          <h3 translate="REGISTERED_BOXES" translate-values="{count: dashboard.boxes.length}"></h3>
+          <h3 translate="REGISTERED_BOXES" translate-values="{count: dashboard.boxes_count}"></h3>
           <p>{{'REGISTERED_BOXES_INFO' | translate}}</p>
           <p>
             <a ui-sref="account.register" class="btn btn-primary"
@@ -66,6 +66,18 @@ <h3>{{'CLAIM_HEADER' | translate}}</h3>
           <i class="fa fa-sort-numeric-asc" aria-hidden="true"></i>
         </button>
       </div>
+
+      <div class="btn-group pull-right" style="margin-right: 15px;">
+        <button class="btn btn-default" ng-click="dashboard.previousPage()" ng-disabled="dashboard.page <= 0" title="Previous page">
+          <i class="fa fa-angle-left" aria-hidden="true"></i>
+        </button>
+        <button class="btn btn-default" ng-click="dashboard.nextPage()" ng-disabled="dashboard.boxes_count === 25 || (dashboard.boxes_count >= 25 && dashboard.boxes.length < 25)"  title="Next page">
+          <i class="fa fa-angle-right" aria-hidden="true"></i>
+        </button>
+      </div>
+      <div class="pull-right" style="margin-right: 15px; height: 34px;">
+        <span class="label label-default" style="line-height: 34px; vertical-align: middle;">Devices per page: 25</span>
+      </div>
     </div>
   </div>