refacto: remove sort logic from pix-table

1024pix · Dec 9, 2024 · 796ef05 · 796ef05
1 parent 8e78f54
commit 796ef05
Show file tree

Hide file tree

Showing 7 changed files with 228 additions and 106 deletions.
diff --git a/addon/components/pix-table-basic-column.hbs b/addon/components/pix-table-basic-column.hbs
@@ -1,6 +1,7 @@
 <PixTableColumn
   @context={{@context}}
-  @sort={{@sort}}
+  @onSort={{@onSort}}
+  @sortOrder={{@sortOrder}}
   @ariaLabelDefaultSort={{@ariaLabelDefaultSort}}
   @ariaLabelSortAsc={{@ariaLabelSortAsc}}
   @ariaLabelSortDesc={{@ariaLabelSortDesc}}

diff --git a/addon/components/pix-table-column.hbs b/addon/components/pix-table-column.hbs
@@ -6,7 +6,7 @@
         <PixIconButton
           @ariaLabel={{this.iconLabel}}
           @iconName={{this.iconName}}
-          @triggerAction={{this.sort}}
+          @triggerAction={{@onSort}}
           @size="small"
         />
       {{/if}}

diff --git a/addon/components/pix-table-column.js b/addon/components/pix-table-column.js
@@ -1,32 +1,56 @@
 import Component from '@glimmer/component';
-import { action } from '@ember/object';
+import { warn } from '@ember/debug';
 
 export default class PixTableColumn extends Component {
-  id = crypto.randomUUID();
-
   get displayHeader() {
-    return this.args.context.type === 'header';
+    return this.args.context === 'header';
   }
 
   get sortable() {
-    return Boolean(this.args.sort);
+    return Boolean(this.args.onSort);
+  }
+
+  get sortOrder() {
+    if (this.args.sortOrder === undefined) {
+      return undefined;
+    }
+    const correctSortOrders = ['asc', 'desc', null];
+    warn(
+      'PixTableColumn: you need to provide a valid sortOrder',
+      correctSortOrders.includes(this.args.sortOrder),
+      {
+        id: 'pix-ui.table-column.sortOrder.not-valid',
+      },
+    );
+    return this.args.sortOrder;
   }
 
   get iconName() {
-    if (this.args.context.currentSortedColumnId !== this.id) {
+    if (!this.sortOrder) {
       return 'sort';
     }
-    if (this.args.context.sortOrder === 'asc') {
+    if (this.sortOrder === 'asc') {
       return 'sortAsc';
     }
     return 'sortDesc';
   }
 
   get iconLabel() {
-    if (this.args.context.currentSortedColumnId !== this.id) {
+    warn(
+      'PixTableColumn: parameters `@ariaLabelDefaultSort`, `@ariaLabelSortDesc` and `@ariaLabelSortAsc` are required for sort buttons',
+      ![
+        this.args.ariaLabelDefaultSort,
+        this.args.ariaLabelSortDesc,
+        this.args.ariaLabelSortAsc,
+      ].includes(undefined),
+      {
+        id: 'pix-ui.pix-table-column.sortAriaLabels.required',
+      },
+    );
+    if (!this.sortOrder) {
       return this.args.ariaLabelDefaultSort;
     }
-    if (this.args.context.sortOrder === 'asc') {
+    if (this.sortOrder === 'asc') {
       return this.args.ariaLabelSortDesc;
     }
     return this.args.ariaLabelSortAsc;
@@ -36,17 +60,12 @@ export default class PixTableColumn extends Component {
     if (!this.sortable) {
       return undefined;
     }
-    if (this.args.context.currentSortedColumnId !== this.id) {
+    if (!this.sortOrder) {
       return 'none';
     }
-    if (this.args.context.sortOrder === 'asc') {
+    if (this.sortOrder === 'asc') {
       return 'ascending';
     }
     return 'descending';
   }
-
-  @action
-  sort() {
-    this.args.context.toggleSort(this.id, this.args.sort);
-  }
 }
diff --git a/addon/components/pix-table.hbs b/addon/components/pix-table.hbs
@@ -3,14 +3,13 @@
     <caption class="screen-reader-only">{{this.caption}}</caption>
     <thead class={{this.headerClass}}>
       <tr>
-        {{yield null this.headerContext to="columns"}}
+        {{yield null "header" to="columns"}}
       </tr>
     </thead>
     <tbody>
-      {{this.headerContext.date}}
-      {{#each this.computedData as |row|}}
+      {{#each @data as |row|}}
         <tr>
-          {{yield row this.cellContext to="columns"}}
+          {{yield row "cell" to="columns"}}
         </tr>
       {{/each}}
     </tbody>

diff --git a/addon/components/pix-table.js b/addon/components/pix-table.js
@@ -1,17 +1,7 @@
 import Component from '@glimmer/component';
 import { warn } from '@ember/debug';
-import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
 
 export default class PixTable extends Component {
-  headerContext = new HeaderContext({
-    type: 'header',
-    toggleSort: this.toggleSort,
-  });
-
-  @tracked
-  computedData = [...this.args.data];
-
   get variant() {
     const value = this.args.variant ?? 'primary';
     warn(
@@ -35,41 +25,4 @@ export default class PixTable extends Component {
   get headerClass() {
     return `pix-table-header--${this.variant}`;
   }
-
-  get cellContext() {
-    return {
-      type: 'cell',
-    };
-  }
-
-  @action
-  toggleSort(id, sortFun) {
-    this.headerContext.refresh(id);
-    if (this.headerContext.sortOrder === 'asc') {
-      this.computedData = this.computedData.sort(sortFun);
-      return;
-    }
-    this.computedData = this.computedData.reverse();
-  }
-}
-
-class HeaderContext {
-  @tracked sortOrder;
-  @tracked currentSortedColumnId;
-
-  constructor({ type, toggleSort, sortOrder, currentSortedColumnId }) {
-    this.type = type;
-    this.toggleSort = toggleSort;
-    this.sortOrder = sortOrder;
-    this.currentSortedColumnId = currentSortedColumnId;
-  }
-
-  refresh(id) {
-    if (id !== this.currentSortedColumnId) {
-      this.sortOrder = 'asc';
-      this.currentSortedColumnId = id;
-    } else {
-      this.sortOrder = this.sortOrder === 'asc' ? 'desc' : 'asc';
-    }
-  }
 }
diff --git a/addon/styles/_pix-table-basic-column.scss b/addon/styles/_pix-table-basic-column.scss
@@ -1,5 +1,5 @@
 td.pix-table-basic-column {
-  &--number{
+  &--number {
     text-align: right;
   }
 }