UI Cleanup - Updated AddSeries subtree.

pull/3113/head
Taloth Saldono 10 years ago
parent b556eda4a0
commit f5118fc430

@ -5,14 +5,18 @@ var _ = require('underscore');
module.exports = Backbone.Collection.extend({ module.exports = Backbone.Collection.extend({
url : window.NzbDrone.ApiRoot + '/series/lookup', url : window.NzbDrone.ApiRoot + '/series/lookup',
model : SeriesModel, model : SeriesModel,
parse : function(response) { parse : function(response) {
var self = this; var self = this;
_.each(response, function(model) { _.each(response, function(model) {
model.id = undefined; model.id = undefined;
if (self.unmappedFolderModel) { if (self.unmappedFolderModel) {
model.path = self.unmappedFolderModel.get('folder').path; model.path = self.unmappedFolderModel.get('folder').path;
} }
}); });
return response; return response;
} }
}); });

@ -10,30 +10,43 @@ require('../Series/SeriesCollection');
module.exports = Marionette.Layout.extend({ module.exports = Marionette.Layout.extend({
template : 'AddSeries/AddSeriesLayoutTemplate', template : 'AddSeries/AddSeriesLayoutTemplate',
regions : {workspace : '#add-series-workspace'},
regions : {
workspace : '#add-series-workspace'
},
events : { events : {
'click .x-import' : '_importSeries', 'click .x-import' : '_importSeries',
'click .x-add-new' : '_addSeries' 'click .x-add-new' : '_addSeries'
}, },
attributes : {id : 'add-series-screen'},
attributes : {
id : 'add-series-screen'
},
initialize : function() { initialize : function() {
ProfileCollection.fetch(); ProfileCollection.fetch();
RootFolderCollection.fetch().done(function() { RootFolderCollection.fetch().done(function() {
RootFolderCollection.synced = true; RootFolderCollection.synced = true;
}); });
}, },
onShow : function() { onShow : function() {
this.workspace.show(new AddSeriesView()); this.workspace.show(new AddSeriesView());
}, },
_folderSelected : function(options) { _folderSelected : function(options) {
vent.trigger(vent.Commands.CloseModalCommand); vent.trigger(vent.Commands.CloseModalCommand);
this.workspace.show(new ExistingSeriesCollectionView({ model : options.model })); this.workspace.show(new ExistingSeriesCollectionView({ model : options.model }));
}, },
_importSeries : function() { _importSeries : function() {
this.rootFolderLayout = new RootFolderLayout(); this.rootFolderLayout = new RootFolderLayout();
this.listenTo(this.rootFolderLayout, 'folderSelected', this._folderSelected); this.listenTo(this.rootFolderLayout, 'folderSelected', this._folderSelected);
AppLayout.modalRegion.show(this.rootFolderLayout); AppLayout.modalRegion.show(this.rootFolderLayout);
}, },
_addSeries : function() { _addSeries : function() {
this.workspace.show(new AddSeriesView()); this.workspace.show(new AddSeriesView());
} }

@ -10,69 +10,119 @@ var LoadingView = require('../Shared/LoadingView');
module.exports = Marionette.Layout.extend({ module.exports = Marionette.Layout.extend({
template : 'AddSeries/AddSeriesViewTemplate', template : 'AddSeries/AddSeriesViewTemplate',
regions : {searchResult : '#search-result'},
regions : {
searchResult : '#search-result'
},
ui : { ui : {
seriesSearch : '.x-series-search', seriesSearch : '.x-series-search',
searchBar : '.x-search-bar', searchBar : '.x-search-bar',
loadMore : '.x-load-more' loadMore : '.x-load-more'
}, },
events : {"click .x-load-more" : '_onLoadMore'},
events : {
'click .x-load-more' : '_onLoadMore'
},
initialize : function(options) { initialize : function(options) {
this.isExisting = options.isExisting; this.isExisting = options.isExisting;
this.collection = new AddSeriesCollection(); this.collection = new AddSeriesCollection();
if (this.isExisting) { if (this.isExisting) {
this.collection.unmappedFolderModel = this.model; this.collection.unmappedFolderModel = this.model;
} }
if (this.isExisting) { if (this.isExisting) {
this.className = 'existing-series'; this.className = 'existing-series';
} } else {
else {
this.className = 'new-series'; this.className = 'new-series';
} }
this.listenTo(vent, vent.Events.SeriesAdded, this._onSeriesAdded); this.listenTo(vent, vent.Events.SeriesAdded, this._onSeriesAdded);
this.listenTo(this.collection, 'sync', this._showResults); this.listenTo(this.collection, 'sync', this._showResults);
this.resultCollectionView = new SearchResultCollectionView({ this.resultCollectionView = new SearchResultCollectionView({
collection : this.collection, collection : this.collection,
isExisting : this.isExisting isExisting : this.isExisting
}); });
this.throttledSearch = _.debounce(this.search, 1000, { trailing : true }).bind(this); this.throttledSearch = _.debounce(this.search, 1000, { trailing : true }).bind(this);
}, },
onRender : function() { onRender : function() {
var self = this; var self = this;
this.$el.addClass(this.className); this.$el.addClass(this.className);
this.ui.seriesSearch.keyup(function(e) { this.ui.seriesSearch.keyup(function(e) {
if(_.contains([9, 16, 17, 18, 19, 20, 33, 34, 35, 36, 37, 38, 39, 40, 91, 92, 93], e.keyCode)) {
if (_.contains([
9,
16,
17,
18,
19,
20,
33,
34,
35,
36,
37,
38,
39,
40,
91,
92,
93
], e.keyCode)) {
return; return;
} }
self._abortExistingSearch(); self._abortExistingSearch();
self.throttledSearch({term : self.ui.seriesSearch.val()}); self.throttledSearch({
term : self.ui.seriesSearch.val()
});
}); });
this._clearResults(); this._clearResults();
if (this.isExisting) { if (this.isExisting) {
this.ui.searchBar.hide(); this.ui.searchBar.hide();
} }
}, },
onShow : function() { onShow : function() {
this.ui.seriesSearch.focus(); this.ui.seriesSearch.focus();
}, },
search : function(options) { search : function(options) {
var self = this; var self = this;
this.collection.reset(); this.collection.reset();
if (!options.term || options.term === this.collection.term) { if (!options.term || options.term === this.collection.term) {
return Marionette.$.Deferred().resolve(); return Marionette.$.Deferred().resolve();
} }
this.searchResult.show(new LoadingView()); this.searchResult.show(new LoadingView());
this.collection.term = options.term; this.collection.term = options.term;
this.currentSearchPromise = this.collection.fetch({data : {term : options.term}}); this.currentSearchPromise = this.collection.fetch({
data : { term : options.term }
});
this.currentSearchPromise.fail(function() { this.currentSearchPromise.fail(function() {
self._showError(); self._showError();
}); });
return this.currentSearchPromise; return this.currentSearchPromise;
}, },
_onSeriesAdded : function(options) { _onSeriesAdded : function(options) {
if (this.isExisting && options.series.get('path') === this.model.get('folder').path) { if (this.isExisting && options.series.get('path') === this.model.get('folder').path) {
this.close(); this.close();
} }
else if (!this.isExisting) { else if (!this.isExisting) {
this.collection.term = ''; this.collection.term = '';
this.collection.reset(); this.collection.reset();
@ -81,28 +131,30 @@ module.exports = Marionette.Layout.extend({
this.ui.seriesSearch.focus(); this.ui.seriesSearch.focus();
} }
}, },
_onLoadMore : function() { _onLoadMore : function() {
var showingAll = this.resultCollectionView.showMore(); var showingAll = this.resultCollectionView.showMore();
this.ui.searchBar.show(); this.ui.searchBar.show();
if (showingAll) { if (showingAll) {
this.ui.loadMore.hide(); this.ui.loadMore.hide();
} }
}, },
_clearResults : function() { _clearResults : function() {
if (!this.isExisting) { if (!this.isExisting) {
this.searchResult.show(new EmptyView()); this.searchResult.show(new EmptyView());
} } else {
else {
this.searchResult.close(); this.searchResult.close();
} }
}, },
_showResults : function() { _showResults : function() {
if (!this.isClosed) { if (!this.isClosed) {
if (this.collection.length === 0) { if (this.collection.length === 0) {
this.ui.searchBar.show(); this.ui.searchBar.show();
this.searchResult.show(new NotFoundView({ term : this.collection.term })); this.searchResult.show(new NotFoundView({ term : this.collection.term }));
} } else {
else {
this.searchResult.show(this.resultCollectionView); this.searchResult.show(this.resultCollectionView);
if (!this.showingAll && this.isExisting) { if (!this.showingAll && this.isExisting) {
this.ui.loadMore.show(); this.ui.loadMore.show();
@ -110,15 +162,16 @@ module.exports = Marionette.Layout.extend({
} }
} }
}, },
_abortExistingSearch : function() { _abortExistingSearch : function() {
if (this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) { if (this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) {
console.log('aborting previous pending search request.'); console.log('aborting previous pending search request.');
this.currentSearchPromise.abort(); this.currentSearchPromise.abort();
} } else {
else {
this._clearResults(); this._clearResults();
} }
}, },
_showError : function() { _showError : function() {
if (!this.isClosed) { if (!this.isClosed) {
this.ui.searchBar.show(); this.ui.searchBar.show();

@ -1,3 +1,5 @@
var Marionette = require('marionette'); var Marionette = require('marionette');
module.exports = Marionette.CompositeView.extend({template : 'AddSeries/EmptyViewTemplate'}); module.exports = Marionette.CompositeView.extend({
template : 'AddSeries/EmptyViewTemplate'
});

@ -2,9 +2,11 @@ var Marionette = require('marionette');
module.exports = Marionette.CompositeView.extend({ module.exports = Marionette.CompositeView.extend({
template : 'AddSeries/ErrorViewTemplate', template : 'AddSeries/ErrorViewTemplate',
initialize : function(options) { initialize : function(options) {
this.options = options; this.options = options;
}, },
templateHelpers : function() { templateHelpers : function() {
return this.options; return this.options;
} }

@ -6,20 +6,28 @@ module.exports = Marionette.CompositeView.extend({
itemView : AddSeriesView, itemView : AddSeriesView,
itemViewContainer : '.x-loading-folders', itemViewContainer : '.x-loading-folders',
template : 'AddSeries/Existing/AddExistingSeriesCollectionViewTemplate', template : 'AddSeries/Existing/AddExistingSeriesCollectionViewTemplate',
ui : {loadingFolders : '.x-loading-folders'},
ui : {
loadingFolders : '.x-loading-folders'
},
initialize : function() { initialize : function() {
this.collection = new UnmappedFolderCollection(); this.collection = new UnmappedFolderCollection();
this.collection.importItems(this.model); this.collection.importItems(this.model);
}, },
showCollection : function() { showCollection : function() {
this._showAndSearch(0); this._showAndSearch(0);
}, },
appendHtml : function(collectionView, itemView, index) { appendHtml : function(collectionView, itemView, index) {
collectionView.ui.loadingFolders.before(itemView.el); collectionView.ui.loadingFolders.before(itemView.el);
}, },
_showAndSearch : function(index) { _showAndSearch : function(index) {
var self = this; var self = this;
var model = this.collection.at(index); var model = this.collection.at(index);
if (model) { if (model) {
var currentIndex = index; var currentIndex = index;
var folderName = model.get('folder').name; var folderName = model.get('folder').name;
@ -30,9 +38,14 @@ module.exports = Marionette.CompositeView.extend({
} }
}); });
} }
else { else {
this.ui.loadingFolders.hide(); this.ui.loadingFolders.hide();
} }
}, },
itemViewOptions : {isExisting : true}
itemViewOptions : {
isExisting : true
}
}); });

@ -4,9 +4,12 @@ var _ = require('underscore');
module.exports = Backbone.Collection.extend({ module.exports = Backbone.Collection.extend({
model : UnmappedFolderModel, model : UnmappedFolderModel,
importItems : function(rootFolderModel) { importItems : function(rootFolderModel) {
this.reset(); this.reset();
var rootFolder = rootFolderModel; var rootFolder = rootFolderModel;
_.each(rootFolderModel.get('unmappedFolders'), function(folder) { _.each(rootFolderModel.get('unmappedFolders'), function(folder) {
this.push(new UnmappedFolderModel({ this.push(new UnmappedFolderModel({
rootFolder : rootFolder, rootFolder : rootFolder,

@ -1,4 +1,4 @@
<dl class="monitor-tooltip-contents"> <dl class="monitor-tooltip-contents">
<dt>All</dt> <dt>All</dt>
<dd>Monitor all episodes except specials</dd> <dd>Monitor all episodes except specials</dd>
<dt>Future</dt> <dt>Future</dt>

@ -2,9 +2,11 @@ var Marionette = require('marionette');
module.exports = Marionette.CompositeView.extend({ module.exports = Marionette.CompositeView.extend({
template : 'AddSeries/NotFoundViewTemplate', template : 'AddSeries/NotFoundViewTemplate',
initialize : function(options) { initialize : function(options) {
this.options = options; this.options = options;
}, },
templateHelpers : function() { templateHelpers : function() {
return this.options; return this.options;
} }

@ -2,10 +2,9 @@ var Backbone = require('backbone');
var RootFolderModel = require('./RootFolderModel'); var RootFolderModel = require('./RootFolderModel');
require('../../Mixins/backbone.signalr.mixin'); require('../../Mixins/backbone.signalr.mixin');
module.exports = (function(){
var RootFolderCollection = Backbone.Collection.extend({ var RootFolderCollection = Backbone.Collection.extend({
url : window.NzbDrone.ApiRoot + '/rootfolder', url : window.NzbDrone.ApiRoot + '/rootfolder',
model : RootFolderModel model : RootFolderModel
}); });
return new RootFolderCollection();
}).call(this); module.exports = new RootFolderCollection();

@ -3,19 +3,24 @@ var Marionette = require('marionette');
module.exports = Marionette.ItemView.extend({ module.exports = Marionette.ItemView.extend({
template : 'AddSeries/RootFolders/RootFolderItemViewTemplate', template : 'AddSeries/RootFolders/RootFolderItemViewTemplate',
tagName : 'tr', tagName : 'tr',
initialize : function() { initialize : function() {
this.listenTo(this.model, 'change', this.render); this.listenTo(this.model, 'change', this.render);
}, },
events : { events : {
'click .x-delete' : 'removeFolder', 'click .x-delete' : 'removeFolder',
'click .x-folder' : 'folderSelected' 'click .x-folder' : 'folderSelected'
}, },
removeFolder : function() { removeFolder : function() {
var self = this; var self = this;
this.model.destroy().success(function() { this.model.destroy().success(function() {
self.close(); self.close();
}); });
}, },
folderSelected : function() { folderSelected : function() {
this.trigger('folderSelected', this.model); this.trigger('folderSelected', this.model);
} }

@ -6,49 +6,72 @@ var LoadingView = require('../../Shared/LoadingView');
var AsValidatedView = require('../../Mixins/AsValidatedView'); var AsValidatedView = require('../../Mixins/AsValidatedView');
require('../../Mixins/FileBrowser'); require('../../Mixins/FileBrowser');
module.exports = (function(){ var Layout = Marionette.Layout.extend({
var layout = Marionette.Layout.extend({
template : 'AddSeries/RootFolders/RootFolderLayoutTemplate', template : 'AddSeries/RootFolders/RootFolderLayoutTemplate',
ui : {pathInput : '.x-path'},
regions : {currentDirs : '#current-dirs'}, ui : {
pathInput : '.x-path'
},
regions : {
currentDirs : '#current-dirs'
},
events : { events : {
'click .x-add' : '_addFolder', 'click .x-add' : '_addFolder',
'keydown .x-path input' : '_keydown' 'keydown .x-path input' : '_keydown'
}, },
initialize : function() { initialize : function() {
this.collection = RootFolderCollection; this.collection = RootFolderCollection;
this.rootfolderListView = new RootFolderCollectionView({ collection : RootFolderCollection }); this.rootfolderListView = new RootFolderCollectionView({ collection : RootFolderCollection });
this.listenTo(this.rootfolderListView, 'itemview:folderSelected', this._onFolderSelected); this.listenTo(this.rootfolderListView, 'itemview:folderSelected', this._onFolderSelected);
this.listenTo(RootFolderCollection, 'sync', this._showCurrentDirs); this.listenTo(RootFolderCollection, 'sync', this._showCurrentDirs);
}, },
onRender : function() { onRender : function() {
this.currentDirs.show(new LoadingView()); this.currentDirs.show(new LoadingView());
if (RootFolderCollection.synced) { if (RootFolderCollection.synced) {
this._showCurrentDirs(); this._showCurrentDirs();
} }
this.ui.pathInput.fileBrowser(); this.ui.pathInput.fileBrowser();
}, },
_onFolderSelected : function(options) { _onFolderSelected : function(options) {
this.trigger('folderSelected', options); this.trigger('folderSelected', options);
}, },
_addFolder : function() { _addFolder : function() {
var self = this; var self = this;
var newDir = new RootFolderModel({Path : this.ui.pathInput.val()});
var newDir = new RootFolderModel({
Path : this.ui.pathInput.val()
});
this.bindToModelValidation(newDir); this.bindToModelValidation(newDir);
newDir.save().done(function() { newDir.save().done(function() {
RootFolderCollection.add(newDir); RootFolderCollection.add(newDir);
self.trigger('folderSelected', { model : newDir }); self.trigger('folderSelected', { model : newDir });
}); });
}, },
_showCurrentDirs : function() { _showCurrentDirs : function() {
this.currentDirs.show(this.rootfolderListView); this.currentDirs.show(this.rootfolderListView);
}, },
_keydown : function(e) { _keydown : function(e) {
if (e.keyCode !== 13) { if (e.keyCode !== 13) {
return; return;
} }
this._addFolder(); this._addFolder();
} }
}); });
return AsValidatedView.apply(layout);
}).call(this); var Layout = AsValidatedView.apply(Layout);
module.exports = Layout;

@ -2,5 +2,7 @@ var Backbone = require('backbone');
module.exports = Backbone.Model.extend({ module.exports = Backbone.Model.extend({
urlRoot : window.NzbDrone.ApiRoot + '/rootfolder', urlRoot : window.NzbDrone.ApiRoot + '/rootfolder',
defaults : {freeSpace : 0} defaults : {
freeSpace : 0
}
}); });

@ -3,19 +3,24 @@ var SearchResultView = require('./SearchResultView');
module.exports = Marionette.CollectionView.extend({ module.exports = Marionette.CollectionView.extend({
itemView : SearchResultView, itemView : SearchResultView,
initialize : function(options) { initialize : function(options) {
this.isExisting = options.isExisting; this.isExisting = options.isExisting;
this.showing = 1; this.showing = 1;
}, },
showAll : function() { showAll : function() {
this.showingAll = true; this.showingAll = true;
this.render(); this.render();
}, },
showMore : function() { showMore : function() {
this.showing += 5; this.showing += 5;
this.render(); this.render();
return this.showing >= this.collection.length; return this.showing >= this.collection.length;
}, },
appendHtml : function(collectionView, itemView, index) { appendHtml : function(collectionView, itemView, index) {
if (!this.isExisting || index < this.showing || index === 0) { if (!this.isExisting || index < this.showing || index === 0) {
collectionView.$el.append(itemView.el); collectionView.$el.append(itemView.el);

@ -142,8 +142,7 @@ var view = Marionette.ItemView.extend({
var rootFolderLayout = new RootFolderLayout(); var rootFolderLayout = new RootFolderLayout();
this.listenToOnce(rootFolderLayout, 'folderSelected', this._setRootFolder); this.listenToOnce(rootFolderLayout, 'folderSelected', this._setRootFolder);
AppLayout.modalRegion.show(rootFolderLayout); AppLayout.modalRegion.show(rootFolderLayout);
} } else {
else {
Config.setValue(Config.Keys.DefaultRootFolderId, rootFolderValue); Config.setValue(Config.Keys.DefaultRootFolderId, rootFolderValue);
} }
}, },

Loading…
Cancel
Save