diff --git a/addon/components/columns/base.js b/addon/components/columns/base.js index 1e29adea..3da1d327 100644 --- a/addon/components/columns/base.js +++ b/addon/components/columns/base.js @@ -72,6 +72,23 @@ const Column = Component.extend(DraggableColumnMixin, { */ sortIcons: null, + /** + * @property sortIconProperty + * @type {String|null} + * @private + */ + sortIconProperty: computed('column.{sortable,sorted,ascending}', function() { + let sorted = this.get('column.sorted'); + + if (sorted) { + let ascending = this.get('column.ascending'); + return ascending ? 'iconAscending' : 'iconDescending'; + } + + let sortable = this.get('column.sortable'); + return sortable ? 'iconSortable' : null; + }), + /** * @property colspan * @type {Number} diff --git a/addon/mixins/table-header.js b/addon/mixins/table-header.js index ed52cb88..0ea9f309 100644 --- a/addon/mixins/table-header.js +++ b/addon/mixins/table-header.js @@ -69,13 +69,24 @@ export default Mixin.create({ resizeOnDrag: false, /** - * CSS classes to be applied to an `` tag that is + * inserted into the column's `` element when the column is sortable but + * not yet sorted. * * For instance, if you have installed `ember-font-awesome` or include the * `font-awesome` assets manually (e.g. via a CDN), you can set - * `iconAscending` to `'fa fa-sort-asc'`, which would yield this markup: - * `` + * `iconSortable` to `'fa fa-sort'`, which would yield this markup: + * `` + * + * @property iconSortable + * @type {String} + * @default '' + */ + iconSortable: '', + + /** + * See `iconSortable`. CSS classes to apply to `` + * when the column is sorted ascending. * * @property iconAscending * @type {String} @@ -84,7 +95,8 @@ export default Mixin.create({ iconAscending: '', /** - * See `iconAscending`. + * See `iconSortable`. CSS classes to apply to `` + * when the column is sorted descending. * * @property iconDescending * @type {String} @@ -103,8 +115,8 @@ export default Mixin.create({ subColumns: computed.readOnly('table.visibleSubColumns'), columns: computed.readOnly('table.visibleColumns'), - sortIcons: computed('iconAscending', 'iconDescending', function() { - return this.getProperties(['iconAscending', 'iconDescending']); + sortIcons: computed('iconSortable', 'iconAscending', 'iconDescending', function() { + return this.getProperties(['iconSortable', 'iconAscending', 'iconDescending']); }).readOnly(), init() { diff --git a/addon/templates/components/columns/base.hbs b/addon/templates/components/columns/base.hbs index 00c1cce6..ddfa73d6 100644 --- a/addon/templates/components/columns/base.hbs +++ b/addon/templates/components/columns/base.hbs @@ -2,8 +2,8 @@ {{component column.component column=column table=table tableActions=tableActions sortIcons=sortIcons}} {{else}} {{label}} - {{#if column.sorted}} - + {{#if sortIconProperty}} + {{/if}} {{/if}} diff --git a/tests/dummy/app/templates/components/columns/draggable-table.hbs b/tests/dummy/app/templates/components/columns/draggable-table.hbs index 1b343efe..e340ca47 100644 --- a/tests/dummy/app/templates/components/columns/draggable-table.hbs +++ b/tests/dummy/app/templates/components/columns/draggable-table.hbs @@ -2,6 +2,7 @@ {{#light-table table height='65vh' as |t|}} {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/columns/grouped-table.hbs b/tests/dummy/app/templates/components/columns/grouped-table.hbs index 327852d7..ba218156 100644 --- a/tests/dummy/app/templates/components/columns/grouped-table.hbs +++ b/tests/dummy/app/templates/components/columns/grouped-table.hbs @@ -2,6 +2,7 @@ {{#light-table table height='65vh' as |t|}} {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/columns/resizable-table.hbs b/tests/dummy/app/templates/components/columns/resizable-table.hbs index 493bb381..f2fed617 100644 --- a/tests/dummy/app/templates/components/columns/resizable-table.hbs +++ b/tests/dummy/app/templates/components/columns/resizable-table.hbs @@ -3,6 +3,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' resizeOnDrag=true diff --git a/tests/dummy/app/templates/components/cookbook/client-side-table.hbs b/tests/dummy/app/templates/components/cookbook/client-side-table.hbs index a5a3cf0c..1f274048 100644 --- a/tests/dummy/app/templates/components/cookbook/client-side-table.hbs +++ b/tests/dummy/app/templates/components/cookbook/client-side-table.hbs @@ -9,6 +9,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs b/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs index 64930a85..ef628c61 100644 --- a/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs +++ b/tests/dummy/app/templates/components/cookbook/custom-row-table.hbs @@ -9,6 +9,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs b/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs index a78c2641..2300bdd1 100644 --- a/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs +++ b/tests/dummy/app/templates/components/cookbook/horizontal-scrolling-table.hbs @@ -9,6 +9,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/cookbook/paginated-table.hbs b/tests/dummy/app/templates/components/cookbook/paginated-table.hbs index 286cdce3..c125cf01 100644 --- a/tests/dummy/app/templates/components/cookbook/paginated-table.hbs +++ b/tests/dummy/app/templates/components/cookbook/paginated-table.hbs @@ -9,6 +9,7 @@ {{t.head onColumnClick=(pipe (action 'onColumnClick') (action 'setPage' 1)) + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs b/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs index c5686cdb..70c7b405 100644 --- a/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs +++ b/tests/dummy/app/templates/components/cookbook/table-actions-table.hbs @@ -12,6 +12,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/responsive-table.hbs b/tests/dummy/app/templates/components/responsive-table.hbs index 40d34cc6..7c06b225 100644 --- a/tests/dummy/app/templates/components/responsive-table.hbs +++ b/tests/dummy/app/templates/components/responsive-table.hbs @@ -14,6 +14,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/rows/expandable-table.hbs b/tests/dummy/app/templates/components/rows/expandable-table.hbs index e66ac87d..6dcc4223 100644 --- a/tests/dummy/app/templates/components/rows/expandable-table.hbs +++ b/tests/dummy/app/templates/components/rows/expandable-table.hbs @@ -2,6 +2,7 @@ {{#light-table table height='65vh' as |t|}} {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/rows/selectable-table.hbs b/tests/dummy/app/templates/components/rows/selectable-table.hbs index 05216f11..1bd951c9 100644 --- a/tests/dummy/app/templates/components/rows/selectable-table.hbs +++ b/tests/dummy/app/templates/components/rows/selectable-table.hbs @@ -11,6 +11,7 @@ {{#light-table table height='65vh' as |t|}} {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/scrolling-table.hbs b/tests/dummy/app/templates/components/scrolling-table.hbs index 4e1e5bcd..07e94ca5 100644 --- a/tests/dummy/app/templates/components/scrolling-table.hbs +++ b/tests/dummy/app/templates/components/scrolling-table.hbs @@ -9,6 +9,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/dummy/app/templates/components/simple-table.hbs b/tests/dummy/app/templates/components/simple-table.hbs index 99ca7e2e..51243a67 100644 --- a/tests/dummy/app/templates/components/simple-table.hbs +++ b/tests/dummy/app/templates/components/simple-table.hbs @@ -9,6 +9,7 @@ {{t.head onColumnClick=(action 'onColumnClick') + iconSortable='fa fa-sort' iconAscending='fa fa-sort-asc' iconDescending='fa fa-sort-desc' fixed=true diff --git a/tests/integration/components/lt-head-test.js b/tests/integration/components/lt-head-test.js index b9abdcbb..45c1699f 100644 --- a/tests/integration/components/lt-head-test.js +++ b/tests/integration/components/lt-head-test.js @@ -3,6 +3,7 @@ import { moduleForComponent, test } from 'ember-qunit'; import hbs from 'htmlbars-inline-precompile'; import Table from 'ember-light-table'; import Columns, { GroupedColumns } from '../../helpers/table-columns'; +import hasClass from '../../helpers/has-class'; moduleForComponent('lt-head', 'Integration | Component | lt head', { integration: true @@ -62,6 +63,35 @@ test('click - sortable column', function(assert) { click(sortableHeader); }); +test('render sort icons', function(assert) { + this.set('table', new Table(Columns)); + + this.render(hbs`{{lt-head table=table renderInPlace=true iconSortable='fa-sort' iconAscending='fa-sort-asc' iconDescending='fa-sort-desc'}}`); + + let allHeaders = findAll('tr > th '); + let sortableHeader = allHeaders[allHeaders.length - 1]; + let sortIcon = find('.lt-sort-icon', sortableHeader); + + // Sortable case + assert.ok(hasClass(sortIcon, 'fa-sort'), 'Sortable icon renders'); + assert.notOk(hasClass(sortIcon, 'fa-sort-asc')); + assert.notOk(hasClass(sortIcon, 'fa-sort-desc')); + + click(sortableHeader); + + // Ascending case + assert.ok(hasClass(sortIcon, 'fa-sort-asc'), 'Ascending icon renders'); + assert.notOk(hasClass(sortIcon, 'fa-sort')); + assert.notOk(hasClass(sortIcon, 'fa-sort-desc')); + + click(sortableHeader); + + // Descending case + assert.ok(hasClass(sortIcon, 'fa-sort-desc'), 'Descending icon renders'); + assert.notOk(hasClass(sortIcon, 'fa-sort')); + assert.notOk(hasClass(sortIcon, 'fa-sort-asc')); +}); + test('double click', function(assert) { this.set('table', new Table(Columns)); this.on('onColumnDoubleClick', (column) => {