Archive-Team
/
sonarr-repo-only
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed: Cancelling editing a modal will reset to previous saved state

This commit is contained in:
Mark McDowall 2014-08-14 23:06:17 -07:00
parent 39c66b7951
commit d76e3d2ed6
16 changed files with 216 additions and 285 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/UI/Content/theme.less
View File

@ -247,3 +247,9 @@ body {
margin-bottom : 0px;
}
}
.twitter-typeahead {
.form-control[disabled] {
background-color: #ffffff;
}
}

107
src/UI/Mixins/AsEditModalView.js Normal file
View File

@ -0,0 +1,107 @@
'use strict';
define(
['AppLayout'],
function (AppLayout) {
return function () {
var originalInitialize = this.prototype.initialize;
var originalOnBeforeClose = this.prototype.onBeforeClose;
var saveInternal = function () {
var self = this;
this.ui.indicator.show();
if (this._onBeforeSave) {
this._onBeforeSave.call(this);
}
var promise = this.model.save();
promise.always(function () {
self.ui.indicator.hide();
});
promise.done(function () {
self.originalModelData = self.model.toJSON();
});
return promise;
};
this.prototype.initialize = function (options) {
if (!this.model) {
throw 'View has no model';
}
this.originalModelData = this.model.toJSON();
this.events = this.events || {};
this.events['click .x-save'] = '_save';
this.events['click .x-save-and-add'] = '_saveAndAdd';
this.events['click .x-test'] = '_test';
this.events['click .x-delete'] = '_delete';
this.ui = this.ui || {};
this.ui.indicator = '.x-indicator';
if (originalInitialize) {
originalInitialize.call(this, options);
}
};
this.prototype._save = function () {
var self = this;
var promise = saveInternal.call(this);
promise.done(function () {
if (self._onAfterSave) {
self._onAfterSave.call(self);
}
self.originalModelData = self.model.toJSON();
});
};
this.prototype._saveAndAdd = function () {
var self = this;
var promise = saveInternal.call(this);
promise.done(function () {
if (self._onAfterSaveAndAdd) {
self._onAfterSaveAndAdd.call(self);
}
});
};
this.prototype._test = function () {
var self = this;
this.ui.indicator.show();
this.model.test().always(function () {
self.ui.indicator.hide();
});
};
this.prototype._delete = function () {
var view = new this._deleteView({ model: this.model });
AppLayout.modalRegion.show(view);
};
this.prototype.onBeforeClose = function () {
this.model.set(this.originalModelData);
if (originalOnBeforeClose) {
originalOnBeforeClose.call(this);
}
};
return this;
};
}
);

4
src/UI/Mixins/AsModelBoundView.js
View File

@ -6,8 +6,8 @@ define(
return function () {
var originalOnRender = this.prototype.onRender,
originalBeforeClose = this.prototype.onBeforeClose;
var originalOnRender = this.prototype.onRender;
var originalBeforeClose = this.prototype.onBeforeClose;
this.prototype.onRender = function () {

2
src/UI/Profile/ProfileModel.js
View File

@ -3,7 +3,7 @@ define(
[
'backbone.deepmodel'
], function (DeepModel) {
return DeepModel.DeepModel.extend({
return DeepModel.DeepModel.extend({
defaults: {
id : null,
name : '',

26
src/UI/Series/Edit/EditSeriesView.js
View File

@ -6,19 +6,19 @@ define(
'Profile/ProfileCollection',
'Mixins/AsModelBoundView',
'Mixins/AsValidatedView',
'Mixins/AsEditModalView',
'Mixins/AutoComplete'
], function (vent, Marionette, Profiles, AsModelBoundView, AsValidatedView) {
], function (vent, Marionette, Profiles, AsModelBoundView, AsValidatedView, AsEditModalView) {
var view = Marionette.ItemView.extend({
template: 'Series/Edit/EditSeriesViewTemplate',
ui: {
profile: '.x-profile',
path : '.x-path'
profile : '.x-profile',
path : '.x-path'
},
events: {
'click .x-save' : '_saveSeries',
'click .x-remove': '_removeSeries'
},
@ -27,16 +27,14 @@ define(
this.model.set('profiles', Profiles);
},
_saveSeries: function () {
var self = this;
_onBeforeSave: function () {
var profileId = this.ui.profile.val();
this.model.set({ profileId: profileId});
},
this.model.save().done(function () {
self.trigger('saved');
vent.trigger(vent.Commands.CloseModalCommand);
});
_onAfterSave: function () {
this.trigger('saved');
vent.trigger(vent.Commands.CloseModalCommand);
},
onRender: function () {
@ -48,7 +46,9 @@ define(
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
AsModelBoundView.apply(view);
return AsValidatedView.apply(view);
return view;
});

5
src/UI/Series/Edit/EditSeriesViewTemplate.html
View File

@ -6,8 +6,7 @@
<div class="modal-body edit-series-modal">
<div class="row">
<div class="col-sm-3 hidden-xs">
<img class="series-poster" src="{{poster}}"
{{defaultImg}}>
<img class="series-poster" src="{{poster}}" {{defaultImg}}>
</div>
<div class="col-sm-9">
<div class="form-horizontal">
@ -89,6 +88,8 @@
</div>
<div class="modal-footer">
<button class="btn btn-danger pull-left x-remove">delete</button>
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn" data-dismiss="modal">cancel</button>
<button class="btn btn-primary x-save">save</button>
</div>

70
src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js
View File

@ -1,6 +1,7 @@
'use strict';
define([
'underscore',
'vent',
'AppLayout',
'marionette',
@ -8,29 +9,26 @@ define([
'Commands/CommandController',
'Mixins/AsModelBoundView',
'Mixins/AsValidatedView',
'underscore',
'Mixins/AsEditModalView',
'Form/FormBuilder',
'Mixins/AutoComplete',
'bootstrap'
], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, _) {
], function (_, vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, AsEditModalView) {
var view = Marionette.ItemView.extend({
template: 'Settings/DownloadClient/Edit/DownloadClientEditViewTemplate',
ui: {
path : '.x-path',
modalBody : '.modal-body',
indicator : '.x-indicator'
modalBody : '.modal-body'
},
events: {
'click .x-save' : '_save',
'click .x-save-and-add': '_saveAndAdd',
'click .x-delete' : '_delete',
'click .x-back' : '_back',
'click .x-test' : '_test'
'click .x-back' : '_back'
},
_deleteView: DeleteView,
initialize: function (options) {
this.targetCollection = options.targetCollection;
},
@ -44,65 +42,25 @@ define([
this.ui.path.autoComplete('/directories');
},
_save: function () {
this.ui.indicator.show();
var self = this;
var promise = this.model.save();
if (promise) {
promise.done(function () {
self.targetCollection.add(self.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
});
promise.fail(function () {
self.ui.indicator.hide();
});
}
_onAfterSave: function () {
this.targetCollection.add(this.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
},
_saveAndAdd: function () {
this.ui.indicator.show();
_onAfterSaveAndAdd: function () {
this.targetCollection.add(this.model, { merge: true });
var self = this;
var promise = this.model.save();
if (promise) {
promise.done(function () {
self.targetCollection.add(self.model, { merge: true });
require('Settings/DownloadClient/Add/DownloadClientSchemaModal').open(self.targetCollection);
});
promise.fail(function () {
self.ui.indicator.hide();
});
}
},
_delete: function () {
var view = new DeleteView({ model: this.model });
AppLayout.modalRegion.show(view);
require('Settings/DownloadClient/Add/DownloadClientSchemaModal').open(this.targetCollection);
},
_back: function () {
require('Settings/DownloadClient/Add/DownloadClientSchemaModal').open(this.targetCollection);
},
_test: function () {
var self = this;
this.ui.indicator.show();
this.model.test().always(function () {
self.ui.indicator.hide();
});
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
return view;
});

85
src/UI/Settings/Indexers/Edit/IndexerEditView.js
View File

@ -1,4 +1,4 @@
'use strict';
 'use strict';
define([
'vent',
@ -8,71 +8,34 @@ define([
'Commands/CommandController',
'Mixins/AsModelBoundView',
'Mixins/AsValidatedView',
'Mixins/AsEditModalView',
'Form/FormBuilder',
'Mixins/AutoComplete',
'bootstrap'
], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView) {
], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, AsEditModalView) {
var view = Marionette.ItemView.extend({
template: 'Settings/Indexers/Edit/IndexerEditViewTemplate',
ui: {
indicator : '.x-indicator'
events: {
'click .x-back' : '_back'
},
events: {
'click .x-save' : '_save',
'click .x-save-and-add' : '_saveAndAdd',
'click .x-delete' : '_delete',
'click .x-back' : '_back',
'click .x-close' : '_close',
'click .x-test' : '_test'
},
_deleteView: DeleteView,
initialize: function (options) {
this.targetCollection = options.targetCollection;
},
_save: function () {
this.ui.indicator.show();
var self = this;
var promise = this.model.save();
if (promise) {
promise.done(function () {
self.targetCollection.add(self.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
});
promise.fail(function () {
self.ui.indicator.hide();
});
}
_onAfterSave: function () {
this.targetCollection.add(this.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
},
_saveAndAdd: function () {
this.ui.indicator.show();
_onAfterSaveAndAdd: function () {
this.targetCollection.add(this.model, { merge: true });
var self = this;
var promise = this.model.save();
if (promise) {
promise.done(function () {
self.targetCollection.add(self.model, { merge: true });
require('Settings/Indexers/Add/IndexerSchemaModal').open(self.targetCollection);
});
promise.fail(function () {
self.ui.indicator.hide();
});
}
},
_delete: function () {
var view = new DeleteView({ model: this.model });
AppLayout.modalRegion.show(view);
require('Settings/Indexers/Add/IndexerSchemaModal').open(this.targetCollection);
},
_back: function () {
@ -81,34 +44,12 @@ define([
}
require('Settings/Indexers/Add/IndexerSchemaModal').open(this.targetCollection);
},
_close: function () {
if (this.model.isNew()) {
this.model.destroy();
}
else {
this.model.fetch();
}
vent.trigger(vent.Commands.CloseModalCommand);
},
_test: function () {
var self = this;
this.ui.indicator.show();
this.model.test().always(function () {
self.ui.indicator.hide();
});
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
return view;
});

4
src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html
View File

@ -1,6 +1,6 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close x-close" aria-hidden="true">&times;</button>
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
{{#if id}}
<h3>Edit - {{implementation}}</h3>
{{else}}
@ -46,7 +46,7 @@
{{/if}}
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
<button class="btn x-close">cancel</button>
<button class="btn" data-dismiss="modal">cancel</button>
<div class="btn-group">
<button class="btn btn-primary x-save">save</button>

31
src/UI/Settings/Metadata/MetadataEditView.js
View File

@ -5,40 +5,21 @@ define(
'vent',
'marionette',
'Mixins/AsModelBoundView',
'Mixins/AsValidatedView'
], function (vent, Marionette, AsModelBoundView, AsValidatedView) {
'Mixins/AsValidatedView',
'Mixins/AsEditModalView'
], function (vent, Marionette, AsModelBoundView, AsValidatedView, AsEditModalView) {
var view = Marionette.ItemView.extend({
template: 'Settings/Metadata/MetadataEditViewTemplate',
ui: {
activity: '.x-activity'
},
events: {
'click .x-save' : '_save'
},
_save: function () {
this.ui.activity.html('<i class="icon-nd-spinner"></i>');
var self = this;
var promise = this.model.save();
if (promise) {
promise.done(function () {
vent.trigger(vent.Commands.CloseModalCommand);
});
promise.fail(function () {
self.ui.activity.empty();
});
}
_onAfterSave: function () {
vent.trigger(vent.Commands.CloseModalCommand);
}
});
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
return view;
});

2
src/UI/Settings/Metadata/MetadataEditViewTemplate.html
View File

@ -35,7 +35,7 @@
</div>
</div>
<div class="modal-footer">
<span class="x-activity"></span>
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn" data-dismiss="modal">cancel</button>
<button class="btn btn-primary x-save">save</button>

75
src/UI/Settings/Notifications/Edit/NotificationEditView.js
View File

@ -1,6 +1,7 @@
'use strict';
define([
'underscore',
'vent',
'AppLayout',
'marionette',
@ -8,29 +9,25 @@ define([
'Commands/CommandController',
'Mixins/AsModelBoundView',
'Mixins/AsValidatedView',
'underscore',
'Mixins/AsEditModalView',
'Form/FormBuilder'
], function (vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, _) {
], function (_, vent, AppLayout, Marionette, DeleteView, CommandController, AsModelBoundView, AsValidatedView, AsEditModalView) {
var view = Marionette.ItemView.extend({
template: 'Settings/Notifications/Edit/NotificationEditViewTemplate',
ui: {
onDownloadToggle : '.x-on-download',
onUpgradeSection : '.x-on-upgrade',
indicator : '.x-indicator'
onUpgradeSection : '.x-on-upgrade'
},
events: {
'click .x-save' : '_save',
'click .x-save-and-add': '_saveAndAdd',
'click .x-delete' : '_delete',
'click .x-back' : '_back',
'click .x-cancel' : '_cancel',
'click .x-test' : '_test',
'change .x-on-download': '_onDownloadChanged'
},
_deleteView: DeleteView,
initialize: function (options) {
this.targetCollection = options.targetCollection;
},
@ -39,46 +36,15 @@ define([
this._onDownloadChanged();
},
_save: function () {
this.ui.indicator.show();
var self = this;
var promise = this.model.save();
if (promise) {
promise.done(function () {
self.targetCollection.add(self.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
});
promise.fail(function () {
self.ui.indicator.hide();
});
}
_onAfterSave: function () {
this.targetCollection.add(this.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
},
_saveAndAdd: function () {
this.ui.indicator.show();
_onAfterSaveAndAdd: function () {
this.targetCollection.add(this.model, { merge: true });
var self = this;
var promise = this.model.save();
if (promise) {
promise.done(function () {
self.targetCollection.add(self.model, { merge: true });
require('Settings/Notifications/Add/NotificationSchemaModal').open(self.targetCollection);
});
promise.fail(function () {
self.ui.indicator.hide();
});
}
},
_delete: function () {
var view = new DeleteView({ model: this.model });
AppLayout.modalRegion.show(view);
require('Settings/Notifications/Add/NotificationSchemaModal').open(this.targetCollection);
},
_back: function () {
@ -89,22 +55,6 @@ define([
require('Settings/Notifications/Add/NotificationSchemaModal').open(this.targetCollection);
},
_cancel: function () {
if (this.model.isNew()) {
this.model.destroy();
}
},
_test: function () {
var self = this;
this.ui.indicator.show();
this.model.test().always(function () {
self.ui.indicator.hide();
});
},
_onDownloadChanged: function () {
var checked = this.ui.onDownloadToggle.prop('checked');
@ -120,6 +70,7 @@ define([
AsModelBoundView.call(view);
AsValidatedView.call(view);
AsEditModalView.call(view);
return view;
});

4
src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html
View File

@ -1,6 +1,6 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close x-cancel" data-dismiss="modal" aria-hidden="true">&times;</button>
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
{{#if id}}
<h3>Edit - {{implementation}}</h3>
{{else}}
@ -95,7 +95,7 @@
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn x-test">test <i class="x-test-icon icon-nd-test"/></button>
<button class="btn x-cancel" data-dismiss="modal">cancel</button>
<button class="btn" data-dismiss="modal">cancel</button>
<div class="btn-group">
<button class="btn btn-primary x-save">save</button>

63
src/UI/Settings/Profile/Edit/EditProfileLayout.js
View File

@ -11,7 +11,8 @@ define(
'Settings/Profile/Edit/EditProfileView',
'Settings/Profile/DeleteProfileView',
'Series/SeriesCollection',
'Config'
'Config',
'Mixins/AsEditModalView'
], function (_,
vent,
AppLayout,
@ -22,9 +23,10 @@ define(
EditProfileView,
DeleteView,
SeriesCollection,
Config) {
Config,
AsEditModalView) {
return Marionette.Layout.extend({
var view = Marionette.Layout.extend({
template: 'Settings/Profile/Edit/EditProfileLayoutTemplate',
regions: {
@ -36,11 +38,7 @@ define(
deleteButton: '.x-delete'
},
events: {
'click .x-save' : '_saveProfile',
'click .x-cancel' : '_cancelProfile',
'click .x-delete' : '_delete'
},
_deleteView: DeleteView,
initialize: function (options) {
this.profileCollection = options.profileCollection;
@ -77,7 +75,17 @@ define(
this.listenTo(this.sortableListView, 'selectionChanged', this._selectionChanged);
this.listenTo(this.sortableListView, 'sortStop', this._updateModel);
},
_onBeforeSave: function () {
var cutoff = this.fieldsView.getCutoff();
this.model.set('cutoff', cutoff);
},
_onAfterSave: function () {
this.profileCollection.add(this.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
},
_selectionChanged: function(newSelectedModels, oldSelectedModels) {
var addedModels = _.difference(newSelectedModels, oldSelectedModels);
var removeModels = _.difference(oldSelectedModels, newSelectedModels);
@ -93,46 +101,11 @@ define(
this._showFieldsView();
},
_saveProfile: function () {
var self = this;
var cutoff = this.fieldsView.getCutoff();
this.model.set('cutoff', cutoff);
var promise = this.model.save();
if (promise) {
promise.done(function () {
self.profileCollection.add(self.model, { merge: true });
vent.trigger(vent.Commands.CloseModalCommand);
});
}
},
_cancelProfile: function () {
if (!this.model.has('id')) {
vent.trigger(vent.Commands.CloseModalCommand);
return;
}
var promise = this.model.fetch();
if (promise) {
promise.done(function () {
vent.trigger(vent.Commands.CloseModalCommand);
});
}
},
_showFieldsView: function () {
this.fields.show(this.fieldsView);
},
_delete: function () {
var view = new DeleteView({ model: this.model });
AppLayout.modalRegion.show(view);
},
_updateDisableStatus: function () {
if (this._isQualityInUse()) {
this.ui.deleteButton.addClass('disabled');
@ -147,4 +120,6 @@ define(
return SeriesCollection.where({'profileId': this.model.id}).length !== 0;
}
});
return AsEditModalView.call(view);
});

5
src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html
View File

@ -1,6 +1,6 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close x-cancel" aria-hidden="true">&times;</button>
<button type="button" class="close" aria-hidden="true" data-dismiss="modal">&times;</button>
{{#if id}}
<h3>Edit</h3>
{{else}}
@ -29,7 +29,8 @@
{{#if id}}
<button class="btn btn-danger pull-left x-delete">delete</button>
{{/if}}
<button class="btn x-cancel">cancel</button>
<span class="indicator x-indicator"><i class="icon-spinner icon-spin"></i></span>
<button class="btn" data-dismiss="modal">cancel</button>
<button class="btn btn-primary x-save">save</button>
</div>
</div>

12
src/UI/Shared/Modal/ModalRegion.js
View File

@ -32,14 +32,24 @@ define(
backdrop : true
});
this.$el.on('hide.bs.modal', $.proxy(this._closing, this));
this.currentView.$el.addClass('modal-dialog');
},
closeModal: function () {
$(this.el).modal('hide');
this.reset();
}
},
_closing: function () {
if (this.$el) {
this.$el.off('hide.bs.modal');
}
this.reset();
}
});
return region;