mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 13:54:35 +03:00
5faa18743f
no issue - When an import is in progress showing completed progress bar is unusefull and confusing. For large imports it takes a lot longer to process the import itself than to upload the file, that's why it made sense to show a generic spinner untill a better solution is worked on (probably with introduction of jobs)
180 lines
8.7 KiB
Handlebars
180 lines
8.7 KiB
Handlebars
<header class="modal-header" data-test-modal="import-members">
|
|
<h1>
|
|
{{#if this.summary}}
|
|
Import complete{{unless this.importResponse.invalid.count "!"}}
|
|
{{else}}
|
|
{{#if this.uploading}}
|
|
Importing members
|
|
{{else}}
|
|
Import members
|
|
{{/if}}
|
|
{{/if}}
|
|
</h1>
|
|
</header>
|
|
<a class="close" href="" role="button" title="Close" {{action "closeModal"}}>{{svg-jar "close"}}<span class="hidden">Close</span></a>
|
|
|
|
<div class="modal-body">
|
|
{{#if (and this.filePresent (not this.failureMessage))}}
|
|
{{#if this.validating}}
|
|
{{#if validationErrors}}
|
|
<div class="failed flex items-start gh-members-upload-errorcontainer {{if this.importDisabled "error" "warning"}}">
|
|
<div class="mr3">
|
|
{{#if this.importDisabled}}
|
|
{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-red"}}
|
|
{{else}}
|
|
{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-yellow-d1"}}
|
|
{{/if}}
|
|
</div>
|
|
<div class="ma0">
|
|
<p class="ma0 pa0 flex-grow w-100">The CSV contains errors! {{unless this.importDisabled "Some members will not be imported."}}</p>
|
|
{{#if validationErrors}}
|
|
<ul class="ma0 pa0 mt4 list bt b--whitegrey">
|
|
{{#each validationErrors as |error|}}
|
|
<li class="gh-members-import-errormessage">
|
|
<span>{{{error.message}}}</span>
|
|
{{#if error.context}}
|
|
<p class="gh-members-import-errorcontext">{{{error.context}}}</p>
|
|
{{/if}}
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
{{/if}}
|
|
</div>
|
|
</div>
|
|
{{else}}
|
|
<div class="bg-whitegrey-l2 ba b--whitegrey br3 gh-image-uploader gh-members-import-spinner">
|
|
<GhLoadingSpinner />
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if this.customizing}}
|
|
{{#if this.uploadErrors}}
|
|
<div class="failed flex items-start gh-members-upload-errorcontainer {{if this.importDisabled "error" "warning"}}">
|
|
<div class="mr3">
|
|
{{svg-jar "warning" class="nudge-top--2 w5 h5 fill-red"}}
|
|
</div>
|
|
<div class="ma0">
|
|
<p class="ma0 pa0 flex-grow w-100">The import contains errors!</p>
|
|
<ul class="ma0 pa0 mt4 list bt b--whitegrey">
|
|
{{#each this.uploadErrors as |error|}}
|
|
<li class="gh-members-import-errormessage">
|
|
<span>{{{error.message}}}</span>
|
|
{{#if error.context}}
|
|
<p class="gh-members-import-errorcontext">{{{error.context}}}</p>
|
|
{{/if}}
|
|
</li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
|
|
<GhFormGroup>
|
|
<div class="gh-members-import-scrollarea">
|
|
<GhMembersImportTable
|
|
@importData={{this.fileData}}
|
|
@mapping={{this.mapping}}
|
|
@updateMapping={{action "updateMapping"}}/>
|
|
</div>
|
|
|
|
<div class="mt4">
|
|
<label for="label-input"><span class="fw6 f8 dib mb1">Label these members</span></label>
|
|
<GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />
|
|
</div>
|
|
</GhFormGroup>
|
|
{{/if}}
|
|
|
|
{{#if this.uploading}}
|
|
<div class="bg-whitegrey-l2 ba b--whitegrey br3 gh-image-uploader gh-members-import-spinner">
|
|
<GhLoadingSpinner />
|
|
</div>
|
|
{{/if}}
|
|
|
|
{{#if this.summary}}
|
|
<div class="ba b--whitegrey br3 middarkgrey bg-whitegrey-l2">
|
|
<div class="flex items-start">
|
|
<div class="w-50 gh-member-import-result-summary">
|
|
<h2>{{format-number this.importResponse.imported.count}}</h2>
|
|
<p>{{gh-pluralize this.importResponse.imported.count "Member" without-count=true}} added</p>
|
|
</div>
|
|
<div class="bl b--whitegrey w-50 gh-member-import-result-summary">
|
|
<h2>{{format-number this.importResponse.invalid.count}}</h2>
|
|
<p>{{gh-pluralize this.importResponse.invalid.count "Error" without-count=true}}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{#if this.importResponse.invalid.count}}
|
|
<div class="mt6 gh-members-upload-errorcontainer error">
|
|
<div class="flex items-start">
|
|
{{svg-jar "warning" class="w5 h5 fill-red nudge-top--3 mr3"}}
|
|
<div class="flex-grow w-100">
|
|
<p class="ma0 pa0">{{format-number this.importResponse.invalid.count}} {{gh-pluralize this.importResponse.invalid.count "member" without-count=true}} were skipped due to the following errors:</p>
|
|
<ul class="ma0 pa0 mt4 list bt b--whitegrey">
|
|
{{#each this.importResponse.invalid.errors as |error|}}
|
|
<li class="gh-members-import-errormessage">{{error.message}} <span class="fw4">({{format-number error.count}})</span></li>
|
|
{{/each}}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{/if}}
|
|
{{/if}}
|
|
{{else}}
|
|
{{#if this.failureMessage}}
|
|
<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.failureMessage}}</p>
|
|
</div>
|
|
{{/if}}
|
|
<div class="upload-form bg-whitegrey-l2 ba b--whitegrey br3">
|
|
<section class="gh-image-uploader gh-members-import-uploader {{this.dragClass}}">
|
|
<GhFileInput @multiple={{false}} @alt={{this.labelText}} @action={{action "fileSelected"}} @accept={{this.accept}}>
|
|
<div class="flex flex-column items-center">
|
|
{{svg-jar "upload" class="w9 h9 mb1 stroke-midgrey"}}
|
|
<div class="description midgrey">{{this.labelText}}</div>
|
|
</div>
|
|
</GhFileInput>
|
|
</section>
|
|
</div>
|
|
{{/if}}
|
|
</div>
|
|
|
|
<div class="modal-footer {{unless this.importResponse "modal-footer-spread"}}">
|
|
{{#if this.importResponse}}
|
|
<button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn gh-btn-blue" data-test-button="close-import-members">
|
|
<span>{{if this.importResponse.invalid.count "Done" "Awesome"}}</span>
|
|
</button>
|
|
{{else if (and this.filePresent (not this.failureMessage))}}
|
|
{{#if this.validating}}
|
|
{{#if validationErrors}}
|
|
<button {{action "reset"}} class="gh-btn" data-test-button="close-import-members">
|
|
<span>Start over</span>
|
|
</button>
|
|
{{#unless this.importDisabled}}
|
|
<button class="gh-btn gh-btn-blue" {{action "continueImport"}}>
|
|
<span>Continue</span>
|
|
</button>
|
|
{{/unless}}
|
|
{{/if}}
|
|
{{/if}}
|
|
|
|
{{#if this.customizing}}
|
|
<button {{action "reset"}} class="gh-btn" data-test-button="close-import-members">
|
|
<span>Start over</span>
|
|
</button>
|
|
<button class="gh-btn gh-btn-green" {{action "upload"}} disabled={{this.importDisabled}}>
|
|
<span>Import{{#if this.fileData.length}} {{format-number this.fileData.length}} {{gh-pluralize this.fileData.length 'member' without-count=true}}{{/if}}</span>
|
|
</button>
|
|
{{/if}}
|
|
{{else}}
|
|
<button {{action "closeModal"}} disabled={{this.closeDisabled}} class="gh-btn" data-test-button="close-import-members">
|
|
<span>Close</span>
|
|
</button>
|
|
<a class="gh-btn" href="https://static.ghost.org/v3.0.0/files/member-import-template.csv" target="_blank">
|
|
<span>Download sample CSV file</span>
|
|
</a>
|
|
{{/if}}
|
|
</div>
|