TryGhost/Ghost
1
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2024-11-29 07:09:48 +03:00
Code Issues Projects Releases Wiki Activity

Added imported members csv data preview

Browse Source 
no issue

- Adds a table representation of data present in a CSV file that is about to be imported. Allows to navigate through data to see how exactly the file would be parsed on server
This commit is contained in:
Nazar Gargol 2020-06-18 17:47:04 +12:00
parent da082fdbfb
commit ed98d89771
4 changed files with 157 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
ghost/admin/app/components/gh-members-import-table.hbs Normal file
View File

@ -0,0 +1,18 @@
<table class="bg-whitegrey-l2 ba b--whitegrey br3">
<thead>
<th><span class="f5">Header</span></th>
<th><span class="f5">Data</span><a href="#" {{action "prev"}} data-test-import-prev>{{svg-jar "arrow-left" class="w3 h3 ml2" }}</a> <a href="#" {{action "next"}} data-test-import-next>{{svg-jar "arrow-right" class="w3 h3 ml2" }}</a></th>
</thead>
<tbody>
{{#each-in currentlyDisplayedData as |key value|}}
<tr>
<td><span>{{key}}</span></td>
<td><span>{{value}}</span></td>
</tr>
{{else}}
<tr>
<td><span>No data</span></td>
</tr>
{{/each-in}}
</tbody>
</table>

33
ghost/admin/app/components/gh-members-import-table.js Normal file
View File

@ -0,0 +1,33 @@
import Component from '@glimmer/component';
import {action} from '@ember/object';
import {tracked} from '@glimmer/tracking';
export default class GhMembersImportTable extends Component {
@tracked dataPreviewIndex = 0;
get currentlyDisplayedData() {
if (this.args && this.args.importData) {
return this.args.importData[this.dataPreviewIndex];
}
return {};
}
@action
next() {
const nextValue = this.dataPreviewIndex + 1;
if (this.args.importData[nextValue]) {
this.dataPreviewIndex = nextValue;
}
}
@action
prev() {
const nextValue = this.dataPreviewIndex - 1;
if (this.args.importData[nextValue]) {
this.dataPreviewIndex = nextValue;
}
}
}

10
ghost/admin/app/components/modal-import-members.hbs
View File

@ -53,12 +53,10 @@
</div>
{{/if}}
<GhFormGroup>
<div class="bg-whitegrey-l2 ba b--whitegrey br3">
<div class="flex flex-column items-center justify-center gh-members-import-file">
{{svg-jar "file-tabular-data" class="w9 h9 mb1 stroke-midgrey"}}
<div class="description midgrey">{{this.file.name}}</div>
</div>
</div>
{{#if this.config.enableDeveloperExperiments}}
<GhMembersImportTable @importData={{this.fileData}}/>
{{/if}}
<div class="mt4">
<label for="label-input"><span class="fw6 f8 dib mb1">Labels</span></label>
<GhMemberLabelInput @member={{this.labels}} @triggerId="label-input" />

102
ghost/admin/tests/integration/components/gh-members-import-table-test.js Normal file
View File

@ -0,0 +1,102 @@
import hbs from 'htmlbars-inline-precompile';
import {click, find, findAll, render} from '@ember/test-helpers';
import {describe, it} from 'mocha';
import {expect} from 'chai';
import {setupRenderingTest} from 'ember-mocha';
describe('Integration: Component: gh-members-import-table', function () {
setupRenderingTest();
it('renders empty without data', async function () {
await render(hbs`
<GhMembersImportTable />
`);
expect(find('table')).to.exist;
expect(findAll('table thead th').length).to.equal(2);
expect(findAll('table tbody tr').length).to.equal(1);
expect(find('table tbody tr').textContent).to.equal('No data');
});
it('renders members data with all the properties', async function () {
this.set('importData', [{
name: 'Kevin',
email: 'kevin@example.com'
}]);
await render(hbs`
<GhMembersImportTable @importData={{this.importData}} />
`);
expect(findAll('table tbody tr').length).to.equal(2);
expect(findAll('table tbody tr td')[0].textContent).to.equal('name');
expect(findAll('table tbody tr td')[1].textContent).to.equal('Kevin');
expect(findAll('table tbody tr td')[2].textContent).to.equal('email');
expect(findAll('table tbody tr td')[3].textContent).to.equal('kevin@example.com');
});
it('navigates through data when next and previous are clicked', async function () {
this.set('importData', [{
name: 'Kevin',
email: 'kevin@example.com'
}, {
name: 'Rish',
email: 'rish@example.com'
}]);
await render(hbs`
<GhMembersImportTable @importData={{this.importData}} />
`);
expect(findAll('table tbody tr').length).to.equal(2);
expect(findAll('table tbody tr td')[0].textContent).to.equal('name');
expect(findAll('table tbody tr td')[1].textContent).to.equal('Kevin');
expect(findAll('table tbody tr td')[2].textContent).to.equal('email');
expect(findAll('table tbody tr td')[3].textContent).to.equal('kevin@example.com');
await click('[data-test-import-next]');
expect(findAll('table tbody tr').length).to.equal(2);
expect(findAll('table tbody tr td')[0].textContent).to.equal('name');
expect(findAll('table tbody tr td')[1].textContent).to.equal('Rish');
expect(findAll('table tbody tr td')[2].textContent).to.equal('email');
expect(findAll('table tbody tr td')[3].textContent).to.equal('rish@example.com');
await click('[data-test-import-prev]');
expect(findAll('table tbody tr').length).to.equal(2);
expect(findAll('table tbody tr td')[0].textContent).to.equal('name');
expect(findAll('table tbody tr td')[1].textContent).to.equal('Kevin');
expect(findAll('table tbody tr td')[2].textContent).to.equal('email');
expect(findAll('table tbody tr td')[3].textContent).to.equal('kevin@example.com');
});
it('cannot navigate through data when only one data item is present', async function () {
it('renders members data with all the properties', async function () {
this.set('importData', [{
name: 'Egg',
email: 'egg@example.com'
}]);
await render(hbs`
<GhMembersImportTable @importData={{this.importData}} />
`);
await click('[data-test-import-prev]');
expect(findAll('table tbody tr').length).to.equal(2);
expect(findAll('table tbody tr td')[0].textContent).to.equal('name');
expect(findAll('table tbody tr td')[1].textContent).to.equal('Egg');
expect(findAll('table tbody tr td')[2].textContent).to.equal('email');
expect(findAll('table tbody tr td')[3].textContent).to.equal('egg@example.com');
await click('[data-test-import-next]');
expect(findAll('table tbody tr').length).to.equal(2);
expect(findAll('table tbody tr td')[0].textContent).to.equal('name');
expect(findAll('table tbody tr td')[1].textContent).to.equal('Egg');
expect(findAll('table tbody tr td')[2].textContent).to.equal('email');
expect(findAll('table tbody tr td')[3].textContent).to.equal('egg@example.com');
});
});
});