Adding sortable-column component (#11780)

* Adding sortable-column component

* Adding testbed example

* Use Angular's $watchGroup instead of Kibana's $watchMulti

* Changing getters to regular methods

* Adding kuiTableHeaderCell__liner class to uiFramework

* s/target/currentTarget/

* Fixing markup

* Cleaning up testbed

src/core_plugins/testbed/public/testbed.html

@@ -0,0 +1,12 @@
+<div class="kuiViewContent">
+  <div class="kuiViewContentItem">
+
+  <pre ng-if="testbed.data">{{ testbed.data }}</pre>
+
+    <!-- All markup within the CONTENT section below can be deleted and replaced with whatever markup you need to   demonstate your functionality. Nothing need be preserved. -->
+    <!-- CONTENT START -->
+
+    <!-- CONTENT END -->
+
+  </div>
+</div>

src/core_plugins/testbed/public/testbed.js

@@ -0,0 +1,12 @@
+import uiRoutes from 'ui/routes';
+import template from './testbed.html';
+import './testbed.less';
+
+uiRoutes.when('/testbed', {
+  template: template,
+  controllerAs: 'testbed',
+  controller: class TestbedController {
+    constructor() {
+    }
+  }
+});

src/ui/public/sortable_column/index.js

@@ -0,0 +1 @@
+import './sortable_column';

src/ui/public/sortable_column/sortable_column.html

@@ -0,0 +1,14 @@
+<div ng-click="sortableColumn.toggle()">
+  <div
+    class="kuiTableHeaderCell__liner"
+    ng-transclude
+  ></div>
+  <span
+    class="kuiTableSortIcon kuiIcon fa-long-arrow-up"
+    ng-show="sortableColumn.isSortedAscending()"
+  ></span>
+  <span
+    class="kuiTableSortIcon kuiIcon fa-long-arrow-down"
+    ng-show="sortableColumn.isSortedDescending()"
+  ></span>
+</div>

src/ui/public/sortable_column/sortable_column.js

@@ -0,0 +1,37 @@
+import { uiModules } from 'ui/modules';
+import template from './sortable_column.html';
+
+const app = uiModules.get('kibana');
+
+app.directive('sortableColumn', function () {
+  return {
+    restrict: 'E',
+    transclude: true,
+    template: template,
+    scope: {
+      field: '@',
+      sortField: '=',
+      sortReverse: '=',
+      onSortChange: '=',
+    },
+    controllerAs: 'sortableColumn',
+    bindToController: true,
+    controller: class SortableColumnController {
+      toggle = () => {
+        if (this.sortField === this.field) {
+          this.onSortChange(this.field, !this.sortReverse);
+        } else {
+          this.onSortChange(this.field, false);
+        }
+      }
+
+      isSortedAscending() {
+        return (this.sortField === this.field) && (!this.sortReverse);
+      }
+
+      isSortedDescending() {
+        return (this.sortField === this.field) && (this.sortReverse);
+      }
+    }
+  };
+});

ui_framework/components/table/_table.scss

@@ -38,6 +38,10 @@
   color: $tableHeaderTextColor;
 }
 
+.kuiTableHeaderCell__liner {
+  display: inline-block;
+}
+
 /**
  * 1. Prevent rapid clicking from selecting text.
  */

ui_framework/dist/ui_framework.css

@@ -2496,6 +2496,9 @@ body {
   line-height: 1.5;
   color: #a7a7a7; }
 
+.kuiTableHeaderCell__liner {
+  display: inline-block; }
+
 /**
  * 1. Prevent rapid clicking from selecting text.
  */

ui_framework/doc_site/src/views/table/table.html

@@ -5,14 +5,18 @@
         <input type="checkbox" class="kuiCheckBox">
       </th>
       <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
-        Title
-        <span data-sort-icon-ascending class="kuiTableSortIcon kuiIcon fa-long-arrow-up"></span>
-        <span data-sort-icon-descending class="kuiTableSortIcon kuiIcon fa-long-arrow-down"></span>
+        <div class="kuiTableHeaderCell__liner">
+          Title
+          <span data-sort-icon-ascending class="kuiTableSortIcon kuiIcon fa-long-arrow-up"></span>
+          <span data-sort-icon-descending class="kuiTableSortIcon kuiIcon fa-long-arrow-down"></span>
+        </div>
       </th>
       <th class="kuiTableHeaderCell kuiTableHeaderCell--sortable" data-demo-sortable-column>
-        Status
-        <span data-sort-icon-ascending class="kuiTableSortIcon kuiIcon fa-long-arrow-up"></span>
-        <span data-sort-icon-descending class="kuiTableSortIcon kuiIcon fa-long-arrow-down"></span>
+        <div class="kuiTableHeaderCell__liner">
+          Status
+          <span data-sort-icon-ascending class="kuiTableSortIcon kuiIcon fa-long-arrow-up"></span>
+          <span data-sort-icon-descending class="kuiTableSortIcon kuiIcon fa-long-arrow-down"></span>
+        </div>
       </th>
       <th class="kuiTableHeaderCell">
         Date created

ui_framework/doc_site/src/views/table/table.js

@@ -67,11 +67,11 @@ function sortColumn(column) {
 sortColumn(demoSortableColumns[0]);
 
 $(demoSortableColumns).on('click', event => {
-  sortColumn(event.target);
+  sortColumn(event.currentTarget);
 });
 
 $(demoSortableColumns).on('mouseover', event => {
-  const column = event.target;
+  const column = event.currentTarget;
   if (column !== sortedColumn) {
     const icon =
       isSortAscending
@@ -82,7 +82,7 @@ $(demoSortableColumns).on('mouseover', event => {
 });
 
 $(demoSortableColumns).on('mouseout', event => {
-  const column = event.target;
+  const column = event.currentTarget;
   if (column !== sortedColumn) {
     const icon =
       isSortAscending