From d76e3d2ed6260fe1ab1afcd49220683b57f9249e Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Thu, 14 Aug 2014 23:06:17 -0700 Subject: [PATCH] Fixed: Cancelling editing a modal will reset to previous saved state --- src/UI/Content/theme.less | 6 + src/UI/Mixins/AsEditModalView.js | 107 ++++++++++++++++++ src/UI/Mixins/AsModelBoundView.js | 4 +- src/UI/Profile/ProfileModel.js | 2 +- src/UI/Series/Edit/EditSeriesView.js | 26 ++--- .../Series/Edit/EditSeriesViewTemplate.html | 5 +- .../Edit/DownloadClientEditView.js | 70 +++--------- .../Settings/Indexers/Edit/IndexerEditView.js | 85 +++----------- .../Edit/IndexerEditViewTemplate.html | 4 +- src/UI/Settings/Metadata/MetadataEditView.js | 31 +---- .../Metadata/MetadataEditViewTemplate.html | 2 +- .../Edit/NotificationEditView.js | 75 +++--------- .../Edit/NotificationEditViewTemplate.html | 4 +- .../Profile/Edit/EditProfileLayout.js | 63 ++++------- .../Edit/EditProfileLayoutTemplate.html | 5 +- src/UI/Shared/Modal/ModalRegion.js | 12 +- 16 files changed, 216 insertions(+), 285 deletions(-) create mode 100644 src/UI/Mixins/AsEditModalView.js diff --git a/src/UI/Content/theme.less b/src/UI/Content/theme.less index 7a45d851a..e71daf82e 100644 --- a/src/UI/Content/theme.less +++ b/src/UI/Content/theme.less @@ -247,3 +247,9 @@ body { margin-bottom : 0px; } } + +.twitter-typeahead { + .form-control[disabled] { + background-color: #ffffff; + } +} diff --git a/src/UI/Mixins/AsEditModalView.js b/src/UI/Mixins/AsEditModalView.js new file mode 100644 index 000000000..97b26be49 --- /dev/null +++ b/src/UI/Mixins/AsEditModalView.js @@ -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; + }; + } +); diff --git a/src/UI/Mixins/AsModelBoundView.js b/src/UI/Mixins/AsModelBoundView.js index 0095370e0..831f6b259 100644 --- a/src/UI/Mixins/AsModelBoundView.js +++ b/src/UI/Mixins/AsModelBoundView.js @@ -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 () { diff --git a/src/UI/Profile/ProfileModel.js b/src/UI/Profile/ProfileModel.js index 629512d52..63368fb74 100644 --- a/src/UI/Profile/ProfileModel.js +++ b/src/UI/Profile/ProfileModel.js @@ -3,7 +3,7 @@ define( [ 'backbone.deepmodel' ], function (DeepModel) { - return DeepModel.DeepModel.extend({ + return DeepModel.DeepModel.extend({ defaults: { id : null, name : '', diff --git a/src/UI/Series/Edit/EditSeriesView.js b/src/UI/Series/Edit/EditSeriesView.js index 18522f6bd..d4695c763 100644 --- a/src/UI/Series/Edit/EditSeriesView.js +++ b/src/UI/Series/Edit/EditSeriesView.js @@ -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; }); diff --git a/src/UI/Series/Edit/EditSeriesViewTemplate.html b/src/UI/Series/Edit/EditSeriesViewTemplate.html index 812206918..70933be3e 100644 --- a/src/UI/Series/Edit/EditSeriesViewTemplate.html +++ b/src/UI/Series/Edit/EditSeriesViewTemplate.html @@ -6,8 +6,7 @@
@@ -89,6 +88,8 @@
+ +
diff --git a/src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js b/src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js index 8363edf3b..8fe9d2e84 100644 --- a/src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js +++ b/src/UI/Settings/DownloadClient/Edit/DownloadClientEditView.js @@ -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; }); diff --git a/src/UI/Settings/Indexers/Edit/IndexerEditView.js b/src/UI/Settings/Indexers/Edit/IndexerEditView.js index 22541585b..e6877a105 100644 --- a/src/UI/Settings/Indexers/Edit/IndexerEditView.js +++ b/src/UI/Settings/Indexers/Edit/IndexerEditView.js @@ -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; }); diff --git a/src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html b/src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html index f98b7c731..d9f1682f3 100644 --- a/src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html +++ b/src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html @@ -1,6 +1,6 @@ 
- + {{#if id}}

Edit - {{implementation}}

{{else}} @@ -46,7 +46,7 @@ {{/if}} - +
diff --git a/src/UI/Settings/Metadata/MetadataEditView.js b/src/UI/Settings/Metadata/MetadataEditView.js index 49e18d6ff..2a1eecd39 100644 --- a/src/UI/Settings/Metadata/MetadataEditView.js +++ b/src/UI/Settings/Metadata/MetadataEditView.js @@ -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(''); - - 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; }); diff --git a/src/UI/Settings/Metadata/MetadataEditViewTemplate.html b/src/UI/Settings/Metadata/MetadataEditViewTemplate.html index 69696769c..d4ce1e08d 100644 --- a/src/UI/Settings/Metadata/MetadataEditViewTemplate.html +++ b/src/UI/Settings/Metadata/MetadataEditViewTemplate.html @@ -35,7 +35,7 @@
- + diff --git a/src/UI/Settings/Notifications/Edit/NotificationEditView.js b/src/UI/Settings/Notifications/Edit/NotificationEditView.js index c905c89b5..49260b198 100644 --- a/src/UI/Settings/Notifications/Edit/NotificationEditView.js +++ b/src/UI/Settings/Notifications/Edit/NotificationEditView.js @@ -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; }); diff --git a/src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html b/src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html index 69b313b4f..59e40217e 100644 --- a/src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html +++ b/src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html @@ -1,6 +1,6 @@ 
- + {{#if id}}

Edit - {{implementation}}

{{else}} @@ -95,7 +95,7 @@ - +
diff --git a/src/UI/Settings/Profile/Edit/EditProfileLayout.js b/src/UI/Settings/Profile/Edit/EditProfileLayout.js index e41bbe591..6316a4b57 100644 --- a/src/UI/Settings/Profile/Edit/EditProfileLayout.js +++ b/src/UI/Settings/Profile/Edit/EditProfileLayout.js @@ -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); }); diff --git a/src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html b/src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html index 64ee1fe91..b5efad40c 100644 --- a/src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html +++ b/src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html @@ -1,6 +1,6 @@ 
- + {{#if id}}

Edit

{{else}} @@ -29,7 +29,8 @@ {{#if id}} {{/if}} - + +
diff --git a/src/UI/Shared/Modal/ModalRegion.js b/src/UI/Shared/Modal/ModalRegion.js index 72aa55a41..7fdd46a72 100644 --- a/src/UI/Shared/Modal/ModalRegion.js +++ b/src/UI/Shared/Modal/ModalRegion.js @@ -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;