diff --git a/app/components/file-table.js b/app/components/file-table.js
index 5f989c6..4d0aabd 100644
--- a/app/components/file-table.js
+++ b/app/components/file-table.js
@@ -1,5 +1,5 @@
import Component from '@ember/component';
-import { set } from '@ember/object';
+import { set, computed } from '@ember/object';
const defaultFiles = [];
const defaultSelectedFilePaths = [];
@@ -7,6 +7,11 @@ const defaultSelectedFilePaths = [];
export default Component.extend({
files: defaultFiles,
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: {
toggleSelectAll() {
diff --git a/app/templates/components/file-table.hbs b/app/templates/components/file-table.hbs
index 3665288..170cad2 100644
--- a/app/templates/components/file-table.hbs
+++ b/app/templates/components/file-table.hbs
@@ -3,6 +3,12 @@
data-test-action="file-table-select-all"
{{action "toggleSelectAll"}}
>
+
+
+
Selected {{selectedFilePaths.length}}
diff --git a/tests/integration/components/file-table-test.js b/tests/integration/components/file-table-test.js
index ec08089..3c22819 100644
--- a/tests/integration/components/file-table-test.js
+++ b/tests/integration/components/file-table-test.js
@@ -74,4 +74,17 @@ module('Integration | Component | file-table', function(hooks) {
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);
});
+
+ 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');
+ });
});
\ No newline at end of file