Merge pull request matomo-org#1 from anitawlosek/sites_list_pagination

Added pagination of sites list in plugin SitesManager
mkurzeja · Aug 4, 2014 · 4b3c631 · 4b3c631
2 parents 84b0c35 + 6295edb
commit 4b3c631
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 2 deletions.
diff --git a/plugins/SitesManager/SitesManager.php b/plugins/SitesManager/SitesManager.php
@@ -36,6 +36,7 @@ public function getListHooksRegistered()
     public function getStylesheetFiles(&$stylesheets)
     {
         $stylesheets[] = "plugins/SitesManager/stylesheets/SitesManager.less";
+        $stylesheets[] = "plugins/SitesManager/stylesheets/PaginationSitesList.less";
         $stylesheets[] = "plugins/Morpheus/stylesheets/base.less";
     }
 

diff --git a/plugins/SitesManager/javascripts/sites-manager-controller.js b/plugins/SitesManager/javascripts/sites-manager-controller.js
@@ -170,8 +170,14 @@ angular.module('piwikApp').controller('SitesManagerController', function ($scope
 
     var addSite = function() {
         $scope.sites.push({});
+
+        goToLastPage();
     };
 
+    var goToLastPage = function() {
+        $scope.currentPage = $scope.pageCount();
+    }
+
     var saveGlobalSettings = function() {
 
         var ajaxHandler = new ajaxHelper();
@@ -221,6 +227,7 @@ angular.module('piwikApp').controller('SitesManagerController', function ($scope
                 $scope.sites.push(site);
             });
 
+            paginateSitesList();
             hideLoading();
         });
     };
@@ -240,5 +247,50 @@ angular.module('piwikApp').controller('SitesManagerController', function ($scope
         $scope.loading = false;
     };
 
+    var paginateSitesList = function() {
+        $scope.sitesPerPage = 5;
+        $scope.currentPage = 0;
+        $scope.pages = [];
+
+        $scope.setPage = function(pageNr) {
+            $scope.currentPage = pageNr;
+        }
+
+        $scope.prevPage = function() {
+            if ($scope.currentPage > 0) {
+                $scope.currentPage--;
+            }
+        };
+
+        $scope.prevPageDisabled = function() {
+            return $scope.currentPage === 0 ? "disabled" : "";
+        };
+
+        $scope.pageCount = function() {
+            return Math.ceil($scope.sites.length/$scope.sitesPerPage)-1;
+        };
+
+        $scope.nextPage = function() {
+            if ($scope.currentPage < $scope.pageCount()) {
+                $scope.currentPage++;
+            }
+        };
+
+        $scope.nextPageDisabled = function() {
+            return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
+        };
+
+        for(var i=0; i<=$scope.pageCount(); i++){
+            $scope.pages[i] = i;
+        }
+    }
+
     init();
 });
+
+angular.module('piwikApp').filter('offset', function() {
+    return function(input, start) {
+        start = parseInt(start, 10);
+        return input.slice(start);
+    };
+});
diff --git a/plugins/SitesManager/javascripts/sites-manager-recipes.js b/plugins/SitesManager/javascripts/sites-manager-recipes.js
@@ -64,8 +64,13 @@ angular.module('piwikApp').factory('sitesManagerApiHelper', function SitesManage
 
         commaDelimitedFieldToArray: function(value) {
 
-            if(value == null || value == '')
+            if(value == null || value == ''){
                 return [];
+            }
+
+            if(value instanceof Array){
+                return value;
+            }
 
             return value.split(',');
         },

diff --git a/plugins/SitesManager/stylesheets/PaginationSitesList.less b/plugins/SitesManager/stylesheets/PaginationSitesList.less
@@ -0,0 +1,7 @@
+.pagination ul{
+  text-align: center;
+}
+
+.pagination ul li{
+  display: inline;
+}
diff --git a/plugins/SitesManager/templates/sites-list/sites-list.html b/plugins/SitesManager/templates/sites-list/sites-list.html
@@ -28,10 +28,30 @@
             <tr
                     sites-manager-scroll
                     ng-controller="SitesManagerSiteController"
-                    ng-repeat="site in sites"
+                    ng-repeat="site in sites |
+                        offset: currentPage*sitesPerPage |
+                        limitTo: sitesPerPage"
                     ng-include="'plugins/SitesManager/templates/sites-list/site-fields.html'">
             </tr>
         </tbody>
+        <tfoot>
+        <td colspan="13">
+            <div class="pagination">
+                <ul>
+                    <li ng-class="prevPageDisabled()">
+                        <a href ng-click="prevPage()">« Prev</a>
+                    </li>
+                    <li ng-repeat="pageNr in pages"
+                        ng-class="{active: pageNr == currentPage}" ng-click="setPage(pageNr)">
+                        <a href="#">{{pageNr+1}}</a>
+                    </li>
+                    <li ng-class="nextPageDisabled()">
+                        <a href ng-click="nextPage()">Next »</a>
+                    </li>
+                </ul>
+            </div>
+        </td>
+        </tfoot>
     </table>
 
     <div ng-include="'plugins/SitesManager/templates/sites-list/add-site-link.html'"></div>