Fix only one movie showing. Fix more button not showing up.

This commit is contained in:
Leonardo Galli 2017-01-17 13:21:40 +01:00
commit 4263808360
2 changed files with 192 additions and 189 deletions

View file

@ -9,178 +9,178 @@ var ErrorView = require('./ErrorView');
var LoadingView = require('../Shared/LoadingView'); var LoadingView = require('../Shared/LoadingView');
module.exports = Marionette.Layout.extend({ module.exports = Marionette.Layout.extend({
template : 'AddMovies/AddMoviesViewTemplate', template : 'AddMovies/AddMoviesViewTemplate',
regions : { regions : {
searchResult : '#search-result' searchResult : '#search-result'
}, },
ui : { ui : {
moviesSearch : '.x-movies-search', moviesSearch : '.x-movies-search',
searchBar : '.x-search-bar', searchBar : '.x-search-bar',
loadMore : '.x-load-more' loadMore : '.x-load-more'
}, },
events : { events : {
'click .x-load-more' : '_onLoadMore' 'click .x-load-more' : '_onLoadMore'
}, },
initialize : function(options) { initialize : function(options) {
console.log(options); console.log(options);
this.isExisting = options.isExisting;
this.collection = new AddMoviesCollection();
if (this.isExisting) { this.isExisting = options.isExisting;
this.collection.unmappedFolderModel = this.model; this.collection = new AddMoviesCollection();
}
if (this.isExisting) { if (this.isExisting) {
this.className = 'existing-movies'; this.collection.unmappedFolderModel = this.model;
} else { }
this.className = 'new-movies';
}
this.listenTo(vent, vent.Events.MoviesAdded, this._onMoviesAdded); if (this.isExisting) {
this.listenTo(this.collection, 'sync', this._showResults); this.className = 'existing-movies';
} else {
this.className = 'new-movies';
}
this.resultCollectionView = new SearchResultCollectionView({ this.listenTo(vent, vent.Events.MoviesAdded, this._onMoviesAdded);
collection : this.collection, this.listenTo(this.collection, 'sync', this._showResults);
isExisting : this.isExisting
});
this.throttledSearch = _.debounce(this.search, 1000, { trailing : true }).bind(this); this.resultCollectionView = new SearchResultCollectionView({
}, collection : this.collection,
isExisting : this.isExisting
});
onRender : function() { this.throttledSearch = _.debounce(this.search, 1000, { trailing : true }).bind(this);
var self = this; },
this.$el.addClass(this.className); onRender : function() {
var self = this;
this.ui.moviesSearch.keyup(function(e) { this.$el.addClass(this.className);
if (_.contains([ this.ui.moviesSearch.keyup(function(e) {
9,
16,
17,
18,
19,
20,
33,
34,
35,
36,
37,
38,
39,
40,
91,
92,
93
], e.keyCode)) {
return;
}
self._abortExistingSearch(); if (_.contains([
self.throttledSearch({ 9,
term : self.ui.moviesSearch.val() 16,
}); 17,
}); 18,
19,
20,
33,
34,
35,
36,
37,
38,
39,
40,
91,
92,
93
], e.keyCode)) {
return;
}
this._clearResults(); self._abortExistingSearch();
self.throttledSearch({
term : self.ui.moviesSearch.val()
});
});
if (this.isExisting) { this._clearResults();
this.ui.searchBar.hide();
}
},
onShow : function() { if (this.isExisting) {
this.ui.moviesSearch.focus(); this.ui.searchBar.hide();
}, }
},
search : function(options) { onShow : function() {
var self = this; this.ui.moviesSearch.focus();
},
this.collection.reset(); search : function(options) {
var self = this;
if (!options.term || options.term === this.collection.term) { this.collection.reset();
return Marionette.$.Deferred().resolve();
}
this.searchResult.show(new LoadingView()); if (!options.term || options.term === this.collection.term) {
this.collection.term = options.term; return Marionette.$.Deferred().resolve();
this.currentSearchPromise = this.collection.fetch({ }
data : { term : options.term }
});
this.currentSearchPromise.fail(function() { this.searchResult.show(new LoadingView());
self._showError(); this.collection.term = options.term;
}); this.currentSearchPromise = this.collection.fetch({
data : { term : options.term }
});
return this.currentSearchPromise; this.currentSearchPromise.fail(function() {
}, self._showError();
});
_onMoviesAdded : function(options) { return this.currentSearchPromise;
if (this.isExisting && options.movie.get('path') === this.model.get('folder').path) { },
this.close();
}
else if (!this.isExisting) { _onMoviesAdded : function(options) {
this.resultCollectionView.setExisting(options.movie.get('tmdbId')); if (this.isExisting && options.movie.get('path') === this.model.get('folder').path) {
/*this.collection.term = ''; this.close();
this.collection.reset(); }
this._clearResults();
this.ui.moviesSearch.val('');
this.ui.moviesSearch.focus();*/ //TODO: Maybe add option wheter to clear search result.
}
},
_onLoadMore : function() { else if (!this.isExisting) {
var showingAll = this.resultCollectionView.showMore(); this.resultCollectionView.setExisting(options.movie.get('tmdbId'));
this.ui.searchBar.show(); /*this.collection.term = '';
this.collection.reset();
this._clearResults();
this.ui.moviesSearch.val('');
this.ui.moviesSearch.focus();*/ //TODO: Maybe add option wheter to clear search result.
}
},
if (showingAll) { _onLoadMore : function() {
this.ui.loadMore.hide(); var showingAll = this.resultCollectionView.showMore();
} this.ui.searchBar.show();
},
_clearResults : function() { if (showingAll) {
this.ui.loadMore.hide();
}
},
if (!this.isExisting) { _clearResults : function() {
this.searchResult.show(new EmptyView());
} else {
this.searchResult.close();
}
},
_showResults : function() { if (!this.isExisting) {
if (!this.isClosed) { this.searchResult.show(new EmptyView());
if (this.collection.length === 0) { } else {
this.ui.searchBar.show(); this.searchResult.close();
this.searchResult.show(new NotFoundView({ term : this.collection.term })); }
} else { },
this.searchResult.show(this.resultCollectionView);
if (!this.showingAll && this.isExisting) {
this.ui.loadMore.show();
}
}
}
},
_abortExistingSearch : function() { _showResults : function() {
if (this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) { if (!this.isClosed) {
console.log('aborting previous pending search request.'); if (this.collection.length === 0) {
this.currentSearchPromise.abort(); this.ui.searchBar.show();
} else { this.searchResult.show(new NotFoundView({ term : this.collection.term }));
this._clearResults(); } else {
} this.searchResult.show(this.resultCollectionView);
}, if (!this.showingAll) {
this.ui.loadMore.show();
}
}
}
},
_showError : function() { _abortExistingSearch : function() {
if (!this.isClosed) { if (this.currentSearchPromise && this.currentSearchPromise.readyState > 0 && this.currentSearchPromise.readyState < 4) {
this.ui.searchBar.show(); console.log('aborting previous pending search request.');
this.searchResult.show(new ErrorView({ term : this.collection.term })); this.currentSearchPromise.abort();
this.collection.term = ''; } else {
} this._clearResults();
} }
},
_showError : function() {
if (!this.isClosed) {
this.ui.searchBar.show();
this.searchResult.show(new ErrorView({ term : this.collection.term }));
this.collection.term = '';
}
}
}); });

View file

@ -4,59 +4,62 @@ var MoviesCollection = require('../Movies/MoviesCollection');
var vent = require('vent'); var vent = require('vent');
module.exports = Marionette.CollectionView.extend({ module.exports = Marionette.CollectionView.extend({
itemView : SearchResultView, itemView : SearchResultView,
initialize : function(options) { initialize : function(options) {
this.showExisting = true; this.showExisting = true;
this.isExisting = options.isExisting; this.isExisting = options.isExisting;
this.showing = 1; this.showing = 5;
vent.on(vent.Commands.ShowExistingCommand, this._onExistingToggle.bind(this)); if (this.isExisting) {
}, this.showing = 1;
}
vent.on(vent.Commands.ShowExistingCommand, this._onExistingToggle.bind(this));
},
_onExistingToggle : function(data) { _onExistingToggle : function(data) {
this.showExisting = data.showExisting; this.showExisting = data.showExisting;
this.render(); this.render();
}, },
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;
}, },
setExisting : function(tmdbid) { setExisting : function(tmdbid) {
var movies = this.collection.where({ tmdbId : tmdbid }); var movies = this.collection.where({ tmdbId : tmdbid });
console.warn(movies); console.warn(movies);
//debugger; //debugger;
if (movies.length > 0) { if (movies.length > 0) {
this.children.findByModel(movies[0])._configureTemplateHelpers(); this.children.findByModel(movies[0])._configureTemplateHelpers();
//this.children.findByModel(movies[0])._configureTemplateHelpers(); //this.children.findByModel(movies[0])._configureTemplateHelpers();
this.children.findByModel(movies[0]).render(); this.children.findByModel(movies[0]).render();
//this.templateHelpers.existing = existingMovies[0].toJSON(); //this.templateHelpers.existing = existingMovies[0].toJSON();
} }
}, },
appendHtml : function(collectionView, itemView, index) { appendHtml : function(collectionView, itemView, index) {
var tmdbId = itemView.model.get('tmdbId'); var tmdbId = itemView.model.get('tmdbId');
var existingMovies = MoviesCollection.where({ tmdbId: tmdbId }); var existingMovies = MoviesCollection.where({ tmdbId: tmdbId });
if(existingMovies.length > 0) { if(existingMovies.length > 0) {
if(this.showExisting) { if(this.showExisting) {
if (index < this.showing || index === 0) { if (index < this.showing || index === 0) {
collectionView.$el.append(itemView.el); collectionView.$el.append(itemView.el);
} }
} }
} else { } else {
if (index < this.showing || index === 0) { if (index < this.showing || index === 0) {
collectionView.$el.append(itemView.el); collectionView.$el.append(itemView.el);
} }
} }
} }
}); });