Update: Column config reordering, sorting ability

packages/app/config/dependency-lint.js

@@ -4,6 +4,7 @@ module.exports = {
   allowedVersions: {
     'ember-test-waiters': '1.2.0 || 1.1.1',
     'ember-truth-helpers': '2.1.0 || 3.0.0',
-    'ember-get-config': '0.2.4 || 0.3.0'
-  }
+    'ember-get-config': '0.2.4 || 0.3.0',
+    'ember-destroyable-polyfill': '2.0.2 || 2.0.3',
+  },
 };

packages/core/addon/components/navi-visualizations/table.ts

@@ -51,7 +51,7 @@ export type Args = {
 export type TableColumn = {
   fragment: ColumnFragment;
   attributes: TableColumnAttributes;
-  sortDirection?: TableSortDirection;
+  sortDirection: TableSortDirection | null;
   columnId: string;
 };
 
@@ -201,11 +201,17 @@ export default class Table extends Component<Args> {
   get columns(): TableColumn[] {
     const { columnAttributes } = this.args.options;
     return this.request.columns.map((column) => {
-      const sort = this.request.sorts.find((sort) => sort.canonicalName === column.canonicalName);
+      let sortDirection: TableColumn['sortDirection'];
+      if (column.columnMetadata.isSortable) {
+        const sort = this.request.sorts.find((sort) => sort.canonicalName === column.canonicalName);
+        sortDirection = sort?.direction || <const>'none';
+      } else {
+        sortDirection = null;
+      }
       return {
         fragment: column,
         attributes: columnAttributes[column.cid] || {},
-        sortDirection: sort?.direction || 'none',
+        sortDirection,
         columnId: column.cid,
       };
     });
@@ -263,7 +269,10 @@ export default class Table extends Component<Args> {
    */
   @action
   headerClicked(column: TableColumn): void {
-    // TODO: Validate that the column clicked supports sorting
+    if (!column.fragment.columnMetadata.isSortable) {
+      return;
+    }
+
     const { type } = column.fragment;
     const sort = this.request.sorts.find((sort) => sort.canonicalName === column.fragment.canonicalName);
     const sortDirection = (sort?.direction || 'none') as TableSortDirection;

packages/core/addon/models/bard-request-v2/fragments/column.ts

@@ -1,15 +1,18 @@
 /**
- * Copyright 2020, Yahoo Holdings Inc.
+ * Copyright 2021, Yahoo Holdings Inc.
  * Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms.
  */
 import attr from 'ember-data/attr';
 import BaseFragment from './base';
-import { Column } from 'navi-data/adapters/facts/interface';
+import { Column, SortDirection } from 'navi-data/adapters/facts/interface';
 import { nanoid } from 'nanoid';
 import { inject as service } from '@ember/service';
 import { computed } from '@ember/object';
-import NaviFormatterService from 'navi-data/services/navi-formatter';
-import { ColumnType } from 'navi-data/models/metadata/column';
+//@ts-ignore
+import { fragmentOwner } from 'ember-data-model-fragments/attributes';
+import type NaviFormatterService from 'navi-data/services/navi-formatter';
+import type { ColumnType } from 'navi-data/models/metadata/column';
+import type RequestFragment from 'navi-core/models/bard-request-v2/request';
 
 /**
  * @augments {BaseFragment}
@@ -23,9 +26,19 @@ export default class ColumnFragment<T extends ColumnType = ColumnType> extends B
 
   @service naviFormatter!: NaviFormatterService;
 
+  @fragmentOwner() request?: RequestFragment;
+
   @computed('alias', 'parameters', 'columnMetadata')
   get displayName(): string {
     const { alias, parameters, columnMetadata } = this;
     return this.naviFormatter.formatColumnName(columnMetadata, parameters, alias);
   }
+
+  @computed('request.sorts.@each.direction')
+  get sortedDirection(): SortDirection | null {
+    const sorts = this.request?.sorts || [];
+
+    const sort = sorts.find(({ canonicalName }) => canonicalName === this.canonicalName);
+    return sort?.direction || null;
+  }
 }

packages/core/addon/models/bard-request-v2/request.ts

@@ -352,6 +352,9 @@ export default class RequestFragment extends Fragment.extend(Validations) implem
    * @param index - the index to move the selected column
    */
   reorderColumn(column: ColumnFragment, index: number) {
+    if (this.columns.objectAt(index) === column) {
+      return;
+    }
     this.columns.removeFragment(column);
     this.columns.insertAt(index, column);
   }

packages/core/addon/templates/components/table-renderer-vertical-collection.hbs

@@ -1,45 +1,41 @@
 {{!-- Copyright 2020, Yahoo Holdings Inc. Licensed under the terms of the MIT license. See accompanying LICENSE.md file for terms. --}}
 <div class={{this.tableHeadersClass}}>
   {{#unless @isEditingMode}}
-    <SortableGroup
-      class="table-header-row-vc table-header-row-vc--view"
-      @direction="x"
-      @model={{readonly @columns}}
-      @onChange={{@updateColumnOrder}}
-      as |group|
-    >
-      {{#each group.model as |column|}}
-        <group.item
-          class="table-header-cell {{column.fragment.type}}"
-          @model={{readonly column}}
-          @click={{fn @headerClicked column}}
-          @onDragStart={{set this "isDragged" true}}
-          @onDragStop={{set this "isDragged" false}}
-          @isDraggingDisabled={{@isDraggingDisabled}}
-        >
-          <span
-            class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
-            title="Drag column header to reorder"
+    {{#let "table-renderer-vc" as |groupName|}}
+      <ol class="table-header-row-vc table-header-row-vc--view" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}}>
+        {{#each @columns as |column|}}
+          <li
+            class="table-header-cell {{column.fragment.type}}"
+            data-name={{column.fragment.canonicalName}}
+            role="button"
+            {{sortable-handle}}
+            {{on "click" (fn @headerClicked column)}}
+            {{sortable-item groupName=groupName model=column isDraggingDisabled=@isDraggingDisabled onDragStart=(set this "isDragged" true) onDragStop=(set this "isDragged" false)}}
           >
-            {{column.fragment.displayName}}
-          </span>
-          {{#if column.sortDirection}}
-            <NaviTableSortIcon
-              class="table-header-cell__icon"
-              @direction={{readonly column.sortDirection}}
-            />
-          {{else}}
-            <EmberTooltip
-              @text={{"Column cannot be sorted."}}
-              @showOn={{"click"}}
-              @hideOn={{"mousedown mouseleave"}}
-              @duration={{2000}}
-              @enableLazyRendering={{true}}
-            />
-          {{/if}}
-        </group.item>
-      {{/each}}
-    </SortableGroup>
+            <span
+              class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
+              title="Drag column header to reorder"
+            >
+              {{column.fragment.displayName}}
+            </span>
+            {{#if column.sortDirection}}
+              <NaviTableSortIcon
+                class="table-header-cell__icon"
+                @direction={{readonly column.sortDirection}}
+              />
+            {{else}}
+              <EmberTooltip
+                @text={{"Column cannot be sorted."}}
+                @showOn={{"click"}}
+                @hideOn={{"mousedown mouseleave"}}
+                @duration={{2000}}
+                @enableLazyRendering={{true}}
+              />
+            {{/if}}
+          </li>
+        {{/each}}
+      </ol>
+    {{/let}}
   {{/unless}}
 </div>
 <div class="{{this.tableWrapperClass}}">

packages/core/addon/templates/components/table-renderer.hbs

@@ -20,43 +20,41 @@
         {{/each}}
       </div>
     {{else}}
-      <SortableGroup
-        class="table-header-row"
-        @model={{readonly @columns}}
-        @direction="x"
-        @onChange={{@updateColumnOrder}}
-        as | group |
-      >
-        {{#each group.model as |column|}}
-          <group.item
-            class={{concat "table-header-cell " column.fragment.type}}
-            @model={{readonly column}}
-            @click={{fn @headerClicked column}}
-            @isDraggingDisabled={{@isDraggingDisabled}}
-          >
-            <span
-              class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
-              title="Drag column header to reorder"
+      {{#let "table-renderer" as |groupName|}}
+        <ol class="table-header-row" {{sortable-group groupName=groupName onChange=@updateColumnOrder direction="x"}}>
+          {{#each @columns as |column|}}
+            <li
+              class="table-header-cell {{column.fragment.type}}"
+              role="button"
+              {{on "click" (fn @headerClicked column)}}
+              {{sortable-item groupName=groupName model=column isDraggingDisabled=@isDraggingDisabled}}
+              data-name={{column.fragment.canonicalName}}
             >
-              {{column.fragment.displayName}}
-            </span>
-            {{#if column.sortDirection}}
-              <NaviTableSortIcon
-                class="table-header-cell__icon"
-                @direction={{readonly column.sortDirection}}
-              />
-            {{else}}
-              <EmberTooltip
-                @text={{"Column cannot be sorted."}}
-                @showOn={{"click"}}
-                @hideOn={{"mousedown mouseleave"}}
-                @duration={{2000}}
-                @enableLazyRendering={{true}}
-              />
-            {{/if}}
-          </group.item>
-        {{/each}}
-      </SortableGroup>
+              <span
+                class="table-header-cell__title {{if column.fragment.alias "table-header-cell__title--custom-name"}}"
+                title="Drag column header to reorder"
+                {{sortable-handle}}
+              >
+                {{column.fragment.displayName}}
+              </span>
+              {{#if column.sortDirection}}
+                <NaviTableSortIcon
+                  class="table-header-cell__icon"
+                  @direction={{readonly column.sortDirection}}
+                />
+              {{else}}
+                <EmberTooltip
+                  @text={{"Column cannot be sorted."}}
+                  @showOn={{"click"}}
+                  @hideOn={{"mousedown mouseleave"}}
+                  @duration={{2000}}
+                  @enableLazyRendering={{true}}
+                />
+              {{/if}}
+            </li>
+          {{/each}}
+        </ol>
+      {{/let}}
     {{/if}}
 
     <div class="table-body">