New: Filter visible series on season pass

New: Filter visible series on series editor

src/UI/SeasonPass/SeasonPassLayout.js

@@ -5,29 +5,93 @@ define(
         'Series/SeriesCollection',
         'Series/SeasonCollection',
         'SeasonPass/SeriesCollectionView',
-        'Shared/LoadingView'
+        'Shared/LoadingView',
+        'Shared/Toolbar/ToolbarLayout',
+        'Mixins/backbone.signalr.mixin'
     ], function (Marionette,
                  SeriesCollection,
                  SeasonCollection,
                  SeriesCollectionView,
-                 LoadingView) {
+                 LoadingView,
+                 ToolbarLayout) {
         return Marionette.Layout.extend({
             template: 'SeasonPass/SeasonPassLayoutTemplate',
 
             regions: {
+                toolbar : '#x-toolbar',
                 series  : '#x-series'
             },
 
-            onShow: function () {
+            initialize: function () {
-                var self = this;
 
-                this.series.show(new LoadingView());
+                this.seriesCollection = SeriesCollection.clone();
+                this.seriesCollection.shadowCollection.bindSignalR();
 
-                this.seriesCollection = SeriesCollection;
+                this.listenTo(this.seriesCollection, 'sync', this.render);
 
-                self.series.show(new SeriesCollectionView({
+                this.filteringOptions = {
-                    collection: self.seriesCollection
+                    type         : 'radio',
+                    storeState   : true,
+                    menuKey      : 'seasonpass.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
+                            }
+                        ]
+                };
+            },
+
+            onRender: function () {
+
+                this.series.show(new SeriesCollectionView({
+                    collection: this.seriesCollection
                 }));
+
+                this._showToolbar();
+            },
+
+            _showToolbar: function () {
+
+                this.toolbar.show(new ToolbarLayout({
+                    right  :
+                        [
+                            this.filteringOptions
+                        ],
+                    context: this
+                }));
+            },
+
+            _setFilter: function(buttonContext) {
+                var mode = buttonContext.model.get('key');
+
+                this.seriesCollection.setFilterMode(mode);
             }
         });
     });

src/UI/SeasonPass/SeasonPassLayoutTemplate.html

@@ -1,4 +1,6 @@
-<div class="row">
+<div id="x-toolbar"></div>
+
+<div class="row">
     <div class="col-md-12">
         <div class="alert alert-info">Season Pass allows you to quickly change the monitored status of seasons for all your series in one place</div>
     </div>

src/UI/SeasonPass/SeriesLayoutTemplate.html

@@ -3,14 +3,14 @@
         <div class="col-md-12">
             <i class="icon-chevron-right x-expander expander pull-left"/>
             <i class="x-series-monitored series-monitor-toggle pull-left" title="Toggle monitored state for entire series"/>
-            <span class="title col-md-5">
+            <div class="title col-md-5">
                 <a href="{{route}}">
                     {{title}}
                 </a>
-            </span>
+            </div>
 
-            <span class="col-md-3">
+            <div class="col-md-2">
-                <select class="x-season-select season-select">
+                <select class="form-control x-season-select season-select">
                     <option value="-1">Select season...</option>
                     {{#each seasons}}
                         {{#if_eq seasonNumber compare="0"}}
@@ -20,11 +20,13 @@
                         {{/if_eq}}
                     {{/each}}
                 </select>
+            </div>
 
+            <div class="col-md-1">
                 <span class="help-inline">
                     <i class="icon-nd-form-info" title="Selecting a season will unmonitor all previous seasons"/>
                 </span>
-            </span>
+            </div>
 
             <span class="season-pass-button">
                 <button class="btn x-latest last">Latest Season Only</button>

src/UI/Series/Editor/SeriesEditorFooterView.js

@@ -5,7 +5,6 @@ define(
         'marionette',
         'backgrid',
         'vent',
-        'Series/SeriesCollection',
         'Quality/QualityProfileCollection',
         'AddSeries/RootFolders/RootFolderCollection',
         'Shared/Toolbar/ToolbarLayout',
@@ -16,7 +15,6 @@ define(
                  Marionette,
                  Backgrid,
                  vent,
-                 SeriesCollection,
                  QualityProfiles,
                  RootFolders,
                  ToolbarLayout,
@@ -51,12 +49,14 @@ define(
             },
 
             initialize: function (options) {
+                this.seriesCollection = options.collection;
+
                 RootFolders.fetch().done(function () {
                     RootFolders.synced = true;
                 });
 
                 this.editorGrid = options.editorGrid;
-                this.listenTo(SeriesCollection, 'backgrid:selected', this._updateInfo);
+                this.listenTo(this.seriesCollection, 'backgrid:selected', this._updateInfo);
                 this.listenTo(RootFolders, 'all', this.render);
             },
 
@@ -102,9 +102,7 @@ define(
                     model.edited = true;
                 });
 
-                SeriesCollection.save();
+                this.seriesCollection.save();
-
-                this.listenTo(SeriesCollection, 'save', this._afterSave);
             },
 
             _updateInfo: function () {
@@ -150,18 +148,6 @@ define(
                 this._rootFolderChanged();
             },
 
-            _afterSave: function () {
-                this.ui.monitored.val('noChange');
-                this.ui.qualityProfile.val('noChange');
-                this.ui.seasonFolder.val('noChange');
-                this.ui.rootFolder.val('noChange');
-
-                SeriesCollection.each(function (model) {
-                    model.trigger('backgrid:select', model, false);
-                    model.edited = false;
-                });
-            },
-
             _organizeFiles: function () {
                 var selected = this.editorGrid.getSelectedModels();
                 var updateFilesSeriesView = new UpdateFilesSeriesView({ series: selected });

src/UI/Series/Editor/SeriesEditorLayout.js

@@ -11,7 +11,8 @@ define(
         'Cells/SeriesStatusCell',
         'Cells/SeasonFolderCell',
         'Shared/Toolbar/ToolbarLayout',
-        'Series/Editor/SeriesEditorFooterView'
+        'Series/Editor/SeriesEditorFooterView',
+        'Mixins/backbone.signalr.mixin'
     ], function (vent,
                  Marionette,
                  Backgrid,
@@ -99,11 +100,54 @@ define(
                     ]
             },
 
+            initialize: function () {
+
+                this.seriesCollection = SeriesCollection.clone();
+                this.seriesCollection.shadowCollection.bindSignalR();
+                this.listenTo(this.seriesCollection, 'save', this.render);
+
+                this.filteringOptions = {
+                    type         : 'radio',
+                    storeState   : true,
+                    menuKey      : 'serieseditor.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
+                            }
+                        ]
+                };
+            },
+
             onRender: function () {
                 this._showToolbar();
                 this._showTable();
-
-                this._fetchCollection();
             },
 
             onClose: function () {
@@ -111,14 +155,14 @@ define(
             },
 
             _showTable: function () {
-                if (SeriesCollection.length === 0) {
+                if (this.seriesCollection.shadowCollection.length === 0) {
                     this.seriesRegion.show(new EmptyView());
                     this.toolbar.close();
                     return;
                 }
 
                 this.editorGrid = new Backgrid.Grid({
-                    collection: SeriesCollection,
+                    collection: this.seriesCollection,
                     columns   : this.columns,
                     className : 'table table-hover'
                 });
@@ -127,22 +171,28 @@ define(
                 this._showFooter();
             },
 
-            _fetchCollection: function () {
-                SeriesCollection.fetch();
-            },
-
             _showToolbar: function () {
                 this.toolbar.show(new ToolbarLayout({
                     left   :
                         [
                             this.leftSideButtons
                         ],
+                    right  :
+                        [
+                           this.filteringOptions
+                        ],
                     context: this
                 }));
             },
 
             _showFooter: function () {
-                vent.trigger(vent.Commands.OpenControlPanelCommand, new FooterView({ editorGrid: this.editorGrid }));
+                vent.trigger(vent.Commands.OpenControlPanelCommand, new FooterView({ editorGrid: this.editorGrid, collection: this.seriesCollection }));
+            },
+
+            _setFilter: function(buttonContext) {
+                var mode = buttonContext.model.get('key');
+
+                this.seriesCollection.setFilterMode(mode);
             }
         });
     });

src/UI/Series/series.less

@@ -333,14 +333,7 @@
   .season-grid {
     margin-top : 10px;
   }
-}
-
-.season-status {
-  font-size      : 16px;
-  vertical-align : middle !important;
-}
 
-.seasonpass-series {
   .season-pass-button {
     display : inline-block;
   }
@@ -349,6 +342,16 @@
     font-size  : 24px;
     margin-top : 3px;
   }
+
+  .help-inline {
+    margin-top : 7px;
+    display    : inline-block;
+  }
+}
+
+.season-status {
+  font-size      : 16px;
+  vertical-align : middle !important;
 }
 
 //Overview List