Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Converted <Settings::MembersEmailLabs> to Glimmer component

Browse source 
refs https://github.com/TryGhost/Team/issues/1441

- bringing code up to more modern style ready for further development
This commit is contained in:
Kevin Ansfield 2022-04-01 15:32:24 +01:00
parent 93f30eadb7
commit ec5a080d56
1 changed files with 51 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

115
ghost/admin/app/components/settings/members-email-labs.js
View file

@ -1,13 +1,12 @@
import Component from '@ember/component';
import classic from 'ember-classic-decorator';
import {action, computed} from '@ember/object';
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
import {tracked} from '@glimmer/tracking';
const US = {flag: '🇺🇸', name: 'US', baseUrl: 'https://api.mailgun.net/v3'};
const EU = {flag: '🇪🇺', name: 'EU', baseUrl: 'https://api.eu.mailgun.net/v3'};
@classic
export default class MembersEmailLabs extends Component {
@service config;
@service ghostPaths;
@ -15,36 +14,48 @@ export default class MembersEmailLabs extends Component {
@service settings;
@service newsletters;
replyAddresses = null;
recipientsSelectValue = null;
showFromAddressConfirmation = false;
showEmailDesignSettings = false;
// set recipientsSelectValue as a static property because within this
// component's lifecycle it's not always derived from the settings values.
// e.g. can be set to "segment" when the filter is empty which is not derivable
// from settings as it would equate to "none"
@tracked recipientsSelectValue = this._getDerivedRecipientsSelectValue();
@tracked showFromAddressConfirmation = false;
@tracked showEmailDesignSettings = false;
mailgunRegions = [US, EU];
replyAddresses = [
{
label: 'Newsletter email address (' + this.fromAddress + ')',
value: 'newsletter'
},
{
label: 'Support email address (' + this.supportAddress + ')',
value: 'support'
}
];
@computed('settings.editorDefaultEmailRecipients')
get emailNewsletterEnabled() {
return this.get('settings.editorDefaultEmailRecipients') !== 'disabled';
return this.settings.get('editorDefaultEmailRecipients') !== 'disabled';
}
@computed('recipientsSelectValue')
get emailPreviewVisible() {
return this.recipientsSelectValue !== 'none';
}
@computed('settings.membersReplyAddress')
get selectedReplyAddress() {
return this.replyAddresses.findBy('value', this.get('settings.membersReplyAddress'));
return this.replyAddresses.findBy('value', this.settings.get('membersReplyAddress'));
}
@computed('fromAddress')
get disableUpdateFromAddressButton() {
const savedFromAddress = this.get('settings.membersFromAddress') || '';
const savedFromAddress = this.settings.get('membersFromAddress') || '';
if (!savedFromAddress.includes('@') && this.config.emailDomain) {
return !this.fromAddress || (this.fromAddress === `${savedFromAddress}@${this.config.emailDomain}`);
}
return !this.fromAddress || (this.fromAddress === savedFromAddress);
}
@computed('settings.mailgunBaseUrl')
get mailgunRegion() {
if (!this.settings.get('mailgunBaseUrl')) {
return US;
@ -55,75 +66,51 @@ export default class MembersEmailLabs extends Component {
});
}
@computed('settings.{mailgunBaseUrl,mailgunApiKey,mailgunDomain}')
get mailgunSettings() {
return {
apiKey: this.get('settings.mailgunApiKey') || '',
domain: this.get('settings.mailgunDomain') || '',
baseUrl: this.get('settings.mailgunBaseUrl') || ''
apiKey: this.settings.get('mailgunApiKey') || '',
domain: this.settings.get('mailgunDomain') || '',
baseUrl: this.settings.get('mailgunBaseUrl') || ''
};
}
@computed('newsletters.newsletters.@each.status')
get activeNewsletterCount() {
return this.newsletters.newsletters.filter(n => n.status === 'active').length;
}
@computed('newsletters.newsletters.@each.status')
get archivedNewsletterCount() {
return this.newsletters.newsletters.filter(n => n.status === 'archived').length;
}
init() {
super.init(...arguments);
this.set('mailgunRegions', [US, EU]);
this.set('replyAddresses', [
{
label: 'Newsletter email address (' + this.fromAddress + ')',
value: 'newsletter'
},
{
label: 'Support email address (' + this.supportAddress + ')',
value: 'support'
}
]);
// set recipientsSelectValue as a static property because within this
// component's lifecycle it's not always derived from the settings values.
// e.g. can be set to "segment" when the filter is empty which is not derivable
// from settings as it would equate to "none"
this.set('recipientsSelectValue', this._getDerivedRecipientsSelectValue());
}
@action
toggleFromAddressConfirmation() {
this.toggleProperty('showFromAddressConfirmation');
this.showFromAddressConfirmation = !this.showFromAddressConfirmation;
}
@action
closeEmailDesignSettings() {
this.set('showEmailDesignSettings', false);
this.showEmailDesignSettings = false;
}
@action
setMailgunDomain(event) {
this.set('settings.mailgunDomain', event.target.value);
if (!this.get('settings.mailgunBaseUrl')) {
this.set('settings.mailgunBaseUrl', this.mailgunRegion.baseUrl);
this.settings.set('mailgunDomain', event.target.value);
if (!this.settings.get('mailgunBaseUrl')) {
this.settings.set('mailgunBaseUrl', this.mailgunRegion.baseUrl);
}
}
@action
setMailgunApiKey(event) {
this.set('settings.mailgunApiKey', event.target.value);
if (!this.get('settings.mailgunBaseUrl')) {
this.set('settings.mailgunBaseUrl', this.mailgunRegion.baseUrl);
this.settings.set('mailgunApiKey', event.target.value);
if (!this.settings.get('mailgunBaseUrl')) {
this.settings.set('mailgunBaseUrl', this.mailgunRegion.baseUrl);
}
}
@action
setMailgunRegion(region) {
this.set('settings.mailgunBaseUrl', region.baseUrl);
this.settings.set('mailgunBaseUrl', region.baseUrl);
}
@action
@ -136,7 +123,7 @@ export default class MembersEmailLabs extends Component {
if (event) {
event.preventDefault();
}
this.set('settings.emailTrackOpens', !this.settings.get('emailTrackOpens'));
this.settings.set('emailTrackOpens', !this.settings.get('emailTrackOpens'));
}
@action
@ -148,20 +135,20 @@ export default class MembersEmailLabs extends Component {
const newsletterEnabled = !this.emailNewsletterEnabled;
if (newsletterEnabled) {
this.set('settings.editorDefaultEmailRecipients', 'visibility');
this.settings.set('editorDefaultEmailRecipients', 'visibility');
} else {
this.set('settings.editorDefaultEmailRecipients', 'disabled');
this.set('settings.editorDefaultEmailRecipientsFilter', null);
this.settings.set('editorDefaultEmailRecipients', 'disabled');
this.settings.set('editorDefaultEmailRecipientsFilter', null);
}
this.set('recipientsSelectValue', this._getDerivedRecipientsSelectValue());
this.recipientsSelectValue = this._getDerivedRecipientsSelectValue();
}
@action
setReplyAddress(event) {
const newReplyAddress = event.value;
this.set('settings.membersReplyAddress', newReplyAddress);
this.settings.set('membersReplyAddress', newReplyAddress);
}
@action
@ -189,7 +176,7 @@ export default class MembersEmailLabs extends Component {
// Update the value used to display the selected recipients option explicitly
// because it's local non-derived state
this.set('recipientsSelectValue', value);
this.recipientsSelectValue = value;
}
@action
@ -207,8 +194,9 @@ export default class MembersEmailLabs extends Component {
this.newsletters.add();
}
@(task(function* () {
let url = this.get('ghostPaths.url').api('/settings/members/email');
@task({drop: true})
*updateFromAddress() {
let url = this.ghostPaths.url.api('/settings/members/email');
try {
const response = yield this.ajax.post(url, {
data: {
@ -216,14 +204,13 @@ export default class MembersEmailLabs extends Component {
type: 'fromAddressUpdate'
}
});
this.toggleProperty('showFromAddressConfirmation');
this.toggleFromAddressConfirmation();
return response;
} catch (e) {
// Failed to send email, retry
return false;
}
}).drop())
updateFromAddress;
}
_getDerivedRecipientsSelectValue() {
const defaultEmailRecipients = this.settings.get('editorDefaultEmailRecipients');