From b8427b66637e18886d8648399522844a119fcba4 Mon Sep 17 00:00:00 2001
From: Christian Zosel <christian@zosel.ch>
Date: Mon, 20 Dec 2021 17:17:28 +0100
Subject: [PATCH] fix(data-table): simplify sorting components

---
 addon/components/data-table/head.hbs          |  5 +--
 addon/components/data-table/head/column.hbs   | 19 +++++++++
 .../data-table/head/nonsortable.hbs           |  3 --
 addon/components/data-table/head/sortable.hbs | 15 -------
 addon/templates/users/index.hbs               | 26 ++++++-------
 .../head/{sortable.js => column.js}           |  2 +-
 app/components/data-table/head/nonsortable.js |  1 -
 .../integration/components/data-table-test.js | 34 ++++++++--------
 .../head/{sortable-test.js => column-test.js} | 22 +++++------
 .../data-table/head/nonsortable-test.js       | 39 -------------------
 10 files changed, 62 insertions(+), 104 deletions(-)
 create mode 100644 addon/components/data-table/head/column.hbs
 delete mode 100644 addon/components/data-table/head/nonsortable.hbs
 delete mode 100644 addon/components/data-table/head/sortable.hbs
 rename app/components/data-table/head/{sortable.js => column.js} (85%)
 delete mode 100644 app/components/data-table/head/nonsortable.js
 rename tests/integration/components/data-table/head/{sortable-test.js => column-test.js} (82%)
 delete mode 100644 tests/integration/components/data-table/head/nonsortable-test.js

diff --git a/addon/components/data-table/head.hbs b/addon/components/data-table/head.hbs
index ad0a3ce6..7b8fe0eb 100644
--- a/addon/components/data-table/head.hbs
+++ b/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>
\ No newline at end of file
diff --git a/addon/components/data-table/head/column.hbs b/addon/components/data-table/head/column.hbs
new file mode 100644
index 00000000..7531ea0b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/addon/components/data-table/head/nonsortable.hbs b/addon/components/data-table/head/nonsortable.hbs
deleted file mode 100644
index 3ae27564..00000000
--- a/addon/components/data-table/head/nonsortable.hbs
+++ /dev/null
@@ -1,3 +0,0 @@
-<th>
-  {{yield}}
-</th>
\ No newline at end of file
diff --git a/addon/components/data-table/head/sortable.hbs b/addon/components/data-table/head/sortable.hbs
deleted file mode 100644
index 5d2bf5a1..00000000
--- a/addon/components/data-table/head/sortable.hbs
+++ /dev/null
@@ -1,15 +0,0 @@
-<th>
-  <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>
-</th>
\ No newline at end of file
diff --git a/addon/templates/users/index.hbs b/addon/templates/users/index.hbs
index f52a9234..0a86af84 100644
--- a/addon/templates/users/index.hbs
+++ b/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>
diff --git a/app/components/data-table/head/sortable.js b/app/components/data-table/head/column.js
similarity index 85%
rename from app/components/data-table/head/sortable.js
rename to app/components/data-table/head/column.js
index f804684c..eac99981 100644
--- a/app/components/data-table/head/sortable.js
+++ b/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";
diff --git a/app/components/data-table/head/nonsortable.js b/app/components/data-table/head/nonsortable.js
deleted file mode 100644
index 0cc1c6c9..00000000
--- a/app/components/data-table/head/nonsortable.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from "ember-emeis/components/data-table/head/nonsortable";
diff --git a/tests/integration/components/data-table-test.js b/tests/integration/components/data-table-test.js
index a886ca3a..a7f339aa 100644
--- a/tests/integration/components/data-table-test.js
+++ b/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>
diff --git a/tests/integration/components/data-table/head/sortable-test.js b/tests/integration/components/data-table/head/column-test.js
similarity index 82%
rename from tests/integration/components/data-table/head/sortable-test.js
rename to tests/integration/components/data-table/head/column-test.js
index d5aadf71..b1b58a96 100644
--- a/tests/integration/components/data-table/head/sortable-test.js
+++ b/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,9 +29,9 @@ 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");
@@ -39,13 +39,13 @@ module("Integration | Component | data-table/head/sortable", function (hooks) {
 
   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>
       `);
 
diff --git a/tests/integration/components/data-table/head/nonsortable-test.js b/tests/integration/components/data-table/head/nonsortable-test.js
deleted file mode 100644
index a212f637..00000000
--- a/tests/integration/components/data-table/head/nonsortable-test.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { render } from "@ember/test-helpers";
-import { hbs } from "ember-cli-htmlbars";
-import { setupRenderingTest } from "ember-qunit";
-import { module, test } from "qunit";
-
-module(
-  "Integration | Component | data-table/head/nonsortable",
-  function (hooks) {
-    setupRenderingTest(hooks);
-
-    hooks.beforeEach(function (assert) {
-      this.set("update", () => {
-        assert.step("update");
-      });
-    });
-
-    test("it renders", async function (assert) {
-      await render(hbs`
-        <DataTable::Head @update={{this.update}} as |head|>
-          <head.nonsortable>
-            test
-          </head.nonsortable>
-        </DataTable::Head>
-      `);
-
-      assert.dom(this.element).hasText("test");
-    });
-
-    test("it renders as block", async function (assert) {
-      await render(hbs`
-      <DataTable::Head::Sortable @update={{this.update}}>
-        template block text
-      </DataTable::Head::Sortable>
-    `);
-
-      assert.dom(this.element).hasText("template block text");
-    });
-  }
-);