updating add existing series to use the common views.

UI/AddSeries/AddSeriesTemplate.html

@@ -1,5 +1,5 @@
 <div class="row">
-    <div class="input-prepend nz-input-large add-series-search span11">
+    <div class="input-prepend nz-input-large add-series-search span11 x-search-bar">
         <i class="add-on icon-search"/>
         <input type="text" class="input-block-level x-series-search" placeholder="Start typing the name of series you want to add ...">
     </div>
@@ -7,3 +7,6 @@
 <div class="row">
     <div id="search-result" class="result-list span12"/>
 </div>
+<div class="text-center new-series-loadmore x-load-more" style="display: none;">
+    <i class="icon-angle-down"/> more
+</div>

UI/AddSeries/AddSeriesView.js

@@ -14,15 +14,18 @@ define(
             template: 'AddSeries/AddSeriesTemplate',
 
             ui: {
-                seriesSearch: '.x-series-search'
+                seriesSearch: '.x-series-search',
+                searchBar   : '.x-search-bar',
+                loadMore    : '.x-load-more'
             },
 
             regions: {
                 searchResult: '#search-result'
             },
 
-            initialize: function () {
+            initialize: function (options) {
                 this.collection = new AddSeriesCollection();
+                this.isExisting = options.isExisting;
             },
 
             onRender: function () {
@@ -30,31 +33,45 @@ define(
 
                 this.ui.seriesSearch.data('timeout', null).keyup(function () {
                     window.clearTimeout(self.$el.data('timeout'));
-                    self.$el.data('timeout', window.setTimeout(self.search, 500, self));
+                    self.$el.data('timeout', window.setTimeout(function () {
+                        self.search.call(self, {
+                            term: self.ui.seriesSearch.val()
+                        });
+                    }, 500));
                 });
 
-                this.resultView = new SearchResultCollectionView({ collection: this.collection });
+                if (this.isExisting) {
+                    this.ui.searchBar.hide();
+                }
+
+                this.resultView = new SearchResultCollectionView({
+                    fullResult: this.collection,
+                    isExisting: this.isExisting
+                });
             },
 
-            search: function (context) {
+            search: function (options) {
+
+                var self = this;
 
-                context.abortExistingRequest();
+                this.abortExistingRequest();
 
-                var term = context.ui.seriesSearch.val();
-                context.collection.reset();
+                this.collection.reset();
 
-                if (term === '') {
-                    context.searchResult.close();
+                if (!options || options.term === '') {
+                    this.searchResult.close();
                 }
                 else {
-                    context.searchResult.show(new SpinnerView());
+                    this.searchResult.show(new SpinnerView());
+                    this.currentSearchRequest = this.collection.fetch({
+                        data: { term: options.term }
+                    }).done(function () {
+                            self.searchResult.show(self.resultView);
 
-                    context.currentSearchRequest = context.collection.fetch({
-                        data   : { term: term },
-                        success: function () {
-                            context.searchResult.show(context.resultView);
-                        }
-                    });
+                            if (!self.showingAll && self.isExisting) {
+                                self.ui.loadMore.show();
+                            }
+                        });
                 }
             },
 

UI/AddSeries/Existing/CollectionView.js

@@ -2,13 +2,13 @@
 define(
     [
         'marionette',
-        'AddSeries/Existing/CompositeView',
+        'AddSeries/AddSeriesView',
         'AddSeries/Existing/UnmappedFolderCollection'
-    ], function (Marionette, UnmappedFolderCompositeView, UnmappedFolderCollection) {
+    ], function (Marionette, AddSeriesView, UnmappedFolderCollection) {
 
         return Marionette.CollectionView.extend({
 
-            itemView: UnmappedFolderCompositeView,
+            itemView: AddSeriesView,
 
             initialize: function () {
                 this.collection = new UnmappedFolderCollection();
@@ -26,14 +26,20 @@ define(
             _showAndSearch: function (index) {
 
                 var model = this.collection.at(index);
+
                 if (model) {
                     var that = this;
                     var currentIndex = index;
+                    var folderName = model.get('folder').name;
                     this.addItemView(model, this.getItemView(), index);
-                    $.when(this.children.findByModel(model).search()).then(function () {
+                    $.when(this.children.findByModel(model).search({term: folderName})).then(function () {
                         that._showAndSearch(currentIndex + 1);
                     });
                 }
+            },
+
+            itemViewOptions: {
+                isExisting: true
             }
 
         });

UI/AddSeries/Existing/UnmappedFolderCompositeViewTemplate.html

@@ -20,7 +20,5 @@
     <div class="row">
         <div class="x-folder-name-match-results folder-name-matches"/>
     </div>
-    <div class="text-center new-series-loadmore x-load-more" style="display: none;">
-        <i class="icon-angle-down"/> more
-    </div>
+
 </div>

UI/AddSeries/RootFolders/ItemView.js

@@ -17,7 +17,6 @@ define(
 
             removeFolder: function () {
                 this.model.destroy({ wait: true });
-                this.model.collection.remove(this.model);
             },
 
             folderSelected: function () {

UI/AddSeries/RootFolders/RootFolderItemTemplate.html

@@ -1,6 +1,8 @@
-<td name="path" class="span10 x-folder clickable"/>
+<td class="span10 x-folder clickable">
+   {{path}}
+</td>
 <td class="span3 x-folder clickable">
-    <span name="freeSpaceString"></span>
+    <span>{{freeSpaceString}}</span>
 </td>
 <td class="span1 nz-row-action">
     <div class="btn btn-danger icon-minus x-remove">

UI/AddSeries/SearchResultCollectionView.js

@@ -2,15 +2,45 @@
 define(
     [
         'marionette',
-        'AddSeries/SearchResultView'
-    ], function (Marionette, SearchResultView) {
+        'AddSeries/SearchResultView',
+        'AddSeries/Collection'
+
+    ], function (Marionette, SearchResultView, SearchResultCollection) {
 
         return Marionette.CollectionView.extend({
 
-            itemView  : SearchResultView,
-            initialize: function () {
-                this.listenTo(this.collection, 'reset', this.render);
+            itemView: SearchResultView,
+
+            initialize: function (options) {
+
+
+                this.isExisting = options.isExisting;
+                this.fullResult = options.fullResult;
+
+                this.listenTo(this.fullResult, 'sync', this._processResultCollection);
+            },
+
+
+            showAll: function () {
+
+                this.showingAll = true;
+                this.fullResult.each(function (searchResult) {
+                    this.collection.add(searchResult);
+                });
+
+                this.render();
+            },
+
+            _processResultCollection: function () {
+                if (!this.showingAll && this.isExisting) {
+                    this.collection = new SearchResultCollection();
+                    this.collection.add(this.fullResult.shift());
+                }
+                else {
+                    this.collection = this.fullResult;
+                }
             }
 
+
         });
     });

UI/Series/Delete/DeleteSeriesView.js

@@ -1,34 +1,34 @@
 'use strict';
-define(['app', 'Series/SeriesModel'], function () {
+define(
+    [
+        'app',
+        'Series/SeriesModel'
+    ], function () {
 
-    NzbDrone.Series.Delete.DeleteSeriesView = Backbone.Marionette.ItemView.extend({
-        template: 'Series/Delete/DeleteSeriesTemplate',
+        NzbDrone.Series.Delete.DeleteSeriesView = Backbone.Marionette.ItemView.extend({
+            template: 'Series/Delete/DeleteSeriesTemplate',
 
-        events: {
-            'click .x-confirm-delete': 'removeSeries'
-        },
+            events: {
+                'click .x-confirm-delete': 'removeSeries'
+            },
 
-        ui: {
-            deleteFiles: '.x-delete-files'
-        },
+            ui: {
+                deleteFiles: '.x-delete-files'
+            },
 
-        removeSeries: function () {
+            removeSeries: function () {
 
-            var deleteFiles = this.ui.deleteFiles.prop('checked');
+                var deleteFiles = this.ui.deleteFiles.prop('checked');
 
-            this.model.destroy({
-                data   : { 'deleteFiles': deleteFiles },
-                wait   : true,
-                success: function (model) {
-                    model.collection.remove(model);
-                }
-            });
+                this.model.destroy({
+                    data: { 'deleteFiles': deleteFiles },
+                    wait: true
+                }).done(function () {
+                        NzbDrone.modalRegion.close();
+                    });
+            }
+        });
 
-            NzbDrone.modalRegion.close();
+        return  NzbDrone.Series.Delete.DeleteSeriesView;
 
-        }
     });
-
-    return  NzbDrone.Series.Delete.DeleteSeriesView;
-
-});

UI/Shared/Modal/Region.js

@@ -1,36 +1,44 @@
 "use strict";
-define(['marionette', 'bootstrap'], function (Marionette) {
-    return Marionette.Region.extend({
-        el: "#modal-region",
-
-        constructor: function () {
-            Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
-            this.on("show", this.showModal, this);
-        },
-
-        getEl: function (selector) {
-            var $el = $(selector);
-            $el.on("hidden", this.close);
-            return $el;
-        },
-
-        showModal: function () {
-            this.$el.addClass('modal hide fade');
-
-            //need tab index so close on escape works
-            //https://github.com/twitter/bootstrap/issues/4663
-            this.$el.attr('tabindex', '-1');
-            this.$el.modal({
-                'show'    : true,
-                'keyboard': true,
-                'backdrop': 'static'});
-        },
-
-
-        closeModal: function () {
-            this.$el.modal('hide');
-            this.close();
-        }
+define(
+    [
+        'marionette',
+        'bootstrap'
+    ], function (Marionette) {
+        return Marionette.Region.extend({
+            el: "#modal-region",
 
+            constructor: function () {
+                Backbone.Marionette.Region.prototype.constructor.apply(this, arguments);
+                this.on("show", this.showModal, this);
+            },
+
+            getEl: function (selector) {
+                var $el = $(selector);
+                $el.on("hidden", this.close);
+                return $el;
+            },
+
+            showModal: function () {
+                this.$el.addClass('modal hide fade');
+
+                //need tab index so close on escape works
+                //https://github.com/twitter/bootstrap/issues/4663
+                this.$el.attr('tabindex', '-1');
+                this.$el.modal({
+                    'show'    : true,
+                    'keyboard': true,
+                    'backdrop': 'static'});
+            },
+
+
+            onClose: function(){
+                this.closeModal();
+            },
+
+
+            closeModal: function () {
+                this.$el.modal('hide');
+            }
+
+        });
     });
-});