New: Queue in UI is now paged

src/UI/History/Queue/QueueCollection.js

@@ -3,13 +3,20 @@ define(
     [
         'underscore',
         'backbone',
+        'backbone.pageable',
         'History/Queue/QueueModel',
         'Mixins/backbone.signalr.mixin'
-    ], function (_, Backbone, QueueModel) {
+    ], function (_, Backbone, PageableCollection, QueueModel) {
-        var QueueCollection = Backbone.Collection.extend({
+        var QueueCollection = PageableCollection.extend({
             url  : window.NzbDrone.ApiRoot + '/queue',
             model: QueueModel,
 
+            state: {
+                pageSize: 15
+            },
+
+            mode: 'client',
+
             findEpisode: function (episodeId) {
                 return _.find(this.models, function (queueModel) {
                     return queueModel.get('episode').id === episodeId;

src/UI/History/Queue/QueueLayout.js

@@ -9,7 +9,8 @@ define(
         'Cells/EpisodeTitleCell',
         'Cells/QualityCell',
         'History/Queue/QueueStatusCell',
-        'History/Queue/TimeleftCell'
+        'History/Queue/TimeleftCell',
+        'Shared/Grid/Pager'
     ], function (Marionette,
                  Backgrid,
                  QueueCollection,
@@ -18,12 +19,14 @@ define(
                  EpisodeTitleCell,
                  QualityCell,
                  QueueStatusCell,
-                 TimeleftCell) {
+                 TimeleftCell,
+                 GridPager) {
         return Marionette.Layout.extend({
             template: 'History/Queue/QueueLayoutTemplate',
 
             regions: {
-                table: '#x-queue'
+                table: '#x-queue',
+                pager: '#x-queue-pager'
             },
 
             columns:
@@ -65,7 +68,6 @@ define(
                     }
                 ],
 
-
             initialize: function () {
                 this.listenTo(QueueCollection, 'sync', this._showTable);
             },
@@ -80,6 +82,11 @@ define(
                     collection: QueueCollection,
                     className : 'table table-hover'
                 }));
+
+                this.pager.show(new GridPager({
+                    columns   : this.columns,
+                    collection: QueueCollection
+                }));
             }
         });
     });

src/UI/History/Queue/QueueLayoutTemplate.html

@@ -3,3 +3,9 @@
         <div id="x-queue"/>
     </div>
 </div>
+
+<div class="row">
+    <div class="span12">
+        <div id="x-queue-pager"/>
+    </div>
+</div>

src/UI/History/Table/HistoryTableLayout.js

@@ -79,7 +79,6 @@ define(
                     }
                 ],
 
-
             initialize: function () {
                 this.collection = new HistoryCollection({ tableName: 'history' });
                 this.listenTo(this.collection, 'sync', this._showTable);
@@ -104,6 +103,5 @@ define(
                 this.history.show(new LoadingView());
                 this.collection.fetch();
             }
-
         });
     });