Pagination: maxLoads

client/core/src/components/drop-down/drop-down.html

@@ -9,10 +9,10 @@
     <div class="dropdown">
         <div ng-show="$ctrl.showFilter" class="filter">
             <vn-textfield
-            model="$ctrl.search"
-            class="search"
-            ng-blur="$ctrl.onFocusOut()"
-            label = "Search">
+                model="$ctrl.search"
+                class="search"
+                ng-blur="$ctrl.onFocusOut()"
+                label = "Search">
             </vn-textfield>
         </div>
         <div class="list" tabindex="-1">

client/core/src/components/pagination/pagination.html

@@ -4,7 +4,7 @@
         ng-if="!$ctrl.model.isLoading"
         icon="more_horiz"
         vn-tooltip="Load more"
-        ng-click="$ctrl.model.loadMore()">
+        ng-click="$ctrl.onLoadClick()">
     </vn-icon-button>
     <vn-spinner
         ng-if="$ctrl.model.isLoading"

client/core/src/components/pagination/pagination.js

@@ -10,11 +10,14 @@ import './style.scss';
  * @property {String} scrollSelector The the scrollable element selector
  * @property {HTMLElement} scrollElement The scrollable element
  * @property {Number} scrollOffset The distance, in pixels, until the end that activates the loading of the next rows
+ * @property {Number} maxLoads The maximum of loads that are automatically performed on scroll, 0 for no limit
  */
 class Pagination extends Component {
     constructor($element, $scope) {
         super($element, $scope);
-        this.scrollOffset = 300;
+        this.scrollOffset = 500;
+        this.maxLoads = 5;
+        this.nLoads = 0;
         this.scrollHandler = e => this.onScroll(e);
     }
 
@@ -50,14 +53,23 @@ class Pagination extends Component {
         let scrollElement = this.scrollElement;
         let shouldLoad =
             scrollElement.scrollTop + scrollElement.clientHeight >= (scrollElement.scrollHeight - this.scrollOffset)
-            && !this.model.isLoading;
+            && !this.model.isLoading
+            && (this.maxLoads <= 0 || this.nLoads < this.maxLoads);
 
         if (shouldLoad) {
+            this.nLoads++;
             this.model.loadMore();
             this.$.$apply();
         }
     }
 
+    onLoadClick() {
+        if (this.maxLoads > 0 && this.nLoads == this.maxLoads)
+            this.nLoads = 0;
+
+        this.model.loadMore();
+    }
+
     $onDestroy() {
         this.scrollElement = null;
     }
@@ -69,7 +81,8 @@ ngModule.component('vnPagination', {
         model: '<',
         scrollSelector: '@?',
         scrollElement: '<?',
-        scrollOffset: '<?'
+        scrollOffset: '<?',
+        maxLoads: '<?'
     },
     controller: Pagination
 });

webpack.config.js

@@ -58,7 +58,10 @@ let baseConfig = {
             `${__dirname}/client`,
             __dirname,
             'node_modules'
-        ]
+        ],
+        alias: {
+            'vn-loopback': `${__dirname}/services/loopback`
+        }
     },
     plugins: [
         new webpack.optimize.CommonsChunkPlugin({