add existing has a load more button that shows all of the results.

This commit is contained in:
kay.one 2013-05-25 22:54:02 -07:00
parent 2a89897a99
commit 5ad5307a7b
10 changed files with 195 additions and 150 deletions

View File

@ -23,7 +23,7 @@ namespace NzbDrone.Api.Series
private Response Search() private Response Search()
{ {
var tvDbResults = _searchProxy.SearchForNewSeries((string)Request.Query.term); var tvDbResults = _searchProxy.SearchForNewSeries((string)Request.Query.term);
return MapToResource(tvDbResults).FirstOrDefault().AsResponse(); return MapToResource(tvDbResults).AsResponse();
} }

View File

@ -5,9 +5,11 @@ define(['app', 'Series/SeriesModel'], function () {
model: NzbDrone.Series.SeriesModel, model: NzbDrone.Series.SeriesModel,
parse: function (response) { parse: function (response) {
if (response) {
response.id = undefined; _.each(response, function (model) {
} model.id = undefined;
});
return response; return response;
} }
}); });

View File

@ -4,69 +4,27 @@ define([
'Quality/QualityProfileCollection', 'Quality/QualityProfileCollection',
'AddSeries/Existing/UnmappedFolderModel', 'AddSeries/Existing/UnmappedFolderModel',
'AddSeries/Collection', 'AddSeries/Collection',
'AddSeries/SearchResultView',
'Series/SeriesModel'], function (app, rootFolders, qualityProfileCollection) { 'Series/SeriesModel'], function (app, rootFolders, qualityProfileCollection) {
NzbDrone.AddSeries.Existing.FolderMatchResultView = Backbone.Marionette.ItemView.extend({
template: 'AddSeries/SearchResultTemplate',
ui: {
qualityProfile: '.x-quality-profile',
addButton : '.x-add'
},
events: {
'click .x-add': 'addSeries'
},
initialize: function () {
this.model.set('isExisting', true);
},
addSeries: function () {
var icon = this.ui.addButton.find('icon');
icon.removeClass('icon-plus').addClass('icon-spin icon-spinner disabled');
var self = this;
var quality = this.ui.qualityProfile.val();
var path = this.options.folder.path;
this.model.set('qualityProfileId', quality);
this.model.set('path', path);
this.model.save(undefined, {
success: function () {
icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
NzbDrone.Shared.Messenger.show({
message: 'Added: ' + self.model.get('title')
});
NzbDrone.vent.trigger(NzbDrone.Events.SeriesAdded, { existing: true, series: self.model });
self.trigger('seriesAdded');
self.close();
},
fail : function () {
icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
}
});
}
});
NzbDrone.AddSeries.Existing.UnmappedFolderCompositeView = Backbone.Marionette.CompositeView.extend({ NzbDrone.AddSeries.Existing.UnmappedFolderCompositeView = Backbone.Marionette.CompositeView.extend({
template : 'AddSeries/Existing/UnmappedFolderCompositeViewTemplate', template : 'AddSeries/Existing/UnmappedFolderCompositeViewTemplate',
itemViewContainer: '.x-folder-name-match-results', itemViewContainer: '.x-folder-name-match-results',
itemView : NzbDrone.AddSeries.Existing.FolderMatchResultView, itemView : NzbDrone.AddSeries.SearchResultView,
events: { events: {
'click .x-btn-search' : 'search', 'click .x-btn-search' : 'search',
'click .x-load-more' : '_loadMore',
'keydown .x-txt-search': 'keyDown' 'keydown .x-txt-search': 'keyDown'
}, },
ui: { ui: {
searchButton: '.x-btn-search', searchButton: '.x-btn-search',
searchText : '.x-txt-search', searchText : '.x-txt-search',
profileList : '.x-lst-quality-profile' profileList : '.x-lst-quality-profile',
searchBar : '.x-search-bar',
loadMore : '.x-load-more'
}, },
initialize: function () { initialize: function () {
@ -79,22 +37,31 @@ define([
}, },
onRender: function () { onRender: function () {
this.resultView = new NzbDrone.AddSeries.SearchResultView({ collection: this.collection }); this.ui.loadMore.show();
}, },
search: function () { search: function () {
var icon = this.ui.searchButton.find('icon'); var icon = this.ui.searchButton.find('icon');
icon.removeClass('icon-search').addClass('icon-spin icon-spinner disabled');
var self = this;
var deferred = $.Deferred(); var deferred = $.Deferred();
this.collection.reset(); this.collection.reset();
icon.removeClass('icon-search').addClass('icon-spin icon-spinner disabled');
this.collection.fetch({ this.searchCollection = new NzbDrone.AddSeries.Collection();
this.searchCollection.fetch({
data : { term: this.ui.searchText.val() }, data : { term: this.ui.searchText.val() },
success: function (collection) { success: function (collection) {
icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search'); icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
deferred.resolve(); deferred.resolve();
self.collection.add(self.searchCollection.shift());
if (self.showall) {
self._showAll();
}
}, },
fail : function () { fail : function () {
icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search'); icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
@ -105,6 +72,7 @@ define([
return deferred.promise(); return deferred.promise();
}, },
keyDown: function (e) { keyDown: function (e) {
//Check for enter being pressed //Check for enter being pressed
var code = (e.keyCode ? e.keyCode :e.which); var code = (e.keyCode ? e.keyCode :e.which);
@ -113,9 +81,19 @@ define([
} }
}, },
collectionReset: function () { _loadMore: function () {
_.each(this.collection.models, function (model) { this.showall = true;
model.set('isExisting', true);
this.ui.searchBar.fadeIn();
this.ui.loadMore.fadeOut();
this._showAll();
},
_showAll: function () {
var self = this;
this.searchCollection.each(function (searchResult) {
self.collection.add(searchResult);
}); });
}, },
@ -123,7 +101,8 @@ define([
return { return {
qualityProfile: this.ui.profileList, qualityProfile: this.ui.profileList,
rootFolder : this.model.get('rootFolder'), rootFolder : this.model.get('rootFolder'),
folder : this.model.get('folder') folder : this.model.get('folder'),
isExisting : true
}; };
} }
}); });
@ -160,14 +139,13 @@ define([
var that = this; var that = this;
var currentIndex = index; var currentIndex = index;
this.addItemView(model, this.getItemView(), index); this.addItemView(model, this.getItemView(), index);
console.log('start');
$.when(this.children.findByModel(model).search()) $.when(this.children.findByModel(model).search())
.then(function () { .then(function () {
console.log('done');
that.showAndSearch(currentIndex + 1); that.showAndSearch(currentIndex + 1);
}); });
} }
} }
}); });
}); })
;

View File

@ -1,8 +1,11 @@
<div class="unmapped-folder-view"> <div class="unmapped-folder-view">
<div class="row"> <div class="text-center">
<div class="x-folder-name-match-results folder-name-matches"/> <h2>
<icon class="icon-folder-open"></icon>
{{folder.path}}
</h2>
</div> </div>
<div class="row" style="visibility: collapse;"> <div class="row x-search-bar" style="display: none;">
<div class="folder-header span11"> <div class="folder-header span11">
<div class="input-prepend"> <div class="input-prepend">
<i class="add-on icon-search"></i> <i class="add-on icon-search"></i>
@ -14,8 +17,10 @@
</div> </div>
</div> </div>
</div> </div>
<div class="row text-center"> <div class="row">
load more <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>
</div> </div>

View File

@ -1,5 +1,8 @@
"use strict"; "use strict";
define(['app', 'AddSeries/RootFolders/RootFolderCollection', 'AddSeries/New/SearchResultView', 'Shared/SpinnerView', define(['app',
'AddSeries/RootFolders/RootFolderCollection',
'AddSeries/SearchResultView',
'Shared/SpinnerView',
'AddSeries/Collection'], function () { 'AddSeries/Collection'], function () {
NzbDrone.AddSeries.New.AddNewSeriesView = Backbone.Marionette.Layout.extend({ NzbDrone.AddSeries.New.AddNewSeriesView = Backbone.Marionette.Layout.extend({
template: 'AddSeries/New/AddNewSeriesTemplate', template: 'AddSeries/New/AddNewSeriesTemplate',
@ -38,7 +41,7 @@ define(['app', 'AddSeries/RootFolders/RootFolderCollection', 'AddSeries/New/Sear
self.$el.data('timeout', window.setTimeout(self.search, 500, self)); self.$el.data('timeout', window.setTimeout(self.search, 500, self));
}); });
this.resultView = new NzbDrone.AddSeries.SearchResultView({ collection: this.collection }); this.resultView = new NzbDrone.AddSeries.SearchResultCollectionView({ collection: this.collection });
}, },
search: function (context) { search: function (context) {

View File

@ -7,30 +7,30 @@
</div> </div>
<div class="span9"> <div class="span9">
<div class="row">
{{#unless isExisting}}
<select class="span6 x-root-folder">
{{#each rootFolders.models}}
<option value="{{id}}">{{attributes.path}}</option>
{{/each}}
</select>
{{/unless}}
<select class="span2 x-quality-profile">
{{#each qualityProfiles.models}}
<option value="{{id}}">{{attributes.name}}</option>
{{/each}}
</select>
<div class="btn btn-success x-add pull-right">
<icon class="icon-plus"></icon>
</div>
</div>
<div class="row"> <div class="row">
<h2>{{title}}</h2> <h2>{{title}}</h2>
</div> </div>
<div class="row"> <div class="row new-series-overview x-overview">
{{overview}} {{overview}}
</div> </div>
<div class="row">
<div class="btn btn-success x-add pull-right new-series-add">
Add
<icon class="icon-plus"></icon>
</div>
{{#unless isExisting}}
<select class="span6 x-root-folder">
{{#each rootFolders.models}}
<option value="{{id}}">{{attributes.path}}</option>
{{/each}}
</select>
{{/unless}}
<select class="span2 x-quality-profile pull-right">
{{#each qualityProfiles.models}}
<option value="{{id}}">{{attributes.name}}</option>
{{/each}}
</select>
</div>
</div> </div>
</div> </div>
</div> </div>

View File

@ -1,20 +1,27 @@
'use strict'; 'use strict';
define(['app', 'Series/SeriesCollection'], function (app) { define(['app', 'Series/SeriesCollection'], function (app) {
NzbDrone.AddSeries.New.SearchItemView = Backbone.Marionette.ItemView.extend({ NzbDrone.AddSeries.SearchResultView = Backbone.Marionette.ItemView.extend({
template: "AddSeries/SearchResultTemplate", template: "AddSeries/SearchResultTemplate",
ui: { ui: {
qualityProfile: '.x-quality-profile', qualityProfile: '.x-quality-profile',
rootFolder : '.x-root-folder', rootFolder : '.x-root-folder',
addButton : '.x-add' addButton : '.x-add',
overview : '.x-overview'
}, },
events: { events: {
'click .x-add': 'addSeries' 'click .x-add': 'addSeries'
}, },
initialize: function () {
if (this.isExisting) {
this.modal.set('isExisting', true);
}
},
onRender: function () { onRender: function () {
this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'change', this.render);
}, },
@ -41,19 +48,21 @@ define(['app', 'Series/SeriesCollection'], function (app) {
NzbDrone.vent.trigger(NzbDrone.Events.SeriesAdded, { existing: false, series: self.model }); NzbDrone.vent.trigger(NzbDrone.Events.SeriesAdded, { existing: false, series: self.model });
}, },
fail: function () { fail : function () {
icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search'); icon.removeClass('icon-spin icon-spinner disabled').addClass('icon-search');
} }
}); });
} }
}); });
NzbDrone.AddSeries.SearchResultView = Backbone.Marionette.CollectionView.extend({
itemView : NzbDrone.AddSeries.New.SearchItemView, NzbDrone.AddSeries.SearchResultCollectionView = Backbone.Marionette.CollectionView.extend({
itemView : NzbDrone.AddSeries.SearchResultView,
initialize: function () { initialize: function () {
this.listenTo(this.collection, 'reset', this.render); this.listenTo(this.collection, 'reset', this.render);
} }
}); });
}); });

View File

@ -1,13 +1,18 @@
.result-list { @import "../shared/Styles/card.less";
.result-list {
font-size: 14px; font-size: 14px;
text-align: left; text-align: left;
padding-bottom: 30px; padding-bottom: 30px;
} }
.existing-root-folder-view { .existing-root-folder-view {
h1 { h1 {
padding: 10px 0 20px 0; padding: 10px 0 20px 0;
} }
} }
.nz-input-large { .nz-input-large {
margin-top: 20px; margin-top: 20px;
margin-bottom: 40px; margin-bottom: 40px;
@ -22,18 +27,20 @@
height: 50px; height: 50px;
} }
} }
.folder-name-matches { .folder-name-matches {
padding-left: 20px; padding-left: 20px;
padding-top: 10px; padding-top: 10px;
} }
.img-polaroid { .img-polaroid {
min-width: 138px; min-width: 138px;
min-height: 203px; min-height: 203px;
max-width: 138px; max-width: 138px;
max-height: 203px; max-height: 203px;
} }
.unmapped-folder-view { .unmapped-folder-view {
background: #fcf8e3;
margin-top: 20px; margin-top: 20px;
padding: 20px; padding: 20px;
.folder-header { .folder-header {
@ -47,7 +54,11 @@
} }
} }
} }
.search-item { .search-item {
.card;
padding-bottom: 20px; padding-bottom: 20px;
a { a {
color: #343434; color: #343434;
@ -59,3 +70,26 @@
font-size: 16px; font-size: 16px;
} }
} }
.new-series-overview {
text-overflow: ellipsis;
white-space: pre-line;
overflow: hidden;
height: 125px;
}
.new-series-add {
margin-left: 20px;
}
.new-series-loadmore {
font-size: 30px;
font-weight: 300;
cursor: pointer;
background: #fcf8e3;
padding-top: 10px;
padding-bottom: 10px;
}

View File

@ -1,3 +1,5 @@
@import "../Shared/Styles/card.less";
.series-item { .series-item {
padding-bottom: 30px; padding-bottom: 30px;
@ -26,6 +28,9 @@
} }
.series-posters-item { .series-posters-item {
.card;
margin-bottom: 20px; margin-bottom: 20px;
.center { .center {

View File

@ -0,0 +1,9 @@
.card {
margin :10px;
padding: 10px;
box-shadow: 0px 0px 20px 1px #e1e1e1;
color: #444444;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}