sortable-table-header component setup

addon/components/sortable-table-header.coffee

@@ -0,0 +1,55 @@
+import Ember from 'ember'
+import layout from '../templates/components/sortable-table-header'
+
+export default Ember.Component.extend
+  layout: layout
+  tagName: 'th'
+  classNames: ['sortable-table-header']
+  classNameBindings: ['isSortedByKey:sorted', 'sortDirectionClass']
+  filters: Ember.Object.create()
+  tScope: ''
+  direction: 'asc'
+  init: ->
+    @_super arguments...
+    Ember.defineProperty @, 'filter_calls', Ember.computed.alias("filters.filter_calls")
+
+  sortDirectionClass: Ember.computed 'isSortedByKey', ->
+    return false unless @get('isSortedByKey')
+    if @get('direction') is 'desc' then 'descending' else 'ascending'
+
+
+  isSortedByKey: Ember.computed 'filters.s', ->
+    return false unless s = @get('filters.s')
+    if Ember.isArray s
+      return false unless sort_statement = Ember.get(s, 'firstObject')
+    else if typeof s is 'string'
+      sort_statement = s
+    else
+      false
+    [sort_key, direction] = sort_statement.split(/\s+/)
+    direction ||= 'asc'
+    @set 'direction', direction
+    sort_key is @get('key')
+
+  headerContent: Ember.computed 'key', 'tScope', ->
+    return '?' unless key = @get('key')
+    if t_scope = @get('tScope')
+      t key, scope: t_scope
+    else
+      key.replace(/[_\W]+/g, ' ').capitalize()
+
+  click: ->
+    return unless key = @get('key')
+    if isSortedByKey = @get('isSortedByKey')
+      if @get('direction') is 'asc'
+        @set 'filters.s', "#{key} desc"
+      else
+        @set 'filters.s', "#{key} asc"
+    else
+      default_direction = if key.match /date/ then 'desc' else 'asc'
+      @set 'filters.s', "#{key} #{default_direction}"
+    #debugger
+    #@get('afterburn')() # call action if given
+    @get('model')?.reload?()
+    #@sendAction 'action'
+    #@get('filters.reload')() if typeof @get('filters.reload') is 'function'

addon/templates/components/sortable-table-header.emblem

@@ -0,0 +1,4 @@
+if hasBlock
+  = yield
+else
+  = headerContent

addon/utils/paged-remote-array.coffee

@@ -10,11 +10,14 @@ export default PagedRemoteArray.extend
     @otherParams['q'] = query
     #@setOtherParam('q', query) # explicitly not, init does not trigger operational callbacks
     @_super arguments...
+
   reload: ->
     query = @get('filters')?.toProperties() || {}
+    @incrementProperty('filters.filter_calls')
     @set 'page', 1
     @set 'lastPage', null
     @setOtherParam('q', query)
+
   paramMapping:
     total_pages: 'total-pages'
     total_count: 'total-count'

app/components/sortable-table-header.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-dunlop/components/sortable-table-header';

package.json

@@ -39,6 +39,7 @@
     "ember-cli-shims": "^1.0.2",
     "ember-cli-sri": "^2.1.0",
     "ember-cli-uglify": "^1.2.0",
+    "ember-composable-helpers": "^2.1.0",
     "ember-export-application-global": "^1.0.5",
     "ember-get-config": "^0.2.1",
     "ember-load-initializers": "^1.0.0",

tests/dummy/app/routes/table-filters/test1.coffee

@@ -20,7 +20,11 @@ export default Ember.Route.extend
   model: (params) ->
     #@store.findAll('epots/migration-window-planning')
     otherParams = {q: default_filter.toProperties()}
-    result = PagedArray.create [], perPage: 7
+    result = PagedArray.create [],
+      perPage: 7
+      reload: ->
+        console.log "Model reload called with filter:"
+        console.log default_filter.toProperties()
     result.setOtherParam = (param, q) ->
       window.last_set_param ||= {}
       window.last_set_param[param] = q # all is allowed for the purpose of testing and time conservation :devil:

tests/dummy/app/templates/table-filters/test1.emblem

@@ -1,9 +1,14 @@
-table.ui.celled.striped.compact.table
+table.ui.celled.striped.compact.table.sortable
   thead
     tr
-      th input
-      th option-buttons
-      th date-range
+      /th input
+      = sortable-table-header filters=filters key='name' model=model
+      /th option-buttons
+      = sortable-table-header filters=filters key='number_of_migration_windows' model=model
+        span # cutovers (filter.option-buttons)
+      /th date-range
+      = sortable-table-header filters=filters key='target_date' model=model
+      /= sortable-table-header filters=filters key='target_date' action=(invoke 'reload' model) model=model
       th select-multiple
       th select-multiple-modal
       th CUSTOM

tests/integration/components/sortable-table-header-test.coffee

@@ -0,0 +1,25 @@
+import { test, moduleForComponent } from 'ember-qunit'
+import hbs from 'htmlbars-inline-precompile'
+
+moduleForComponent 'sortable-table-header', 'Integration | Component | sortable table header', {
+  integration: true
+}
+
+test 'it renders', (assert) ->
+  assert.expect 2
+
+  # Set any properties with @set 'myProperty', 'value'
+  # Handle any actions with @on 'myAction', (val) ->
+
+  @render hbs """{{sortable-table-header}}"""
+
+  assert.equal @$().text().trim(), ''
+
+  # Template block usage:
+  @render hbs """
+    {{#sortable-table-header}}
+      template block text
+    {{/sortable-table-header}}
+  """
+
+  assert.equal @$().text().trim(), 'template block text'