Fixed tag accent color picker

refs f10e133acd

- updated the component backing class with the expected actions/tasks
- largely duplicated from `<GhBrandSettingsForm>` which had more up-to-date code style

ghost/admin/app/components/gh-tag-settings-form.hbs

@@ -41,7 +41,7 @@
                             <div class="color-picker-horizontal-divider"></div>
                             <div
                                 class="color-box-container"
-                                style={{this.accentColorBgStlye}}
+                                style={{this.accentColorBgStyle}}
                             >
                                 <input
                                     type="color"

ghost/admin/app/components/gh-tag-settings-form.js

@@ -5,6 +5,7 @@ import {htmlSafe} from '@ember/string';
 import {or} from '@ember/object/computed';
 import {run} from '@ember/runloop';
 import {inject as service} from '@ember/service';
+import {task, timeout} from 'ember-concurrency';
 
 const {Handlebars} = Ember;
 
@@ -35,9 +36,12 @@ export default Component.extend({
         return color;
     }),
 
-    accentColorBackgroundStyle: computed('tag.accentColor', function () {
+    accentColorPickerValue: computed('tag.accentColor', function () {
-        let color = this.get('tag.accentColor') || '#ffffff';
+        return this.tag.get('accentColor') || '#ffffff';
-        return htmlSafe(`background-color: ${color}`);
+    }),
+
+    accentColorBgStyle: computed('accentColorPickerValue', function () {
+        return htmlSafe(`background-color: ${this.accentColorPickerValue}`);
     }),
 
     title: computed('tag.isNew', function () {
@@ -154,39 +158,51 @@ export default Component.extend({
                 this.get('tag.errors').add('canonicalUrl', errMessage);
                 this.get('tag.hasValidated').pushObject('canonicalUrl');
             }
-        },
+        }
+    },
 
-        validateAccentColor() {
+    updateAccentColor: async function (event) {
-            let newColor = this.get('accentColor');
+        let newColor = event.target.value;
-            let oldColor = this.get('tag.accentColor');
+        const oldColor = this.tag.get('accentColor');
-            let errMessage = '';
 
-            this.get('tag.errors').remove('accentColor');
+        // reset errors and validation
-            this.get('tag.hasValidated').removeObject('accentColor');
+        this.tag.errors.remove('accentColor');
+        this.tag.hasValidated.removeObject('accentColor');
 
-            if (newColor === '') {
+        if (newColor === '') {
-                this.setProperty('accentColor', '');
+            if (newColor === oldColor) {
                 return;
             }
 
-            if (!newColor) {
+            // clear out the accent color
-                newColor = oldColor;
+            this.tag.set('accentColor', '');
-            }
+            return;
-
-            if (newColor[0] !== '#') {
-                newColor = `#${newColor}`;
-            }
-
-            if (newColor.match(/#[0-9A-Fa-f]{6}$/)) {
-                this.setProperty('accentColor', '');
-                run.schedule('afterRender', this, function () {
-                    this.setProperty('accentColor', newColor);
-                });
-            } else {
-                errMessage = 'The color should be in valid hex format';
-                this.get('tag.errors').add('accentColor', errMessage);
-                this.get('tag.hasValidated').pushObject('accentColor');
-            }
         }
-    }
+
+        // accentColor will be null unless the user has input something
+        if (!newColor) {
+            newColor = oldColor;
+        }
+
+        if (newColor[0] !== '#') {
+            newColor = `#${newColor}`;
+        }
+
+        if (newColor.match(/#[0-9A-Fa-f]{6}$/)) {
+            if (newColor === oldColor) {
+                return;
+            }
+
+            this.tag.set('accentColor', newColor);
+            this.scratchTag.set('accentColor', newColor);
+        } else {
+            this.tag.errors.add('accentColor', 'The colour should be in valid hex format');
+            this.tag.hasValidated.pushObject('accentColor');
+        }
+    },
+
+    debounceUpdateAccentColor: task(function*(event) {
+        yield timeout(10);
+        this.updateAccentColor(event);
+    })
 });