Series Index can now be filtered and no longer fetches twice when starting.

src/UI/Mixins/AsFilteredCollection.js

@@ -0,0 +1,78 @@
+'use strict';
+
+define(
+    [
+        'underscore',
+        'backbone'],
+    function (_, Backbone) {
+
+        return function () {
+
+            this.prototype.setFilter = function(filter, options) {
+                options = _.extend({ reset: true }, options || {});
+
+                this.state.filterKey = filter[0];
+                this.state.filterValue = filter[1];
+
+                if (options.reset) {
+                    if (this.mode != 'server') {
+                        this.fullCollection.resetFiltered();
+                    } else {
+                        return this.fetch();
+                    }
+                }
+            };
+            
+            this.prototype.setFilterMode = function(mode, options) {
+                this.setFilter(this.filterModes[mode], options);
+            };
+
+            var originalMakeFullCollection = this.prototype._makeFullCollection;
+
+            this.prototype._makeFullCollection = function (models, options) {
+                var self = this;
+
+                self.shadowCollection = originalMakeFullCollection.apply(this, [models, options]);
+                
+                var filterModel = function(model) {
+                    if (!self.state.filterKey || !self.state.filterValue)
+                        return true;
+                    else
+                        return model.get(self.state.filterKey) === self.state.filterValue;
+                };
+
+                self.shadowCollection.filtered = function() {
+                    return this.filter(filterModel);
+                };
+
+                var filteredModels = self.shadowCollection.filtered();
+                
+                var fullCollection = originalMakeFullCollection.apply(this, [filteredModels, options]);
+
+
+                fullCollection.resetFiltered = function(options) {
+                    Backbone.Collection.prototype.reset.apply(this, [self.shadowCollection.filtered(), options]);
+                };
+                
+                fullCollection.reset = function (models, options) {
+                    self.shadowCollection.reset(models, options);
+                    self.fullCollection.resetFiltered();
+                };
+
+                return fullCollection;
+            };
+
+            _.extend(this.prototype.state, {
+                filterKey   : null,
+                filterValue : null
+            });
+
+            _.extend(this.prototype.queryParams, {
+                filterKey   : 'filterKey',
+                filterValue : 'filterValue'
+            });
+
+            return this;
+        };
+    }
+);

src/UI/Mixins/AsPersistedStateCollection.js

@@ -63,22 +63,19 @@ define(
                 return '1';
             };
             
-            _.extend(this.prototype, {
+            var originalMakeComparator = this.prototype._makeComparator;
-                initialSort: function () {
+            this.prototype._makeComparator = function (sortKey, order, sortValue) {
-                    var key = this.state.sortKey;
+                var state = this.state;
-                    var order = this.state.order;
 
-                    if (this[key] && this.mode === 'client') {
+                sortKey = sortKey || state.sortKey;
-                        var sortValue = this[key];
+                order = order || state.order;
 
-                        this.setSorting(key, order, { sortValue: sortValue });
+                if (!sortKey || !order) return;
                 
-                        var comparator = this._makeComparator(key, order, sortValue);
+                if (!sortValue && this[sortKey]) sortValue = this[sortKey];
-                        this.fullCollection.comparator = comparator;
+                
-                        this.fullCollection.sort();
+                return originalMakeComparator.call(this, sortKey, order, sortValue);
-                    }
+            };
-                }
-            });
 
             return this;
         };

src/UI/Series/Index/SeriesIndexLayout.js

@@ -167,6 +167,44 @@ define(
                 this.listenTo(SeriesCollection, 'sync', this._renderView);
                 this.listenTo(SeriesCollection, 'remove', this._renderView);
 
+                this.filteringOptions = {
+                    type         : 'radio',
+                    storeState   : true,
+                    menuKey      : 'series.filterMode',
+                    defaultAction: 'all',
+                    items        :
+                        [
+                            {
+                                key     : 'all',
+                                title   : '',
+                                tooltip : 'All',
+                                icon    : 'icon-circle-blank',
+                                callback: this._setFilter
+                            },
+                            {
+                                key     : 'monitored',
+                                title   : '',
+                                tooltip : 'Monitored Only',
+                                icon    : 'icon-nd-monitored',
+                                callback: this._setFilter
+                            },
+                            {
+                                key     : 'continuing',
+                                title   : '',
+                                tooltip : 'Continuing Only',
+                                icon    : 'icon-play',
+                                callback: this._setFilter
+                            },
+                            {
+                                key     : 'ended',
+                                title   : '',
+                                tooltip : 'Ended Only',
+                                icon    : 'icon-stop',
+                                callback: this._setFilter
+                            }
+                        ]
+                };
+
                 this.viewButtons = {
                     type         : 'radio',
                     storeState   : true,
@@ -201,24 +239,28 @@ define(
 
             _showTable: function () {
                 this.currentView = new Backgrid.Grid({
-                    collection: SeriesCollection,
+                    collection: this.seriesCollection,
                     columns   : this.columns,
                     className : 'table table-hover'
                 });
 
-                this._fetchCollection();
+                this._renderView();
             },
 
             _showList: function () {
-                this.currentView = new ListCollectionView({ collection: SeriesCollection });
+                this.currentView = new ListCollectionView({ 
+                    collection: this.seriesCollection
+                });
 
-                this._fetchCollection();
+                this._renderView();
             },
 
             _showPosters: function () {
-                this.currentView = new PosterCollectionView({ collection: SeriesCollection });
+                this.currentView = new PosterCollectionView({
+                    collection: this.seriesCollection
+                });
 
-                this._fetchCollection();
+                this._renderView();
             },
             
             _renderView: function () {
@@ -238,10 +280,17 @@ define(
             onShow: function () {
                 this._showToolbar();
                 this._renderView();
+                this._fetchCollection();
             },
 
             _fetchCollection: function () {
-                SeriesCollection.fetch();
+                this.seriesCollection.fetch();
+            },
+
+            _setFilter: function(buttonContext) {
+                var mode = buttonContext.model.get('key');
+
+                this.seriesCollection.setFilterMode(mode);
             },
 
             _showToolbar: function () {
@@ -251,11 +300,11 @@ define(
                 }
 
                 var rightButtons = [
+                    this.sortingOptions,
+                    this.filteringOptions,
                     this.viewButtons
                 ];
 
-                rightButtons.splice(0, 0, this.sortingOptions);
-
                 this.toolbar.show(new ToolbarLayout({
                     right  : rightButtons,
                     left   :

src/UI/Series/SeriesCollection.js

@@ -6,9 +6,10 @@ define(
         'backbone.pageable',
         'Series/SeriesModel',
         'api!series',
+        'Mixins/AsFilteredCollection',
         'Mixins/AsPersistedStateCollection',
         'moment'
-    ], function (_, Backbone, PageableCollection, SeriesModel, SeriesData, AsPersistedStateCollection, Moment) {
+    ], function (_, Backbone, PageableCollection, SeriesModel, SeriesData, AsFilteredCollection, AsPersistedStateCollection, Moment) {
         var Collection = PageableCollection.extend({
             url  : window.NzbDrone.ApiRoot + '/series',
             model: SeriesModel,
@@ -47,6 +48,14 @@ define(
                 return proxy.save();
             },
 
+            // Filter Modes
+            filterModes: {
+                'all'        : [null, null],
+                'continuing' : ['status', 'continuing'],
+                'ended'      : ['status', 'ended'],
+                'monitored'  : ['monitored', true]
+            },
+            
             //Sorters
             nextAiring: function (model, attr) {
                 var nextAiring = model.get(attr);
@@ -59,9 +68,9 @@ define(
             }
         });
 
-        var MixedIn = AsPersistedStateCollection.call(Collection);
+        var FilteredCollection = AsFilteredCollection.call(Collection);
-        var collection = new MixedIn(SeriesData);
+        var MixedIn = AsPersistedStateCollection.call(FilteredCollection);
-        collection.initialSort();
+        var collection = new MixedIn(SeriesData, { full: true });
 
         return collection;
     });

src/UI/Shared/Toolbar/Radio/RadioButtonView.js

@@ -9,6 +9,10 @@ define(
             template : 'Shared/Toolbar/ButtonTemplate',
             className: 'btn',
 
+            ui: {
+                icon: 'i'
+            },
+
             events: {
                 'click': 'onClick'
             },
@@ -49,7 +53,7 @@ define(
 
                 var callback = this.model.get('callback');
                 if (callback) {
-                    callback.call(this.model.ownerContext);
+                    callback.call(this.model.ownerContext, this);
                 }
             }
         });

src/UI/Shared/Toolbar/ToolbarLayout.js

@@ -12,11 +12,9 @@ define(
         return Marionette.Layout.extend({
             template: 'Shared/Toolbar/ToolbarLayoutTemplate',
 
-            regions: {
+            ui: {
-                left_1 : '.x-toolbar-left-1',
+                left_x : '.x-toolbar-left',
-                left_2 : '.x-toolbar-left-2',
+                right_x: '.x-toolbar-right'
-                right_1: '.x-toolbar-right-1',
-                right_2: '.x-toolbar-right-2'
             },
 
             initialize: function (options) {
@@ -98,7 +96,16 @@ define(
                     }
                 }
                 
-                this[position + '_' + (index + 1).toString()].show(buttonGroupView);
+                var regionId = position + "_" + (index + 1);                
+                var region = this[regionId];
+                                
+                if (!region) {
+                    var regionClassName = "x-toolbar-" + position + "-" + (index + 1);
+                    this.ui[position + '_x'].append('<div class="toolbar-group '+regionClassName+'" />\r\n');                
+                    region = this.addRegion(regionId, "." + regionClassName);
+                }
+                
+                region.show(buttonGroupView);
             }
         });
     });

src/UI/Shared/Toolbar/ToolbarLayoutTemplate.html

@@ -1,8 +1,2 @@
-<div class="pull-left page-toolbar">
+<div class="pull-left page-toolbar x-toolbar-left" />
-    <div class="toolbar-group x-toolbar-left-1"/>
+<div class="pull-right page-toolbar x-toolbar-right" />
-    <div class="toolbar-group x-toolbar-left-2"/>
-</div>
-<div class="pull-right page-toolbar">
-    <div class="toolbar-group x-toolbar-right-1"/>
-    <div class="toolbar-group x-toolbar-right-2"/>
-</div>