Ghost/ghost/admin/app/components/gh-editor-save-button.js
Aileen Nowak 9a28e5d7d5 Scheduler UI
refs TryGhost/Ghost#6413 and TryGhost/Ghost#6870

needs TryGhost/Ghost#6861

- **Post Settings Menu (PSM)**:'Publish Date' input accepts a date from now, min. 2 minutes to allow scheduler processing on the server. Also, there will always be some delay between typing the date and clicking on the 'Schedule Post' button. If the user types a future date for an already published post, the date will be reseted and he sees the message, that the post needs to be unpublished first. Once, the date is accepted, the label will change to 'Scheduled Date'.

- adds a CP 'timeScheduled' to post model, which will return `true` if the publish time is currently in the future.

- **Changes to the button flow in editor**:
- if the the CP `timeScheduled` returns true, a different drop-down-menu will be shown: 'Schedule Post' replaces 'Publish Now' and 'Unschedule' replaces 'Unpublish'.

- Covering the _edge cases_, especially when a scheduled post is about to be published, while the user is in the editor.
	- First, a new CP `scheduleCountdown` will return the remaining time, when the estimated publish time is 15 minutes from now. A notification with this live-ticker is shown next to the save button. Once, we reach a 2 minutes limit, another CP `statusFreeze` will return true and causes the save button to only show `Unschedule` in a red state, until we reach the publish time
	- Once the publish time is reached, a CP `scheduledWillPublish` causes the buttons and the existing code to pretend we're already dealing with a publish post. At the moment, there's no way to make a background-fetch of the now serverside-scheduled post model from the server, so Ember doesn't know about the changed state at that time.
	- Changes in the editor, which are done during this 'status freeze'-process will be saved back correctly, once the user hits 'Update Post' after the buttons changed back. A click on 'Unpublish' will change the status back to a draft.
	- The user will get a regular 'toaster' notification that the post has been published.

- adds CP `isScheduled` for scheduled posts
- adds CP `offset` to component `gh-posts-list-item` and helper `gh-format-time-scheduled` to show schedule date in content overview.
- sets timeout in `gh-spin-button` to 10ms for `Ember.testing`
- changes error message in `gh-editor-base-controller` to be in one line, seperated with a `:`

TODOs:
- [x] new sort order for posts (1. scheduled, 2. draft, 3. published) (refs TryGhost/Ghost#6932)
- [ ] Move posts sorting from posts controller to model and refactor to use `Ember.comparable` mixin
- [x] Flows for draft -> scheduled -> published like described in TryGhost/Ghost#6870 incl. edge cases and button behaviour
- [x] Tests
- [x] new PSM behaviour for time/date in future
- [x] display publishedAt date with timezone offset on posts overview
2016-06-13 17:01:42 +02:00

108 lines
3.9 KiB
JavaScript

import Ember from 'ember';
const {Component, computed} = Ember;
export default Component.extend({
tagName: 'section',
classNames: ['splitbtn', 'js-publish-splitbutton'],
classNameBindings: ['isNew:unsaved'],
isNew: null,
isPublished: null,
willPublish: null,
willSchedule: null,
timeScheduled: null,
postOrPage: null,
submitting: false,
statusFreeze: null,
scheduledWillPublish: false,
// Tracks whether we're going to change the state of the post on save
isDangerous: computed('isPublished', 'willPublish', 'willSchedule', 'isScheduled', 'scheduledWillPublish', 'statusFreeze', function () {
if (this.get('scheduledWillPublish')) {
if (this.get('willPublish') !== this.get('willSchedule')) {
return false;
} else {
return true;
}
} else {
if (this.get('isPublished') !== this.get('willPublish')) {
return true;
} else if (this.get('isScheduled') !== this.get('willSchedule')) {
return true;
} else if (this.get('statusFreeze')) {
// always show the save button in red, when we're 2 minutes before the scheduled date
return true;
} else {
return false;
}
}
}),
// Text for non-scheduled Posts
publishText: computed('isPublished', 'postOrPage', 'scheduledWillPublish', function () {
if (this.get('scheduledWillPublish')) {
return (this.get('willPublish') || this.get('willSchedule')) ? `Update ${this.get('postOrPage')}` : 'Publish Now';
} else {
return this.get('isPublished') ? `Update ${this.get('postOrPage')}` : 'Publish Now';
}
}),
draftText: computed('isPublished', 'scheduledWillPublish', function () {
if (this.get('scheduledWillPublish')) {
return (!this.get('willPublish') || !this.get('willSchedule')) ? 'Unpublish' : 'Save Draft';
} else {
return this.get('isPublished') ? 'Unpublish' : 'Save Draft';
}
}),
savePostText: computed('willPublish', 'publishText', 'postOrPage', 'draftText', 'scheduledWillPublish', 'willSchedule', function () {
// we have to show the menu for a published post when a scheduled post gets published while the user is in the
// editor and didn't refresh yet. To do so, we use the 'scheduledWillPublish' CP helper
if (this.get('scheduledWillPublish')) {
if (this.get('willSchedule') || this.get('willPublish')) {
return `Update ${this.get('postOrPage')}`;
} else {
return 'Unpublish';
}
} else {
return this.get('willPublish') ? this.get('publishText') : this.get('draftText');
}
}),
// Text for scheduled Posts
scheduleText: computed('isScheduled', 'postOrPage', function () {
return this.get('isScheduled') ? `Update ${this.get('postOrPage')}` : 'Schedule Post';
}),
unscheduleText: computed('isScheduled', function () {
return this.get('isScheduled') ? 'Unschedule' : 'Save Draft';
}),
saveScheduleText: computed('willSchedule', 'scheduleText', 'unscheduleText', function () {
return this.get('willSchedule') ? this.get('scheduleText') : this.get('unscheduleText');
}),
deleteText: computed('postOrPage', function () {
return `Delete ${this.get('postOrPage')}`;
}),
activeClass: computed('willPublish', 'willSchedule', function () {
return this.get('willPublish') || this.get('willSchedule') ? true : false;
}),
actions: {
save() {
this.sendAction('save');
},
setSaveType(saveType) {
this.sendAction('setSaveType', saveType);
},
delete() {
this.sendAction('delete');
}
}
});