From 9449a778e915895f2b519c585e69b8ffc20c6685 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 22 Oct 2015 09:42:00 +0200
Subject: [PATCH] move list view pagination to directive

---
 .../components/umbpagination.directive.js     | 105 ++++++++++++++++++
 .../src/views/components/umb-pagination.html  |  26 +++++
 .../listview/listview.controller.js           |  66 ++---------
 .../propertyeditors/listview/listview.html    |   9 ++
 4 files changed, 149 insertions(+), 57 deletions(-)
 create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbpagination.directive.js
 create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html

diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpagination.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpagination.directive.js
new file mode 100644
index 0000000000..18dd616f75
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbpagination.directive.js
@@ -0,0 +1,105 @@
+(function() {
+   'use strict';
+
+   function PaginationDirective() {
+
+      function link(scope, el, attr, ctrl) {
+
+         function activate() {
+
+            scope.pagination = [];
+
+            var i = 0;
+
+            if (scope.totalPages <= 10) {
+                for (i = 0; i < scope.totalPages; i++) {
+                    scope.pagination.push({
+                        val: (i + 1),
+                        isActive: scope.pageNumber === (i + 1)
+                    });
+                }
+            }
+            else {
+                //if there is more than 10 pages, we need to do some fancy bits
+
+                //get the max index to start
+                var maxIndex = scope.totalPages - 10;
+                //set the start, but it can't be below zero
+                var start = Math.max(scope.pageNumber - 5, 0);
+                //ensure that it's not too far either
+                start = Math.min(maxIndex, start);
+
+                for (i = start; i < (10 + start) ; i++) {
+                    scope.pagination.push({
+                        val: (i + 1),
+                        isActive: scope.pageNumber === (i + 1)
+                    });
+                }
+
+                //now, if the start is greater than 0 then '1' will not be displayed, so do the elipses thing
+                if (start > 0) {
+                    scope.pagination.unshift({ name: "First", val: 1, isActive: false }, {val: "...",isActive: false});
+                }
+
+                //same for the end
+                if (start < maxIndex) {
+                    scope.pagination.push({ val: "...", isActive: false }, { name: "Last", val: scope.totalPages, isActive: false });
+                }
+            }
+
+         }
+
+         scope.next = function() {
+            if (scope.onNext && scope.pageNumber < scope.totalPages) {
+               scope.pageNumber++;
+               scope.onNext(scope.pageNumber);
+            }
+         };
+
+         scope.prev = function(pageNumber) {
+            if (scope.onPrev && scope.pageNumber > 1) {
+                scope.pageNumber--;
+                scope.onPrev(scope.pageNumber);
+            }
+         };
+
+         scope.goToPage = function(pageNumber) {
+            if(scope.onGoToPage) {
+               scope.pageNumber = pageNumber + 1;
+               scope.onGoToPage(scope.pageNumber);
+            }
+         };
+
+         var unbindPageNumberWatcher = scope.$watch('pageNumber', function(newValue, oldValue){
+            activate();
+         });
+
+         scope.$on('$destroy', function(){
+           unbindPageNumberWatcher();
+         });
+
+         activate();
+
+      }
+
+      var directive = {
+         restrict: 'E',
+         replace: true,
+         templateUrl: 'views/components/umb-pagination.html',
+         scope: {
+            pageNumber: "=",
+            totalPages: "=",
+            onNext: "=",
+            onPrev: "=",
+            onGoToPage: "="
+         },
+         link: link
+      };
+
+      return directive;
+
+   }
+
+   angular.module('umbraco.directives').directive('umbPagination', PaginationDirective);
+
+})();
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html
new file mode 100644
index 0000000000..9e4a1697a3
--- /dev/null
+++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-pagination.html
@@ -0,0 +1,26 @@
+<div class="pagination" ng-show="pagination.length > 1">
+
+   <ul>
+      <li ng-class="{disabled:pageNumber <= 1}">
+           <a href="#" ng-click="prev()" prevent-default>
+             <localize key="general_previous">Previous</localize>
+           </a>
+      </li>
+
+      <li ng-repeat="pgn in pagination"
+           ng-class="{active:pgn.isActive}">
+
+           <a href="#" ng-click="goToPage(pgn.val - 1)" prevent-default
+             ng-bind="pgn.name ? pgn.name : pgn.val"
+             ng-if="pgn.val != '...'"></a>
+           <span ng-bind="pgn.val" ng-if="pgn.val == '...'"></span>
+      </li>
+
+      <li ng-class="{disabled:pageNumber >= totalPages}">
+           <a href="#" ng-click="next()" prevent-default>
+             <localize key="general_next">Next</localize>
+           </a>
+      </li>
+   </ul>
+
+</div>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
index 4cb6a714cb..891c48c2b6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.controller.js
@@ -142,29 +142,20 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
         }
     }
 
-    $scope.next = function() {
-        if ($scope.options.pageNumber < $scope.listViewResultSet.totalPages) {
-            $scope.options.pageNumber++;
-            $scope.reloadView($scope.contentId);
-            //TODO: this would be nice but causes the whole view to reload
-            //$location.search("page", $scope.options.pageNumber);
-        }
+    $scope.next = function(pageNumber) {
+      $scope.options.pageNumber = pageNumber;
+      $scope.reloadView($scope.contentId);
     };
 
     $scope.goToPage = function(pageNumber) {
-        $scope.options.pageNumber = pageNumber + 1;
-        $scope.reloadView($scope.contentId);
-        //TODO: this would be nice but causes the whole view to reload
-        //$location.search("page", $scope.options.pageNumber);
+      $scope.options.pageNumber = pageNumber;
+      $scope.reloadView($scope.contentId);
     };
 
-    $scope.prev = function() {
-        if ($scope.options.pageNumber > 1) {
-            $scope.options.pageNumber--;
-            $scope.reloadView($scope.contentId);
-            //TODO: this would be nice but causes the whole view to reload
-            //$location.search("page", $scope.options.pageNumber);
-        }
+    $scope.prev = function(pageNumber) {
+      console.log(pageNumber);
+      $scope.options.pageNumber = pageNumber;
+      $scope.reloadView($scope.contentId);
     };
 
 
@@ -208,45 +199,6 @@ function listViewController($rootScope, $scope, $routeParams, $injector, notific
                 $scope.reloadView(id);
             }
 
-            $scope.pagination = [];
-
-            //list 10 pages as per normal
-            if ($scope.listViewResultSet.totalPages <= 10) {
-                for (var i = 0; i < $scope.listViewResultSet.totalPages; i++) {
-                    $scope.pagination.push({
-                        val: (i + 1),
-                        isActive: $scope.options.pageNumber == (i + 1)
-                    });
-                }
-            }
-            else {
-                //if there is more than 10 pages, we need to do some fancy bits
-
-                //get the max index to start
-                var maxIndex = $scope.listViewResultSet.totalPages - 10;
-                //set the start, but it can't be below zero
-                var start = Math.max($scope.options.pageNumber - 5, 0);
-                //ensure that it's not too far either
-                start = Math.min(maxIndex, start);
-
-                for (var i = start; i < (10 + start) ; i++) {
-                    $scope.pagination.push({
-                        val: (i + 1),
-                        isActive: $scope.options.pageNumber == (i + 1)
-                    });
-                }
-
-                //now, if the start is greater than 0 then '1' will not be displayed, so do the elipses thing
-                if (start > 0) {
-                    $scope.pagination.unshift({ name: "First", val: 1, isActive: false }, {val: "...",isActive: false});
-                }
-
-                //same for the end
-                if (start < maxIndex) {
-                    $scope.pagination.push({ val: "...", isActive: false }, { name: "Last", val: $scope.listViewResultSet.totalPages, isActive: false });
-                }
-            }
-
         });
     };
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
index 294a24c3d0..af30ffcdcf 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html
@@ -122,6 +122,15 @@
 
         <div ng-include="options.layout.activeLayout.path"></div>
 
+      <umb-pagination
+         ng-if="listViewResultSet.totalPages"
+         page-number="options.pageNumber"
+         total-pages="listViewResultSet.totalPages"
+         on-next="next"
+         on-prev="prev"
+         on-go-to-page="goToPage">
+      </umb-pagination>
+
         <div class="pagination" ng-show="pagination.length > 1">
 
            <ul>