From d10e102de4fad5bb2026ca3297671c6d0049ce0d Mon Sep 17 00:00:00 2001 From: Kevin Ansfield Date: Tue, 28 Sep 2021 16:12:01 +0100 Subject: [PATCH] Wired up saving of custom theme settings refs https://github.com/TryGhost/Team/issues/1070 - split select form component into it's own component so it's cleaner when we get to additional setting types - added change handler that updates the setting record's value when a new option is selected - added `.isDirty` to the custom-theme-settings service so we can warn of unsaved changes and revert any changed values when needed - added save of custom theme settings to the customize design modal's save routine - added missing `notifications` service import to customize design controller --- .../custom-theme-settings/select.hbs | 16 +++++++++++ .../custom-theme-settings/select.js | 15 +++++++++++ .../design/customize/theme-settings.hbs | 27 +++++-------------- .../controllers/settings/design/customize.js | 13 +++++++-- .../app/routes/settings/design/customize.js | 6 +++-- .../app/services/custom-theme-settings.js | 5 ++++ 6 files changed, 58 insertions(+), 24 deletions(-) create mode 100644 ghost/admin/app/components/custom-theme-settings/select.hbs create mode 100644 ghost/admin/app/components/custom-theme-settings/select.js diff --git a/ghost/admin/app/components/custom-theme-settings/select.hbs b/ghost/admin/app/components/custom-theme-settings/select.hbs new file mode 100644 index 0000000000..18dcaaad92 --- /dev/null +++ b/ghost/admin/app/components/custom-theme-settings/select.hbs @@ -0,0 +1,16 @@ +
+
+ + + +
+
\ No newline at end of file diff --git a/ghost/admin/app/components/custom-theme-settings/select.js b/ghost/admin/app/components/custom-theme-settings/select.js new file mode 100644 index 0000000000..4d6ad1941c --- /dev/null +++ b/ghost/admin/app/components/custom-theme-settings/select.js @@ -0,0 +1,15 @@ +import Component from '@glimmer/component'; +import {action} from '@ember/object'; +import {camelize} from '@ember/string'; +import {guidFor} from '@ember/object/internals'; + +export default class CustomThemeSettingsSelectComponent extends Component { + selectId = `select-${guidFor(this)}`; + selectName = camelize(this.args.setting.key); + + @action + setSelection(changeEvent) { + const value = changeEvent.target.value; + this.args.setting.set('value', value); + } +} diff --git a/ghost/admin/app/components/modals/design/customize/theme-settings.hbs b/ghost/admin/app/components/modals/design/customize/theme-settings.hbs index 4ccf11ba7f..2b1a0dd3b4 100644 --- a/ghost/admin/app/components/modals/design/customize/theme-settings.hbs +++ b/ghost/admin/app/components/modals/design/customize/theme-settings.hbs @@ -1,22 +1,9 @@
- {{#each @themeSettings as |setting index|}} - {{#if (eq setting.type "select")}} -
-
-
- {{humanize setting.key}} -
- - -
-
- {{/if}} - {{/each}} +
+ {{#each @themeSettings as |setting index|}} + {{#if (eq setting.type "select")}} + + {{/if}} + {{/each}} +
\ No newline at end of file diff --git a/ghost/admin/app/controllers/settings/design/customize.js b/ghost/admin/app/controllers/settings/design/customize.js index 22711c73f5..0ecd1155d2 100644 --- a/ghost/admin/app/controllers/settings/design/customize.js +++ b/ghost/admin/app/controllers/settings/design/customize.js @@ -3,8 +3,10 @@ import {inject as service} from '@ember/service'; import {task} from 'ember-concurrency-decorators'; export default class SettingsDesignCustomizeController extends Controller { - @service settings; + @service customThemeSettings; + @service notifications; @service router; + @service settings; @task *saveTask() { @@ -12,8 +14,15 @@ export default class SettingsDesignCustomizeController extends Controller { if (this.settings.get('errors').length !== 0) { return; } - yield this.settings.save(); + + yield Promise.all( + this.settings.save(), + this.customThemeSettings.save() + ); + this.router.transitionTo('settings.design'); + + // ensure task button switches to success state return true; } catch (error) { if (error) { diff --git a/ghost/admin/app/routes/settings/design/customize.js b/ghost/admin/app/routes/settings/design/customize.js index c378fe9293..64a853fabb 100644 --- a/ghost/admin/app/routes/settings/design/customize.js +++ b/ghost/admin/app/routes/settings/design/customize.js @@ -4,6 +4,7 @@ import {bind} from '@ember/runloop'; import {inject as service} from '@ember/service'; export default class SettingsDesignCustomizeRoute extends AuthenticatedRoute { + @service customThemeSettings; @service feature; @service modals; @service settings; @@ -35,7 +36,7 @@ export default class SettingsDesignCustomizeRoute extends AuthenticatedRoute { @action async willTransition(transition) { - if (this.settings.get('hasDirtyAttributes')) { + if (this.settings.get('hasDirtyAttributes') || this.customThemeSettings.isDirty) { transition.abort(); const shouldLeave = await this.confirmUnsavedChanges(); @@ -73,7 +74,7 @@ export default class SettingsDesignCustomizeRoute extends AuthenticatedRoute { } confirmUnsavedChanges() { - if (!this.settings.get('hasDirtyAttributes')) { + if (!this.settings.get('hasDirtyAttributes') && !this.customThemeSettings.isDirty) { return Promise.resolve(true); } @@ -83,6 +84,7 @@ export default class SettingsDesignCustomizeRoute extends AuthenticatedRoute { }).then((discardChanges) => { if (discardChanges === true) { this.settings.rollbackAttributes(); + this.customThemeSettings.rollback(); } return discardChanges; }).finally(() => { diff --git a/ghost/admin/app/services/custom-theme-settings.js b/ghost/admin/app/services/custom-theme-settings.js index 6336d1ca12..19d94839cd 100644 --- a/ghost/admin/app/services/custom-theme-settings.js +++ b/ghost/admin/app/services/custom-theme-settings.js @@ -9,6 +9,11 @@ export default class CustomThemeSettingsServices extends Service { @tracked settings = []; + get isDirty() { + const dirtySetting = this.settings.find(setting => setting.hasDirtyAttributes); + return !!dirtySetting; + } + load() { return this.loadTask.perform(); }