mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-14 09:52:09 +03:00
c3883d4c6f
* Updated save buttons to reset state no issue Currently the save buttons across Admin don't auto-reset to idle state after success/failure on run which can give false impression once user changes any value. This PR auto-resets the button to idle state after a fixed timeout if no subsequent action is performed as a short term UX improvement. * Fixed success check for auto reset * Updated timeout value * Added explicit save button reset for pages * Updated save buttons to reset via shortcut Auto-reset for save buttons wasn't working if not done through manual click on task button previously, this handles by splitting the original save task in controller to handle shortcut saves. * Updated reset check for only successful tasks * Added save reset to code-injection and design settings Co-authored-by: Peter Zimon <peter.zimon@gmail.com>
280 lines
9.0 KiB
JavaScript
280 lines
9.0 KiB
JavaScript
/* eslint-disable ghost/ember/alias-model-in-controller */
|
|
import $ from 'jquery';
|
|
import Controller from '@ember/controller';
|
|
import NavigationItem from 'ghost-admin/models/navigation-item';
|
|
import RSVP from 'rsvp';
|
|
import {computed} from '@ember/object';
|
|
import {isEmpty} from '@ember/utils';
|
|
import {isThemeValidationError} from 'ghost-admin/services/ajax';
|
|
import {notEmpty} from '@ember/object/computed';
|
|
import {inject as service} from '@ember/service';
|
|
import {task, timeout} from 'ember-concurrency';
|
|
|
|
export default Controller.extend({
|
|
config: service(),
|
|
ghostPaths: service(),
|
|
notifications: service(),
|
|
session: service(),
|
|
settings: service(),
|
|
|
|
dirtyAttributes: false,
|
|
newNavItem: null,
|
|
newSecondaryNavItem: null,
|
|
themes: null,
|
|
themeToDelete: null,
|
|
|
|
init() {
|
|
this._super(...arguments);
|
|
this.set('newNavItem', NavigationItem.create({isNew: true}));
|
|
this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
|
|
},
|
|
|
|
showDeleteThemeModal: notEmpty('themeToDelete'),
|
|
|
|
blogUrl: computed('config.blogUrl', function () {
|
|
let url = this.get('config.blogUrl');
|
|
|
|
return url.slice(-1) !== '/' ? `${url}/` : url;
|
|
}),
|
|
|
|
actions: {
|
|
save() {
|
|
this.save.perform();
|
|
},
|
|
|
|
addNavItem(item) {
|
|
// If the url sent through is blank (user never edited the url)
|
|
if (item.get('url') === '') {
|
|
item.set('url', '/');
|
|
}
|
|
|
|
return item.validate().then(() => {
|
|
this.addNewNavItem(item);
|
|
});
|
|
},
|
|
|
|
deleteNavItem(item) {
|
|
if (!item) {
|
|
return;
|
|
}
|
|
|
|
let navItems = item.isSecondary ? this.get('settings.secondaryNavigation') : this.get('settings.navigation');
|
|
|
|
navItems.removeObject(item);
|
|
this.set('dirtyAttributes', true);
|
|
},
|
|
|
|
updateLabel(label, navItem) {
|
|
if (!navItem) {
|
|
return;
|
|
}
|
|
|
|
navItem.set('label', label);
|
|
this.set('dirtyAttributes', true);
|
|
},
|
|
|
|
updateUrl(url, navItem) {
|
|
if (!navItem) {
|
|
return;
|
|
}
|
|
|
|
navItem.set('url', url);
|
|
this.set('dirtyAttributes', true);
|
|
|
|
return url;
|
|
},
|
|
|
|
toggleLeaveSettingsModal(transition) {
|
|
let leaveTransition = this.leaveSettingsTransition;
|
|
|
|
if (!transition && this.showLeaveSettingsModal) {
|
|
this.set('leaveSettingsTransition', null);
|
|
this.set('showLeaveSettingsModal', false);
|
|
return;
|
|
}
|
|
|
|
if (!leaveTransition || transition.targetName === leaveTransition.targetName) {
|
|
this.set('leaveSettingsTransition', transition);
|
|
|
|
// if a save is running, wait for it to finish then transition
|
|
if (this.get('save.isRunning')) {
|
|
return this.get('save.last').then(() => {
|
|
transition.retry();
|
|
});
|
|
}
|
|
|
|
// we genuinely have unsaved data, show the modal
|
|
this.set('showLeaveSettingsModal', true);
|
|
}
|
|
},
|
|
|
|
leaveSettings() {
|
|
let transition = this.leaveSettingsTransition;
|
|
let settings = this.settings;
|
|
|
|
if (!transition) {
|
|
this.notifications.showAlert('Sorry, there was an error in the application. Please let the Ghost team know what happened.', {type: 'error'});
|
|
return;
|
|
}
|
|
|
|
// roll back changes on settings props
|
|
settings.rollbackAttributes();
|
|
this.set('dirtyAttributes', false);
|
|
|
|
return transition.retry();
|
|
},
|
|
|
|
activateTheme(theme) {
|
|
return theme.activate().then((theme) => {
|
|
if (!isEmpty(theme.get('warnings'))) {
|
|
this.set('themeWarnings', theme.get('warnings'));
|
|
this.set('showThemeWarningsModal', true);
|
|
}
|
|
|
|
if (!isEmpty(theme.get('errors'))) {
|
|
this.set('themeErrors', theme.get('errors'));
|
|
this.set('showThemeWarningsModal', true);
|
|
}
|
|
}).catch((error) => {
|
|
if (isThemeValidationError(error)) {
|
|
let errors = error.payload.errors[0].details.errors;
|
|
let fatalErrors = [];
|
|
let normalErrors = [];
|
|
|
|
// to have a proper grouping of fatal errors and none fatal, we need to check
|
|
// our errors for the fatal property
|
|
if (errors.length > 0) {
|
|
for (let i = 0; i < errors.length; i += 1) {
|
|
if (errors[i].fatal) {
|
|
fatalErrors.push(errors[i]);
|
|
} else {
|
|
normalErrors.push(errors[i]);
|
|
}
|
|
}
|
|
}
|
|
|
|
this.set('themeErrors', normalErrors);
|
|
this.set('themeFatalErrors', fatalErrors);
|
|
this.set('showThemeErrorsModal', true);
|
|
return;
|
|
}
|
|
|
|
throw error;
|
|
});
|
|
},
|
|
|
|
downloadTheme(theme) {
|
|
let downloadURL = `${this.get('ghostPaths.apiRoot')}/themes/${theme.name}/download/`;
|
|
let iframe = $('#iframeDownload');
|
|
|
|
if (iframe.length === 0) {
|
|
iframe = $('<iframe>', {id: 'iframeDownload'}).hide().appendTo('body');
|
|
}
|
|
|
|
iframe.attr('src', downloadURL);
|
|
},
|
|
|
|
deleteTheme(theme) {
|
|
if (theme) {
|
|
return this.set('themeToDelete', theme);
|
|
}
|
|
|
|
return this._deleteTheme();
|
|
},
|
|
|
|
hideDeleteThemeModal() {
|
|
this.set('themeToDelete', null);
|
|
},
|
|
|
|
hideThemeWarningsModal() {
|
|
this.set('themeWarnings', null);
|
|
this.set('themeErrors', null);
|
|
this.set('themeFatalErrors', null);
|
|
this.set('showThemeWarningsModal', false);
|
|
this.set('showThemeErrorsModal', false);
|
|
},
|
|
|
|
reset() {
|
|
this.set('newNavItem', NavigationItem.create({isNew: true}));
|
|
this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
|
|
}
|
|
},
|
|
|
|
saveTask: task(function* () {
|
|
let navItems = this.get('settings.navigation');
|
|
let secondaryNavItems = this.get('settings.secondaryNavigation');
|
|
|
|
let notifications = this.notifications;
|
|
let validationPromises = [];
|
|
|
|
if (!this.newNavItem.get('isBlank')) {
|
|
validationPromises.pushObject(this.send('addNavItem', this.newNavItem));
|
|
}
|
|
|
|
if (!this.newSecondaryNavItem.get('isBlank')) {
|
|
validationPromises.pushObject(this.send('addNavItem', this.newSecondaryNavItem));
|
|
}
|
|
|
|
navItems.map((item) => {
|
|
validationPromises.pushObject(item.validate());
|
|
});
|
|
|
|
secondaryNavItems.map((item) => {
|
|
validationPromises.pushObject(item.validate());
|
|
});
|
|
|
|
try {
|
|
yield RSVP.all(validationPromises);
|
|
this.set('dirtyAttributes', false);
|
|
return yield this.settings.save();
|
|
} catch (error) {
|
|
if (error) {
|
|
notifications.showAPIError(error);
|
|
throw error;
|
|
}
|
|
}
|
|
}),
|
|
|
|
save: task(function* () {
|
|
yield this.saveTask.perform();
|
|
yield timeout(2500);
|
|
if (this.get('saveTask.last.isSuccessful') && this.get('saveTask.last.value')) {
|
|
// Reset last task to bring button back to idle state
|
|
yield this.set('saveTask.last', null);
|
|
}
|
|
}),
|
|
|
|
addNewNavItem(item) {
|
|
let navItems = item.isSecondary ? this.get('settings.secondaryNavigation') : this.get('settings.navigation');
|
|
|
|
item.set('isNew', false);
|
|
navItems.pushObject(item);
|
|
this.set('dirtyAttributes', true);
|
|
|
|
if (item.isSecondary) {
|
|
this.set('newSecondaryNavItem', NavigationItem.create({isNew: true, isSecondary: true}));
|
|
$('.gh-blognav-container:last .gh-blognav-line:last input:first').focus();
|
|
} else {
|
|
this.set('newNavItem', NavigationItem.create({isNew: true}));
|
|
$('.gh-blognav-container:first .gh-blognav-line:last input:first').focus();
|
|
}
|
|
},
|
|
|
|
_deleteTheme() {
|
|
let theme = this.store.peekRecord('theme', this.themeToDelete.name);
|
|
|
|
if (!theme) {
|
|
return;
|
|
}
|
|
|
|
return theme.destroyRecord().then(() => {
|
|
// HACK: this is a private method, we need to unload from the store
|
|
// here so that uploading another theme with the same "id" doesn't
|
|
// attempt to update the deleted record
|
|
theme.unloadRecord();
|
|
}).catch((error) => {
|
|
this.notifications.showAPIError(error);
|
|
});
|
|
}
|
|
});
|