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

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;
 });

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;
 });

src/UI/Settings/Indexers/Edit/IndexerEditViewTemplate.html

@@ -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>

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('<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;
     });

src/UI/Settings/Metadata/MetadataEditViewTemplate.html

@@ -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>

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;
 });

src/UI/Settings/Notifications/Edit/NotificationEditViewTemplate.html

@@ -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>

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);
     });

src/UI/Settings/Profile/Edit/EditProfileLayoutTemplate.html

@@ -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>