fix(data-table): simplify sorting components

addon/components/data-table/head.hbs

@@ -1,8 +1,5 @@
 <thead>
   <tr>
-    {{yield (hash
-      sortable=(component "data-table/head/sortable" update=@update sortedBy=@sortedBy)
-      nonsortable=(component "data-table/head/nonsortable")
-    )}}
+    {{yield (component "data-table/head/column" update=@update sortedBy=@sortedBy)}}
   </tr>
 </thead>

addon/components/data-table/head/column.hbs

@@ -0,0 +1,19 @@
+<th>
+  {{#if @sort}}
+    <span
+      data-test-sortable-th={{@sort}}
+      class="sortable-th"
+      role="button"
+      {{on "click" (fn @update @sort)}}
+    >
+      {{yield}}
+      {{#if (eq @sortedBy @sort)}}
+        <UkIcon @icon="chevron-down"/>
+      {{else if (eq @sortedBy (concat "-" @sort))}}
+        <UkIcon @icon="chevron-up"/>
+      {{/if}}
+    </span>
+  {{else}}
+    {{yield}}
+  {{/if}}
+</th>

addon/templates/users/index.hbs

@@ -9,27 +9,27 @@
   @include={{array "acls.role" "acls.scope"}}
   as |table|
 >
-  <table.head as |head|>
+  <table.head as |Column|>
     {{#unless this.emailAsUsername}}
-      <head.sortable @sort="username">
+      <Column @sort="username">
         {{t "emeis.users.headings.username"}}
-      </head.sortable>
+      </Column>
       {{/unless}}
-    <head.sortable @sort="last_name">
+    <Column @sort="last_name">
       {{t "emeis.users.headings.lastName"}}
-    </head.sortable>
-    <head.sortable @sort="first_name">
+    </Column>
+    <Column @sort="first_name">
       {{t "emeis.users.headings.firstName"}}
-    </head.sortable>
-    <head.sortable @sort="email">
+    </Column>
+    <Column @sort="email">
       {{t "emeis.users.headings.email"}}
-    </head.sortable>
-    <head.nonsortable>
+    </Column>
+    <Column>
       {{t "emeis.roles.title"}}
-    </head.nonsortable>
-    <head.nonsortable>
+    </Column>
+    <Column>
       {{t "emeis.scopes.title"}}
-    </head.nonsortable>
+    </Column>
   </table.head>
   <table.body as |body|>
     <body.row>

app/components/data-table/head/sortable.js → app/components/data-table/head/column.js

@@ -1 +1 @@
-export { default } from "ember-emeis/components/data-table/head/sortable";
+export { default } from "ember-emeis/components/data-table/head/column";

tests/integration/components/data-table-test.js

@@ -18,9 +18,9 @@ module("Integration | Component | data-table", function (hooks) {
 
     await render(hbs`
       <DataTable @modelName={{this.modelName}} as |table|>
-        <table.head as |role|>
-          <td>Heading 1</td>
-          <td>Heading 2</td>
+        <table.head as |Column|>
+          <Column>Heading 1</Column>
+          <Column>Heading 2</Column>
         </table.head>
         <table.body as |body|>
           <body.row>
@@ -38,8 +38,8 @@ module("Integration | Component | data-table", function (hooks) {
     assert.dom('form button[type="submit"]').exists();
 
     assert.dom("thead tr").exists({ count: 1 });
-    assert.dom("thead tr td:first-child").hasText("Heading 1");
-    assert.dom("thead tr td:last-child").hasText("Heading 2");
+    assert.dom("thead tr th:first-child").hasText("Heading 1");
+    assert.dom("thead tr th:last-child").hasText("Heading 2");
 
     assert.dom("tbody tr").exists({ count: 10 });
     assert
@@ -65,13 +65,13 @@ module("Integration | Component | data-table", function (hooks) {
         @modelName={{this.modelName}}
         @page={{this.page}}
         as |table|>
-          <table.head as |role|>
-            <role.sortable @sort="one">
+          <table.head as |Column|>
+            <Column @sort="one">
               Heading One
-            </role.sortable>
-            <role.nonsortable>
+            </Column>
+            <Column>
               Heading One
-            </role.nonsortable>
+            </Column>
           </table.head>
           <table.body as |body|>
             <body.row>
@@ -150,16 +150,16 @@ module("Integration | Component | data-table", function (hooks) {
         @modelName={{this.modelName}}
         @include={{array "acls.role" "acls.scope"}}
         as |table|>
-          <table.head as |head|>
-            <head.sortable @sort="one">
+          <table.head as |Column|>
+            <Column @sort="one">
               Heading One
-            </head.sortable>
-            <head.nonsortable>
+            </Column>
+            <Column>
               Roles
-            </head.nonsortable>
-            <head.nonsortable>
+            </Column>
+            <Column>
               Scopes
-            </head.nonsortable>
+            </Column>
           </table.head>
           <table.body as |body|>
             <body.row>

tests/integration/components/data-table/head/sortable-test.js → tests/integration/components/data-table/head/column-test.js

@@ -3,7 +3,7 @@ import { hbs } from "ember-cli-htmlbars";
 import { setupRenderingTest } from "ember-qunit";
 import { module, test } from "qunit";
 
-module("Integration | Component | data-table/head/sortable", function (hooks) {
+module("Integration | Component | data-table/head/column", function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function (assert) {
@@ -16,10 +16,10 @@ module("Integration | Component | data-table/head/sortable", function (hooks) {
 
   test("it renders", async function (assert) {
     await render(hbs`
-        <DataTable::Head @sortedBy={{this.sort}} @update={{this.update}} as |head|>
-          <head.sortable @sort={{this.sort}}>
+        <DataTable::Head @sortedBy={{this.sort}} @update={{this.update}} as |Column|>
+          <Column @sort={{this.sort}}>
             test
-          </head.sortable>
+          </Column>
         </DataTable::Head>
       `);
 
@@ -29,23 +29,23 @@ module("Integration | Component | data-table/head/sortable", function (hooks) {
 
   test("it renders as block", async function (assert) {
     await render(hbs`
-      <DataTable::Head::Sortable @update={{this.update}}>
+      <DataTable::Head::Column @update={{this.update}}>
         template block text
-      </DataTable::Head::Sortable>
+      </DataTable::Head::Column>
     `);
 
     assert.dom(this.element).hasText("template block text");
   });
 
   test("it toggles sort state", async function (assert) {
     await render(hbs`
-        <DataTable::Head @sortedBy={{this.sort}} @update={{this.update}} as |head|>
-          <head.sortable @sort={{"last_name"}}>
+        <DataTable::Head @sortedBy={{this.sort}} @update={{this.update}} as |Column|>
+          <Column @sort={{"last_name"}}>
             one
-          </head.sortable>
-          <head.sortable @sort={{"first_name"}}>
+          </Column>
+          <Column @sort={{"first_name"}}>
             two
-          </head.sortable>
+          </Column>
         </DataTable::Head>
       `);