191 lines
9.4 KiB
Handlebars
191 lines
9.4 KiB
Handlebars
<div class="gh-member-import-wrapper {{if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING')) "wide"}}">
|
||
{{!-- template-lint-disable no-duplicate-landmark-elements --}}
|
||
{{#if (eq this.state 'INIT')}}
|
||
<header class="modal-header" data-test-modal="import-members">
|
||
<h1>Import members</h1>
|
||
</header>
|
||
<p class="gh-box gh-box-green">Need some help? <a href="https://ghost.org/help/import-members/" target="_blank" rel="noopener noreferrer">Learn more</a> about importing members or <a href="https://static.ghost.org/v4.0.0/files/member-import-template.csv" target="_blank" rel="noopener noreferrer">download a sample CSV file</a>.</p>
|
||
{{/if}}
|
||
|
||
{{#if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING'))}}
|
||
<header class="modal-header" data-test-modal="import-members">
|
||
<h1>Import members</h1>
|
||
</header>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'PROCESSING')}}
|
||
<header class="modal-header icon-center" data-test-modal="import-members">
|
||
<GhLoadingSpinner />
|
||
<h1>Import in progress</h1>
|
||
</header>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'COMPLETE')}}
|
||
<header class="modal-header icon-center" data-test-modal="import-members">
|
||
{{#if this.importResponse.errorCount}}
|
||
{{#if (eq this.importResponse.importedCount 0)}}
|
||
{{svg-jar "members-outline" class="gh-member-import-icon-members midgrey"}}
|
||
{{else}}
|
||
{{svg-jar "members-outline" class="gh-member-import-icon-members green"}}
|
||
{{/if}}
|
||
{{else}}
|
||
{{svg-jar "confetti" class="gh-member-import-icon-confetti"}}
|
||
{{/if}}
|
||
<h1>Import complete</h1>
|
||
</header>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'ERROR')}}
|
||
<header class="modal-header" data-test-modal="import-members">
|
||
<h1>{{this.errorHeader}}</h1>
|
||
</header>
|
||
{{/if}}
|
||
|
||
<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>
|
||
{{svg-jar "close"}}
|
||
<span class="hidden">Close</span>
|
||
</a>
|
||
|
||
<div class="modal-body">
|
||
{{#if (eq this.state 'INIT')}}
|
||
<ModalImportMembers::CsvFileSelect @setFile={{action "setFile"}} />
|
||
{{/if}}
|
||
|
||
{{#if (or (eq this.state 'MAPPING') (eq this.state 'UPLOADING'))}}
|
||
<ModalImportMembers::CsvFileMapping
|
||
@file={{this.file}}
|
||
@setMappingResult={{action "setMappingResult"}}
|
||
@setFileData={{action "setMappingFileData"}}
|
||
@showErrors={{this.showMappingErrors}}
|
||
@disabled={{if (or (eq this.state 'UPLOADING') (eq this.mappingResult.membersCount 0)) true false}}
|
||
/>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'PROCESSING')}}
|
||
<div class="gh-member-import-resultcontainer">
|
||
<div class="gh-member-import-result-summary">
|
||
<p>Your import is being processed, and you’ll receive a confirmation email as soon as it’s complete. Usually this only takes a few minutes, but larger imports may take longer.</p>
|
||
</div>
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'COMPLETE')}}
|
||
<div class="gh-member-import-resultcontainer">
|
||
{{#if (eq this.importResponse.importedCount 0)}}
|
||
<div class="gh-member-import-result-summary">
|
||
<p>No members were added{{if this.importResponse.errorCount " due to the following errors:" "."}}</p>
|
||
</div>
|
||
{{else}}
|
||
<div class="gh-member-import-result-summary">
|
||
<p>A total of <strong>{{format-number this.importResponse.importedCount}}</strong> {{gh-pluralize this.importResponse.importedCount 'person' without-count=true}} were successfully added or updated in your list of members, and now have access to your site.</p>
|
||
</div>
|
||
{{/if}}
|
||
{{#if this.importResponse.errorCount}}
|
||
{{#unless (eq this.importResponse.importedCount 0)}}
|
||
<hr>
|
||
<div class="gh-member-import-result-summary">
|
||
<p><strong>{{format-number this.importResponse.errorCount}}</strong> {{gh-pluralize this.importResponse.errorCount "member" without-count=true}} {{if (eq this.importResponse.errorCount 1) "was" "were"}} skipped due to the following errors:</p>
|
||
</div>
|
||
{{/unless}}
|
||
<div class="gh-member-import-errorlist">
|
||
<ul>
|
||
{{#each this.importResponse.errorList as |error|}}
|
||
<li>{{error.message}} ({{error.count}}) </li>
|
||
{{/each}}
|
||
</ul>
|
||
</div>
|
||
{{/if}}
|
||
</div>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'ERROR')}}
|
||
<div class="failed flex items-start gh-members-upload-errorcontainer error">
|
||
<div class="mr2">{{svg-jar "warning" class="nudge-top--2 w4 h4 fill-red"}}</div>
|
||
<p class="ma0 pa0">{{this.errorMessage}}</p>
|
||
</div>
|
||
{{/if}}
|
||
</div>
|
||
|
||
<div class="modal-footer">
|
||
{{#if (eq this.state 'INIT')}}
|
||
<button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
|
||
<span>Close</span>
|
||
</button>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'MAPPING')}}
|
||
<button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
|
||
<span>Start over</span>
|
||
</button>
|
||
<button class="gh-btn gh-btn-green {{unless this.mappingResult.membersCount "disabled"}}" type="button" {{action "upload"}} data-test-button="perform-import">
|
||
{{#if this.mappingResult.membersCount}}
|
||
<span>Import {{format-number this.mappingResult.membersCount}} {{gh-pluralize this.mappingResult.membersCount 'member' without-count=true}}</span>
|
||
{{else}}
|
||
<span>Import members</span>
|
||
{{/if}}
|
||
</button>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'UPLOADING')}}
|
||
<button class="gh-btn disabled" disabled="disabled" data-test-button="restart-import-members" type="button" {{action "reset"}}>
|
||
<span>Start over</span>
|
||
</button>
|
||
<button class="gh-btn gh-btn-green gh-btn-icon disabled" disabled="disabled" type="button" {{action "upload"}}>
|
||
<span>{{svg-jar "spinner" class="gh-icon-spinner"}} {{this.runningText}}Uploading</span>
|
||
</button>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'COMPLETE')}}
|
||
{{#if this.importResponse.errorCount}}
|
||
<a href="{{this.importResponse.errorCsvUrl}}" download="{{this.importResponse.errorCsvName}}" class="gh-btn" data-test-button="download-import-errors">
|
||
<span>Download error file</span>
|
||
</a>
|
||
{{#if (eq this.importResponse.importedCount 0)}}
|
||
<button class="gh-btn gh-btn-black" data-test-button="restart-import-members" type="button" {{action "reset"}}>
|
||
<span>Try again</span>
|
||
</button>
|
||
{{else}}
|
||
<button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
|
||
<span>View members</span>
|
||
</button>
|
||
{{/if}}
|
||
{{else}}
|
||
{{#if (eq this.importResponse.importedCount 0)}}
|
||
<button class="gh-btn" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
|
||
<span>Close</span>
|
||
</button>
|
||
<button class="gh-btn gh-btn-black" data-test-button="restart-import-members" type="button" {{action "reset"}}>
|
||
<span>Try again</span>
|
||
</button>
|
||
{{else}}
|
||
<button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
|
||
<span>Upload another file</span>
|
||
</button>
|
||
<button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
|
||
<span>View members</span>
|
||
</button>
|
||
{{/if}}
|
||
{{/if}}
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'PROCESSING')}}
|
||
<button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
|
||
<span>Upload another file</span>
|
||
</button>
|
||
<button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
|
||
<span>Got it</span>
|
||
</button>
|
||
{{/if}}
|
||
|
||
{{#if (eq this.state 'ERROR')}}
|
||
{{#if this.showTryAgainButton}}
|
||
<button class="gh-btn" data-test-button="restart-import-members" type="button" {{action "reset"}}>
|
||
<span>Try again</span>
|
||
</button>
|
||
{{/if}}
|
||
<button class="gh-btn gh-btn-black" data-test-button="close-import-members" type="button" {{action "closeModal"}}>
|
||
<span>OK</span>
|
||
</button>
|
||
{{/if}}
|
||
</div>
|
||
</div> |