From 0fb5d4668bc6e6b35c8649e6c627a1f180891f8e Mon Sep 17 00:00:00 2001
From: Joe Wroten <joe@wroten.me>
Date: Sun, 16 Dec 2018 14:32:24 -0600
Subject: [PATCH] Row click toggles selection, aware in both components

---
 app/components/file-table-item.js             |  8 +++-
 app/components/file-table.js                  | 10 ++++
 app/controllers/application.js                |  7 +++
 app/templates/application.hbs                 |  6 +--
 app/templates/components/file-table-item.hbs  | 48 +++++++++----------
 app/templates/components/file-table.hbs       |  6 ++-
 .../integration/components/file-table-test.js | 17 ++++++-
 7 files changed, 70 insertions(+), 32 deletions(-)
 create mode 100644 app/controllers/application.js

diff --git a/app/components/file-table-item.js b/app/components/file-table-item.js
index a8028be..8497f81 100644
--- a/app/components/file-table-item.js
+++ b/app/components/file-table-item.js
@@ -5,10 +5,16 @@ const defaultFile = {};
 const defaultSelectedFilePaths = [];
 
 export default Component.extend({
+  tagName: 'tr',
+  attributeBindings: ['data-test-id', 'data-test-action'],
+
+  'data-test-id': 'file-table-item',
+  'data-test-action': 'file-table-item-toggle',
+
   file: defaultFile,
   selectedFilePaths: defaultSelectedFilePaths,
 
-  isSelected: computed('file.path', 'selectedFilePaths', function() {
+  isSelected: computed('file.path', 'selectedFilePaths.[]', function() {
     return this.selectedFilePaths.includes(this.file.path);
   }),
 });
diff --git a/app/components/file-table.js b/app/components/file-table.js
index 12798d5..19e46a7 100644
--- a/app/components/file-table.js
+++ b/app/components/file-table.js
@@ -6,4 +6,14 @@ const defaultSelectedFilePaths = [];
 export default Component.extend({
   files: defaultFiles,
   selectedFilePaths: defaultSelectedFilePaths,
+
+  actions: {
+    toggleSelectedPath(path) {
+      if (!this.selectedFilePaths.includes(path)) {
+        this.selectedFilePaths.pushObject(path);
+      } else {
+        this.selectedFilePaths.removeObject(path);
+      }
+    },
+  }
 });
diff --git a/app/controllers/application.js b/app/controllers/application.js
new file mode 100644
index 0000000..cb974dc
--- /dev/null
+++ b/app/controllers/application.js
@@ -0,0 +1,7 @@
+import Controller from '@ember/controller';
+
+const files = []; // Put sample data here...
+
+export default Controller.extend({
+  files,
+});
diff --git a/app/templates/application.hbs b/app/templates/application.hbs
index 1eac0a2..1bdf41c 100644
--- a/app/templates/application.hbs
+++ b/app/templates/application.hbs
@@ -1,5 +1,5 @@
-{{!-- The following component displays Ember's default welcome message. --}}
-{{welcome-page}}
-{{!-- Feel free to remove this! --}}
+<h1>Ember File Download List</h1>
+
+{{file-table files=files}}
 
 {{outlet}}
\ No newline at end of file
diff --git a/app/templates/components/file-table-item.hbs b/app/templates/components/file-table-item.hbs
index ef24ad0..752a191 100644
--- a/app/templates/components/file-table-item.hbs
+++ b/app/templates/components/file-table-item.hbs
@@ -1,25 +1,23 @@
-<tr data-test-id="file-table-item">
-  <td data-test-id="file-table-item-selected">
-    {{if isSelected "Selected"}}
-  </td>
-  <td data-test-id="file-table-item-name">
-    {{file.name}}
-  </td>
-  <td data-test-id="file-table-item-device">
-    {{file.device}}
-  </td>
-  <td data-test-id="file-table-item-path">
-    {{file.path}}
-  </td>
-  <td>
-    <i
-      class="file-table-item-status-{{file.status}}"
-      data-test-id="file-table-status-icon"
-    >
-      &nbsp;
-    </i>
-  </td>
-  <td data-test-id="file-table-item-status">
-    {{file.status}}
-  </td>
-</tr>
\ No newline at end of file
+<td data-test-id="file-table-item-selected">
+  {{if isSelected "Selected"}}
+</td>
+<td data-test-id="file-table-item-name">
+  {{file.name}}
+</td>
+<td data-test-id="file-table-item-device">
+  {{file.device}}
+</td>
+<td data-test-id="file-table-item-path">
+  {{file.path}}
+</td>
+<td>
+  <i
+    class="file-table-item-status-{{file.status}}"
+    data-test-id="file-table-status-icon"
+  >
+    &nbsp;
+  </i>
+</td>
+<td data-test-id="file-table-item-status">
+  {{file.status}}
+</td>
\ No newline at end of file
diff --git a/app/templates/components/file-table.hbs b/app/templates/components/file-table.hbs
index f20b48d..fb2fb02 100644
--- a/app/templates/components/file-table.hbs
+++ b/app/templates/components/file-table.hbs
@@ -1,6 +1,7 @@
-
 <header data-test-id="file-table-action-bar">
-  <label data-test-action="file-table-select-all"></label>
+  <label data-test-action="file-table-select-all">
+    Selected {{selectedFilePaths.length}}
+  </label>
   <button data-test-action="file-table-download-selected">Download Selected</button>
 </header>
 
@@ -18,6 +19,7 @@
       {{file-table-item
         file=file
         selectedFilePaths=selectedFilePaths
+        click=(action "toggleSelectedPath" file.path)
       }}
     {{/each}}
   </tbody>
diff --git a/tests/integration/components/file-table-test.js b/tests/integration/components/file-table-test.js
index b9aad2d..fae8768 100644
--- a/tests/integration/components/file-table-test.js
+++ b/tests/integration/components/file-table-test.js
@@ -1,6 +1,6 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render, find, findAll } from '@ember/test-helpers';
+import { render, find, findAll, click } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
 
 const genericFile = () => {
@@ -32,4 +32,19 @@ module('Integration | Component | file-table', function(hooks) {
 
     assert.equal(findAll('[data-test-id=file-table-item]').length, 2, 'Found expected two rows');
   });
+
+  test('it can select toggle a row with clicks', async function(assert) {
+    this.set('files', [genericFile(), genericFile()]);
+    await render(hbs`{{file-table files=files}}`);
+    assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
+    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Not selected by default');
+
+    await click('[data-test-action=file-table-item-toggle]');
+    assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 1');
+    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), 'Selected', 'Selected after click');
+
+    await click('[data-test-action=file-table-item-toggle]');
+    assert.equal(find('[data-test-action=file-table-select-all]').textContent.trim(), 'Selected 0');
+    assert.equal(find('[data-test-id=file-table-item-selected]').textContent.trim(), '', 'Unselected after second click');
+  });
 });
\ No newline at end of file