Ghost/ghost/admin/app/components/gh-navitem.js
Aileen Nowak 34e15f0619 🎨 Added confirmation dialogs when leaving screens with unsaved changes (#891)
closes TryGhost/Ghost#9119, refs TryGhost/Ghost#8483

- Apps - AMP
   - Added `leave-settings-modal` component to Settings - Apps - AMP
- Apps - Slack
   - Added `leave-settings-modal` component to Settings - Apps - Slack
   - Added a `triggerDirtyState` action that will uses a new Array with the input data to trigger the dirty state on the parent settings model
- Apps - Unsplash
   - Added `leave-settings-modal` component to Settings - Apps - Unsplash
   - Used manual tracking of changes with using a custom `dirtyAttributes` property and a `rollbackValue` to manually rollback the `isActive` attribute on the model
- Code injection
   - Added `leave-settings-modal` component to Settings - Code injection
- Design
   - Added `leave-settings-modal` component to Settings - Design (only for navigation model)
   - Used manual tracking of changes with using a custom `dirtyAttributes`
   - Added an additional `updateLabel` action to underlying `gh-navitem` component which gets fired on the `focusOut` event, to detect changes on the label
- Team - User
   - Added `leave-settings-modal` component to Team - User
   - Used manual tracking of changes with using a custom `dirtyAttributes` to track changes in slug and role properties
2017-10-31 15:27:25 +00:00

58 lines
1.5 KiB
JavaScript

import Component from '@ember/component';
import ValidationState from 'ghost-admin/mixins/validation-state';
import {alias, readOnly} from '@ember/object/computed';
import {computed} from '@ember/object';
import {run} from '@ember/runloop';
export default Component.extend(ValidationState, {
classNames: 'gh-blognav-item',
classNameBindings: ['errorClass', 'navItem.isNew::gh-blognav-item--sortable'],
new: false,
model: alias('navItem'),
errors: readOnly('navItem.errors'),
errorClass: computed('hasError', function () {
if (this.get('hasError')) {
return 'gh-blognav-item--error';
}
}),
keyPress(event) {
// enter key
if (event.keyCode === 13 && this.get('navItem.isNew')) {
event.preventDefault();
run.scheduleOnce('actions', this, function () {
this.send('addItem');
});
}
},
actions: {
addItem() {
this.sendAction('addItem');
},
deleteItem(item) {
this.sendAction('deleteItem', item);
},
updateUrl(value) {
this.sendAction('updateUrl', value, this.get('navItem'));
},
updateLabel(value) {
this.sendAction('updateLabel', value, this.get('navItem'));
},
clearLabelErrors() {
this.get('navItem.errors').remove('label');
},
clearUrlErrors() {
this.get('navItem.errors').remove('url');
}
}
});