gaiety/ember-file-download-list-exercise
1
0
Fork 0
Code Activity

isSelected per file-table-item

Browse source
This commit is contained in:
Joe Wroten 2018-12-16 13:28:57 -06:00
parent a26469efc9
commit a654423557
5 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
app/components/file-table-item.js
View file

@ -1,7 +1,14 @@
import Component from '@ember/component'; import Component from '@ember/component';
import { computed } from '@ember/object';
const defaultFile = {}; const defaultFile = {};
const defaultSelectedFilePaths = [];
export default Component.extend({ export default Component.extend({
file: defaultFile, file: defaultFile,
selectedFilePaths: defaultSelectedFilePaths,
isSelected: computed('file.path', 'selectedFilePaths', function() {
return this.selectedFilePaths.includes(this.file.path);
}),
}); });

3
app/components/file-table.js
View file

@ -1,6 +1,9 @@
import Component from '@ember/component'; import Component from '@ember/component';
const defaultFiles = []; const defaultFiles = [];
const defaultSelectedFilePaths = [];
export default Component.extend({ export default Component.extend({
files: defaultFiles, files: defaultFiles,
selectedFilePaths: defaultSelectedFilePaths,
}); });

2
app/templates/components/file-table-item.hbs
View file

@ -1,6 +1,6 @@
<tr data-test-id="file-table-item"> <tr data-test-id="file-table-item">
<td data-test-id="file-table-item-selected"> <td data-test-id="file-table-item-selected">
&nbsp; {{if isSelected "Selected"}}
</td> </td>
<td data-test-id="file-table-item-name"> <td data-test-id="file-table-item-name">
{{file.name}} {{file.name}}

2
app/templates/components/file-table.hbs
View file

@ -15,7 +15,7 @@
</thead> </thead>
<tbody> <tbody>
{{#each files as | file |}} {{#each files as | file |}}
{{file-table-item file=file selected=selected}} {{file-table-item file=file selectedFilePaths=selectedFilePaths}}
{{/each}} {{/each}}
</tbody> </tbody>
</table> </table>

14
tests/integration/components/file-table-item-test.js
View file

@ -44,4 +44,18 @@ module('Integration | Component | file-table-item', function(hooks) {
assert.equal(find('[data-test-id=file-table-item-status]').textContent.trim(), 'available', 'Renders correct status text'); assert.equal(find('[data-test-id=file-table-item-status]').textContent.trim(), 'available', 'Renders correct status text');
assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('file-table-item-status-available'), true, 'Status icon has expected class'); assert.equal(find('[data-test-id=file-table-status-icon]').classList.contains('file-table-item-status-available'), true, 'Status icon has expected class');
}); });
test('it handles toggling selected status based on incoming selectedFilePaths', async function(assert) {
this.set('file', genericFile());
this.set('selectedFilePaths', []);
await render(hbs`{{file-table-item file=file selectedFilePaths=selectedFilePaths}}`);
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Not selected by default');
this.set('selectedFilePaths', [this.file.path]);
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), 'Selected', 'Not selected by default');
this.set('selectedFilePaths', []);
assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'No longer selected');
});
}); });