Added number formatting to members import

no refs.
- added number formatting to all the screens of members import
This commit is contained in:
Peter Zimon 2020-07-08 15:51:12 +02:00
parent 2da05338dd
commit 3f0f3f1b68
3 changed files with 13 additions and 13 deletions

View File

@ -4,7 +4,7 @@
<th class="table-cell-field"><span class="f-small midgrey ttu fw5">Field</span></th> <th class="table-cell-field"><span class="f-small midgrey ttu fw5">Field</span></th>
<th class="table-cell-data"> <th class="table-cell-data">
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span class="f-small midgrey ttu fw5 nudge-top--1">Data <span class="midlightgrey fw4">({{this.currentRecord}} of {{this.allRecords}})</span></span> <span class="f-small midgrey ttu fw5 nudge-top--1">Data <span class="midlightgrey fw4">({{format-number this.currentRecord}} of {{format-number this.allRecords}})</span></span>
<div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav"> <div class="flex items-center bg-white br2 ml1 nr1 gh-members-import-datanav">
<a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey {{unless this.hasPrevRecord "o-30"}}" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a> <a href="#" {{action "prev"}} class="pa1 flex items-center justify-center br b--whitegrey {{unless this.hasPrevRecord "o-30"}}" data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 fill-middarkgrey" }}</a>
<a href="#" {{action "next"}} class="pa1 flex items-center justify-center {{unless this.hasNextRecord "o-30"}}" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a> <a href="#" {{action "next"}} class="pa1 flex items-center justify-center {{unless this.hasNextRecord "o-30"}}" data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 fill-middarkgrey" }}</a>

View File

@ -18,11 +18,11 @@
<div class="ba b--whitegrey br3 middarkgrey bg-whitegrey-l2"> <div class="ba b--whitegrey br3 middarkgrey bg-whitegrey-l2">
<div class="flex items-start"> <div class="flex items-start">
<div class="w-50 gh-member-import-result-summary"> <div class="w-50 gh-member-import-result-summary">
<h2>{{this.importResponse.imported.count}}</h2> <h2>{{format-number this.importResponse.imported.count}}</h2>
<p>{{pluralize this.importResponse.imported.count "Member" without-count=true}} added</p> <p>{{pluralize this.importResponse.imported.count "Member" without-count=true}} added</p>
</div> </div>
<div class="bl b--whitegrey w-50 gh-member-import-result-summary"> <div class="bl b--whitegrey w-50 gh-member-import-result-summary">
<h2>{{this.importResponse.invalid.count}}</h2> <h2>{{format-number this.importResponse.invalid.count}}</h2>
<p>{{pluralize this.importResponse.invalid.count "Error" without-count=true}}</p> <p>{{pluralize this.importResponse.invalid.count "Error" without-count=true}}</p>
</div> </div>
</div> </div>
@ -33,11 +33,11 @@
<div class="flex items-start"> <div class="flex items-start">
{{svg-jar "warning" class="w5 h5 fill-red nudge-top--3 mr3"}} {{svg-jar "warning" class="w5 h5 fill-red nudge-top--3 mr3"}}
<div class="flex-grow w-100"> <div class="flex-grow w-100">
<p class="ma0 pa0">{{pluralize this.importResponse.invalid.count "member"}} were skipped due to the following errors:</p> <p class="ma0 pa0">{{format-number this.importResponse.invalid.count}} {{pluralize this.importResponse.invalid.count "member" without-count=true}} were skipped due to the following errors:</p>
{{#if this.config.enableDeveloperExperiments}} {{#if this.config.enableDeveloperExperiments}}
<ul class="ma0 pa0 mt4 list bt b--whitegrey"> <ul class="ma0 pa0 mt4 list bt b--whitegrey">
{{#each this.importResponse.invalid.errors as |error|}} {{#each this.importResponse.invalid.errors as |error|}}
<li class="gh-members-import-errormessage">{{error.message}} <span class="fw6">({{error.count}})</span></li> <li class="gh-members-import-errormessage">{{error.message}} <span class="fw6">({{format-number error.count}})</span></li>
{{/each}} {{/each}}
</ul> </ul>
{{/if}} {{/if}}
@ -153,7 +153,7 @@
<span>Start over</span> <span>Start over</span>
</button> </button>
<button class="gh-btn gh-btn-green" {{action "upload"}} disabled={{this.importDisabled}}> <button class="gh-btn gh-btn-green" {{action "upload"}} disabled={{this.importDisabled}}>
<span>Import{{#if this.fileData.length}} {{pluralize this.fileData.length 'member'}}{{/if}}</span> <span>Import{{#if this.fileData.length}} {{format-number this.fileData.length}} {{pluralize this.fileData.length 'member' without-count=true}}{{/if}}</span>
</button> </button>
{{/if}} {{/if}}
{{else}} {{else}}

View File

@ -1,8 +1,8 @@
import MemberImportError from 'ghost-admin/errors/member-import-error'; import MemberImportError from 'ghost-admin/errors/member-import-error';
import Service, {inject as service} from '@ember/service'; import Service, {inject as service} from '@ember/service';
import validator from 'validator'; import validator from 'validator';
import {formatNumber} from 'ghost-admin/helpers/format-number';
import {isEmpty} from '@ember/utils'; import {isEmpty} from '@ember/utils';
import {pluralize} from 'ember-inflector';
export default Service.extend({ export default Service.extend({
ajax: service(), ajax: service(),
@ -32,8 +32,8 @@ export default Service.extend({
if (!this.membersUtils.isStripeEnabled) { if (!this.membersUtils.isStripeEnabled) {
validationErrors.push(new MemberImportError({ validationErrors.push(new MemberImportError({
message: 'Missing stripe connection', message: `Missing stripe connection (${formatNumber(totalCount)})`,
context: (pluralize(totalCount, 'Stripe customer')) + ` won't be imported. You need to <a href="#/settings/labs">connect to Stripe</a> to import stripe customers.`, context: `Stripe customers won't be imported. You need to <a href="#/settings/labs">connect to Stripe</a> to import stripe customers.`,
type: 'warning' type: 'warning'
})); }));
} else { } else {
@ -49,7 +49,7 @@ export default Service.extend({
if (duplicateCount) { if (duplicateCount) {
validationErrors.push(new MemberImportError({ validationErrors.push(new MemberImportError({
message: `Duplicate Stripe ID (${duplicateCount})`, message: `Duplicate Stripe ID (${formatNumber(duplicateCount)})`,
type: 'warning' type: 'warning'
})); }));
} }
@ -65,14 +65,14 @@ export default Service.extend({
if (invalidCount) { if (invalidCount) {
// @TODO: Remove error from displayed errors // @TODO: Remove error from displayed errors
validationErrors.push(new MemberImportError({ validationErrors.push(new MemberImportError({
message: `Invalid email address (${invalidCount})`, message: `Invalid email address (${formatNumber(invalidCount)})`,
type: 'warning' type: 'warning'
})); }));
} }
if (emptyCount) { if (emptyCount) {
validationErrors.push(new MemberImportError({ validationErrors.push(new MemberImportError({
message: `Missing email address (${emptyCount})`, message: `Missing email address (${formatNumber(emptyCount)})`,
type: 'warning' type: 'warning'
})); }));
} }
@ -80,7 +80,7 @@ export default Service.extend({
if (duplicateCount) { if (duplicateCount) {
// @TODO: Remove error from displayed errors // @TODO: Remove error from displayed errors
validationErrors.push(new MemberImportError({ validationErrors.push(new MemberImportError({
message: `Duplicate email address (${duplicateCount})`, message: `Duplicate email address (${formatNumber(duplicateCount)})`,
type: 'warning' type: 'warning'
})); }));
} }