Ghost/ghost/admin/app/controllers/settings/navigation.js
jbenezech b9dd9f066d
🐛 Fixed settings overriden when updated from multiple tabs (#15536)
closes: https://github.com/TryGhost/Ghost/issues/15470

- When multiple browser tabs are open, each manipulate a different copy of ember data model, changes to the model in one tab are not reflected in the model of the other tab.
- When updating some settings, all current settings were sent to the API.
- As a result, when updating two different categories of settings (navigation/code inspection) in different tabs, the second update was overriding the first one.
- From a user perspective, this is not a natural behaviour. Only settings visible on-screen when clicking save should be modified.

Co-authored-by: Kevin Ansfield <kevin@lookingsideways.co.uk>
2022-10-12 14:03:54 +01:00

145 lines
3.9 KiB
JavaScript

import Controller from '@ember/controller';
import NavigationItem from 'ghost-admin/models/navigation-item';
import RSVP from 'rsvp';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
export default class NavigationController extends Controller {
@service config;
@service ghostPaths;
@service notifications;
@service session;
@service settings;
@tracked dirtyAttributes = false;
@tracked newNavItem = NavigationItem.create({isNew: true});
@tracked newSecondaryNavItem = NavigationItem.create({isNew: true, isSecondary: true});
get blogUrl() {
let url = this.config.blogUrl;
return url.slice(-1) !== '/' ? `${url}/` : url;
}
@action
save() {
this.saveTask.perform();
}
@action
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);
});
}
@action
deleteNavItem(item) {
if (!item) {
return;
}
let navItems = item.isSecondary ? this.settings.secondaryNavigation : this.settings.navigation;
navItems.removeObject(item);
this.dirtyAttributes = true;
}
@action
updateLabel(label, navItem) {
if (!navItem) {
return;
}
if (navItem.get('label') !== label) {
navItem.set('label', label);
this.dirtyAttributes = true;
}
}
@action
updateUrl(url, navItem) {
if (!navItem) {
return;
}
if (navItem.get('url') !== url) {
navItem.set('url', url);
this.dirtyAttributes = true;
}
return url;
}
@action
reset() {
this.newNavItem = NavigationItem.create({isNew: true});
this.newSecondaryNavItem = NavigationItem.create({isNew: true, isSecondary: true});
}
addNewNavItem(item) {
let navItems = item.isSecondary ? this.settings.secondaryNavigation : this.settings.navigation;
item.set('isNew', false);
navItems.pushObject(item);
this.dirtyAttributes = true;
if (item.isSecondary) {
this.newSecondaryNavItem = NavigationItem.create({isNew: true, isSecondary: true});
} else {
this.newNavItem = NavigationItem.create({isNew: true});
}
}
@task
*saveTask() {
let navItems = this.settings.navigation;
let secondaryNavItems = this.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.forEach((item) => {
validationPromises.pushObject(item.validate());
});
secondaryNavItems.forEach((item) => {
validationPromises.pushObject(item.validate());
});
try {
yield RSVP.all(validationPromises);
// If some attributes have been changed, rebuild
// the model arrays or changes will not be detected
if (this.dirtyAttributes) {
this.settings.navigation = [...this.settings.navigation];
this.settings.secondaryNavigation = [...this.settings.secondaryNavigation];
}
this.dirtyAttributes = false;
return yield this.settings.save();
} catch (error) {
if (error) {
notifications.showAPIError(error);
throw error;
}
}
}
}