Ghost/ghost/admin/app/controllers/settings/integrations/amp.js
Rishabh Garg c3883d4c6f 💄Updated save buttons to reset state (#1522)
* 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>
2020-04-06 16:17:28 +05:30

88 lines
2.6 KiB
JavaScript

/* eslint-disable ghost/ember/alias-model-in-controller */
import Controller from '@ember/controller';
import {alias} from '@ember/object/computed';
import {inject as service} from '@ember/service';
import {task, timeout} from 'ember-concurrency';
export default Controller.extend({
notifications: service(),
settings: service(),
leaveSettingsTransition: null,
ampSettings: alias('settings.amp'),
actions: {
update(value) {
this.set('ampSettings', value);
},
save() {
this.save.perform();
},
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 model
settings.rollbackAttributes();
return transition.retry();
}
},
saveTask: task(function* () {
let amp = this.ampSettings;
let settings = this.settings;
settings.set('amp', amp);
try {
return yield settings.save();
} catch (error) {
this.notifications.showAPIError(error);
throw error;
}
}).drop(),
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);
}
}).drop()
});