From b858232369f615c8f68ec3fde99acbb7e2c3fa41 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Tue, 8 Dec 2015 09:58:32 +0000
Subject: [PATCH] Fix changing text and jumping caret in PSM's date input

refs #5777
- adds new `gh-datetime-input` that takes a one-way-bound value and formats it, only triggering the supplied `update` action on focus-out
- fixes bug in PSM's `setPublishedAt` action if model's `published_at` is a Date object not a Moment object
---
 .../app/components/gh-datetime-input.js       | 32 +++++++++++++++++++
 .../app/controllers/post-settings-menu.js     | 24 ++------------
 .../components/gh-datetime-input.hbs          |  5 +++
 .../app/templates/post-settings-menu.hbs      |  8 +++--
 4 files changed, 44 insertions(+), 25 deletions(-)
 create mode 100644 core/client/app/components/gh-datetime-input.js
 create mode 100644 core/client/app/templates/components/gh-datetime-input.hbs

diff --git a/core/client/app/components/gh-datetime-input.js b/core/client/app/components/gh-datetime-input.js
new file mode 100644
index 0000000000..ce8d5ec88f
--- /dev/null
+++ b/core/client/app/components/gh-datetime-input.js
@@ -0,0 +1,32 @@
+import Ember from 'ember';
+import TextInputMixin from 'ghost/mixins/text-input';
+import boundOneWay from 'ghost/utils/bound-one-way';
+import {formatDate} from 'ghost/utils/date-formatting';
+
+const {Component} = Ember;
+
+export default Component.extend(TextInputMixin, {
+    tagName: 'span',
+    classNames: 'input-icon icon-calendar',
+
+    datetime: boundOneWay('value'),
+    inputClass: null,
+    inputId: null,
+    inputName: null,
+
+    didReceiveAttrs() {
+        let datetime = this.get('datetime') || moment();
+
+        if (!this.attrs.update) {
+            throw new Error(`You must provide an \`update\` action to \`{{${this.templateName}}}\`.`);
+        }
+
+        this.set('datetime', formatDate(datetime));
+    },
+
+    focusOut() {
+        let datetime = this.get('datetime');
+
+        this.attrs.update(datetime);
+    }
+});
diff --git a/core/client/app/controllers/post-settings-menu.js b/core/client/app/controllers/post-settings-menu.js
index 44efa2a1de..ff4a08cc9f 100644
--- a/core/client/app/controllers/post-settings-menu.js
+++ b/core/client/app/controllers/post-settings-menu.js
@@ -1,5 +1,5 @@
 import Ember from 'ember';
-import {parseDateString, formatDate} from 'ghost/utils/date-formatting';
+import {parseDateString} from 'ghost/utils/date-formatting';
 import SettingsMenuMixin from 'ghost/mixins/settings-menu-controller';
 import SlugGenerator from 'ghost/models/slug-generator';
 import boundOneWay from 'ghost/utils/bound-one-way';
@@ -43,25 +43,6 @@ export default Controller.extend(SettingsMenuMixin, {
             .create(deferred);
     }),
 
-    /*jshint unused:false */
-    publishedAtValue: computed('model.published_at', {
-        get() {
-            let pubDate = this.get('model.published_at');
-
-            if (pubDate) {
-                return formatDate(pubDate);
-            }
-
-            return formatDate(moment());
-        },
-        set(key, value) {
-            // We're using a fake setter to reset
-            // the cache for this property
-            return formatDate(moment());
-        }
-    }),
-    /*jshint unused:true */
-
     slugValue: boundOneWay('model.slug'),
 
     // Lazy load the slug generator
@@ -302,7 +283,7 @@ export default Controller.extend(SettingsMenuMixin, {
          */
         setPublishedAt(userInput) {
             let newPublishedAt = parseDateString(userInput);
-            let publishedAt = this.get('model.published_at');
+            let publishedAt = moment(this.get('model.published_at'));
             let errMessage = '';
 
             if (!userInput) {
@@ -326,7 +307,6 @@ export default Controller.extend(SettingsMenuMixin, {
             // If errors, notify and exit.
             if (errMessage) {
                 this.get('model.errors').add('post-setting-date', errMessage);
-
                 return;
             }
 
diff --git a/core/client/app/templates/components/gh-datetime-input.hbs b/core/client/app/templates/components/gh-datetime-input.hbs
new file mode 100644
index 0000000000..6b6e5ea887
--- /dev/null
+++ b/core/client/app/templates/components/gh-datetime-input.hbs
@@ -0,0 +1,5 @@
+{{gh-input value=datetime
+           id=inputId
+           class=inputClass
+           name=inputName
+           stopEnterKeyDownPropagation="true"}}
diff --git a/core/client/app/templates/post-settings-menu.hbs b/core/client/app/templates/post-settings-menu.hbs
index 6c382e4b26..3a663d4295 100644
--- a/core/client/app/templates/post-settings-menu.hbs
+++ b/core/client/app/templates/post-settings-menu.hbs
@@ -28,9 +28,11 @@
 
             {{#gh-form-group errors=model.errors property="post-setting-date"}}
                 <label for="post-setting-date">Publish Date</label>
-                <span class="input-icon icon-calendar">
-                    {{gh-input class="post-setting-date" id="post-setting-date" value=publishedAtValue name="post-setting-date" focus-out="setPublishedAt" stopEnterKeyDownPropagation="true"}}
-                </span>
+                {{gh-datetime-input value=model.published_at
+                                    update=(action "setPublishedAt")
+                                    inputClass="post-setting-date"
+                                    inputId="post-setting-date"
+                                    inputName="post-setting-date"}}
                 {{gh-error-message errors=model.errors property="post-setting-date"}}
             {{/gh-form-group}}