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

Select all checkbox icon class for status

Browse source
This commit is contained in:
Joe Wroten 2018-12-16 14:59:18 -06:00
parent d6d9569e8d
commit 98fe4f1afc
3 changed files with 25 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import Component from '@ember/component'; import Component from '@ember/component';
import { set } from '@ember/object'; import { set, computed } from '@ember/object';
const defaultFiles = []; const defaultFiles = [];
const defaultSelectedFilePaths = []; const defaultSelectedFilePaths = [];
@ -7,6 +7,11 @@ const defaultSelectedFilePaths = [];
export default Component.extend({ export default Component.extend({
files: defaultFiles, files: defaultFiles,
selectedFilePaths: defaultSelectedFilePaths, selectedFilePaths: defaultSelectedFilePaths,
selectAllStatus: computed('selectedFilePaths.[]', 'files.[]', function() {
if (this.selectedFilePaths.length === this.files.length) {
return 'all';
} else return this.selectedFilePaths.length === 0 ? 'none' : 'some';
}),
actions: { actions: {
toggleSelectAll() { toggleSelectAll() {

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

@ -3,6 +3,12 @@
data-test-action="file-table-select-all" data-test-action="file-table-select-all"
{{action "toggleSelectAll"}} {{action "toggleSelectAll"}}
> >
<i
class="file-table-select-status-{{selectAllStatus}}"
data-test-id="file-table-select-status-icon"
>
&nbsp;
</i>
Selected {{selectedFilePaths.length}} Selected {{selectedFilePaths.length}}
</button> </button>
<button data-test-action="file-table-download-selected">Download Selected</button> <button data-test-action="file-table-download-selected">Download Selected</button>

13
tests/integration/components/file-table-test.js
View file

@ -74,4 +74,17 @@ module('Integration | Component | file-table', function(hooks) {
await click('[data-test-action=file-table-select-all]'); await click('[data-test-action=file-table-select-all]');
assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected ' + this.files.length); assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected ' + this.files.length);
}); });
test('select all checkbox changes appearance between some, all and none', async function(assert) {
this.set('files', [genericFile(), genericFile()]);
this.set('selectedFilePaths', [this.files[0].path]);
await render(hbs`{{file-table files=files selectedFilePaths=selectedFilePaths}}`);
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-some'), true, 'Shows SOME checkbox status icon');
await click('[data-test-action=file-table-select-all]');
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-all'), true, 'Shows ALL checkbox status icon');
await click('[data-test-action=file-table-select-all]');
assert.equal(find('[data-test-id=file-table-select-status-icon]').classList.contains('file-table-select-status-none'), true, 'Shows NONE checkbox status icon');
});
}); });