Tag Settings Menu Autosave

closes #4517

- adds autosave to name/slug/description fields in TMS
- adds nprogress indicator when saving

core/client/controllers/settings/tags.js

@@ -1,27 +1,43 @@
 import PaginationMixin from 'ghost/mixins/pagination-controller';
+import boundOneWay from 'ghost/utils/bound-one-way';
 
 var TagsController = Ember.ArrayController.extend(PaginationMixin, {
     tags: Ember.computed.alias('model'),
+
     activeTag: null,
+    activeTagNameScratch: boundOneWay('activeTag.name'),
+    activeTagSlugScratch: boundOneWay('activeTag.slug'),
+    activeTagDescriptionScratch: boundOneWay('activeTag.description'),
+
     init: function (options) {
         options = options || {};
         options.modelType = 'tag';
         this._super(options);
     },
+
+    saveActiveTag: function () {
+        var activeTag = this.get('activeTag'),
+            name = activeTag.get('name'),
+            self = this;
+
+        activeTag.save().then(function () {
+            self.notifications.showSuccess('Saved ' + name);
+        }).catch(function (error) {
+            self.notifications.showAPIError(error);
+        });
+    },
+
     actions: {
-        // Clear any unsaved changes until autosave is implemented
-        closeTagEditor: function () {
-            this.get('activeTag').rollback();
-            this.send('closeSettingsMenu');
-        },
         newTag: function () {
             this.set('activeTag', this.store.createRecord('tag'));
             this.send('openSettingsMenu');
         },
+
         editTag: function (tag) {
             this.set('activeTag', tag);
             this.send('openSettingsMenu');
         },
+
         deleteTag: function (tag) {
             var name = tag.get('name'),
                 self = this;
@@ -34,15 +50,49 @@ var TagsController = Ember.ArrayController.extend(PaginationMixin, {
                 self.notifications.showAPIError(error);
             });
         },
-        saveTag: function (tag) {
-            var name = tag.get('name'),
-                self = this;
 
-            tag.save().then(function () {
-                self.notifications.showSuccess('Saved ' + name);
-            }).catch(function (error) {
-                self.notifications.showAPIError(error);
+        saveActiveTagName: function (name) {
+            var activeTag = this.get('activeTag'),
+                currentName = activeTag.get('name');
+
+            name = name.trim();
+            if (!name || name === currentName) {
+                return;
+            }
+
+            // setting all of the properties as they are not saved until name is present
+            activeTag.setProperties({
+                name: name,
+                slug: this.get('activeTagSlugScratch').trim(),
+                description: this.get('activeTagDescriptionScratch').trim()
             });
+            this.saveActiveTag();
+        },
+
+        saveActiveTagSlug: function (slug) {
+            var name = this.get('activeTag.name'),
+                currentSlug = this.get('activeTag.slug') || '';
+
+            slug = slug.trim();
+            if (!name || !slug || slug === currentSlug) {
+                return;
+            }
+
+            this.set('activeTag.slug', slug);
+            this.saveActiveTag();
+        },
+
+        saveActiveTagDescription: function (description) {
+            var name = this.get('activeTag.name'),
+                currentDescription = this.get('activeTag.description') || '';
+
+            description = description.trim();
+            if (!name || description === currentDescription) {
+                return;
+            }
+
+            this.set('activeTag.description', description);
+            this.saveActiveTag();
         }
     }
 });

core/client/models/tag.js

@@ -1,4 +1,6 @@
-var Tag = DS.Model.extend({
+import NProgressSaveMixin from 'ghost/mixins/nprogress-save';
+
+var Tag = DS.Model.extend(NProgressSaveMixin, {
     uuid: DS.attr('string'),
     name: DS.attr('string'),
     slug: DS.attr('string'),

core/client/templates/post-settings-menu.hbs

@@ -95,6 +95,7 @@
                     <div class="seo-preview-link">{{seoURL}}</div>
                     <div class="seo-preview-description">{{seoDescription}}</div>
                 </div>
+            </div>
             </form>
         </div>{{! .settings-menu-content }}
     {{/gh-tab-pane}}

core/client/templates/settings/tags/settings-menu.hbs

@@ -1,9 +1,9 @@
-<div class="content-cover" {{action "closeTagEditor"}}></div>
+<div class="content-cover" {{action "closeSettingsMenu"}}></div>
 <div class="settings-menu-container">
     <div class="settings-menu settings-menu-pane settings-menu-pane-in">
         <div class="settings-menu-header">
             <h4>Tag Settings</h4>
-            <button class="close icon-x settings-menu-header-action" {{action "closeTagEditor"}}>
+            <button class="close icon-x settings-menu-header-action" {{action "closeSettingsMenu"}}>
                 <span class="hidden">Close</span>
             </button>
         </div>
@@ -11,23 +11,22 @@
             <form>
                 <div class="form-group">
                     <label>Tag Name</label>
-                    {{input type="text" value=activeTag.name}}
+                    {{gh-input type="text" placeholder=activeTag.name value=activeTagNameScratch focus-out="saveActiveTagName"}}
                 </div>
 
                 <div class="form-group">
                     <label>Slug</label>{{!--@TODO show full url preview, not just slug--}}
-                    {{input type="text" value=activeTag.slug}}
+                    {{gh-input type="text" placeholder=activeTag.slug value=activeTagSlugScratch focus-out="saveActiveTagSlug"}}
                 </div>
 
                 <div class="form-group">
                     <label>Description</label>
-                    {{textarea value=activeTag.description}}
+                    {{gh-textarea value=activeTagDescriptionScratch focus-out="saveActiveTagDescription"}}
                 </div>
 
                 {{#unless activeTag.isNew}}
-                <button class="btn btn-red icon-trash" {{action "deleteTag" activeTag}}>Delete Tag</button>
+                    <button class="btn btn-red icon-trash" {{action "deleteTag" activeTag}}>Delete Tag</button>
                 {{/unless}}
-                <button class="btn btn-green tag-save-button" {{action "saveTag" activeTag}}>{{view.saveText}}</button>
             </form>
         </div>
     </div>