Added explicit count of paid members to email confirmation modal

closes https://github.com/TryGhost/Ghost/issues/12112

- perform a paid members list query with a limit of 1 when the modal is displayed if the post is set to members only, then use the pagination meta data to get a total number of members
- display a spinner and disable the confirm button whilst the count query is in progress
- does not display any counts for users with the Editor role as they do not have permission to list members
This commit is contained in:
Kevin Ansfield 2020-08-10 12:27:16 +01:00
parent 197f554c11
commit d2456947bd
2 changed files with 35 additions and 20 deletions

View File

@ -4,12 +4,26 @@
</header>
<button class="close" title="Close" {{on "click" this.closeModal}}>{{svg-jar "close"}}<span class="hidden">Close</span></button>
<div class="modal-body">
<p>
Your post will be delivered to
<strong>{{this.deliveredToMessage}}</strong>
and will be published on your site{{#if this.model.isScheduled}} at the scheduled time{{/if}}. Sound good?
</p>
<div class="modal-body" {{did-insert this.countPaidMembers}}>
{{#if this.countPaidMembersTask.isRunning}}
<div class="flex flex-column items-center">
<div class="gh-loading-spinner"></div>
</div>
{{else}}
<p>
Your post will be delivered to
<strong>
{{#if this.model.paidOnly}}
{{!-- TODO: remove editor fallback once editors can query member counts --}}
{{if this.session.user.isEditor "all paid members" (gh-pluralize this.paidMemberCount "paid member")}}
{{else}}
{{!-- TODO: remove editor fallback once editors can query member counts --}}
{{if this.session.user.isEditor "all members" (gh-pluralize this.model.memberCount "member")}}
{{/if}}
</strong>
and will be published on your site{{#if this.model.isScheduled}} at the scheduled time{{/if}}. Sound good?
</p>
{{/if}}
</div>
<div class="modal-footer">
@ -17,9 +31,10 @@
<span>Cancel</span>
</button>
<GhTaskButton
@disabled={{this.countPaidMembersTask.isRunning}}
@buttonText={{if this.model.isScheduled "Schedule" "Publish and send"}}
@runningText={{if this.model.isScheduled "Scheduling..." "Publishing..."}}
@task={{this.confirmAndCheckError}}
@task={{this.confirmAndCheckErrorTask}}
@class="gh-btn gh-btn-green gh-btn-icon"
data-test-button="confirm-publish-and-email"
/>

View File

@ -1,31 +1,31 @@
import ModalComponent from 'ghost-admin/components/modal-base';
import {computed} from '@ember/object';
import {ghPluralize} from 'ghost-admin/helpers/gh-pluralize';
import {action} from '@ember/object';
import {inject as service} from '@ember/service';
import {task} from 'ember-concurrency';
export default ModalComponent.extend({
session: service(),
store: service(),
errorMessage: null,
paidMemberCount: null,
// Allowed actions
confirm: () => {},
deliveredToMessage: computed('model.{paidOnly,memberCount}', function () {
const isEditor = this.get('session.user.isEditor');
if (this.get('model.paidOnly')) {
return 'all paid members';
countPaidMembers: action(function () {
// TODO: remove editor conditional once editors can query member counts
if (this.model.paidOnly && !this.session.get('user.isEditor')) {
this.countPaidMembersTask.perform();
}
if (isEditor) {
return 'all members';
}
return ghPluralize(this.get('model.memberCount'), 'member');
}),
confirmAndCheckError: task(function* () {
countPaidMembersTask: task(function* () {
const result = yield this.store.query('member', {filter: 'subscribed:true', paid: true, limit: 1, page: 1});
this.set('paidMemberCount', result.meta.pagination.total);
}),
confirmAndCheckErrorTask: task(function* () {
try {
yield this.confirm();
this.closeModal();