demo ember-models-table async filter/sort

adapters.album.js

import DS from "ember-data";

export default DS.RESTAdapter.extend({
  //namespace: 'api', 
  host: 'https://jsonplaceholder.typicode.com',
  //coalesceFindRequests: true
  handleResponse: function handleResponse(status, headers, payload, requestData) {
    let result = this._super(...arguments);
    result = {album: result}
    return result;
	},
});

adapters.application.js

import DS from "ember-data";

export default DS.RESTAdapter.extend({
  //namespace: 'api', 
  host: 'https://jsonplaceholder.typicode.com',
  //coalesceFindRequests: true
  handleResponse: function handleResponse(status, headers, payload, requestData) {
    
		let result = this._super(...arguments);
		console.log(result);
    
    
    
		return result;
	},
});

adapters.photo.js

import DS from "ember-data";

export default DS.RESTAdapter.extend({
  //namespace: 'api', 
  host: 'https://jsonplaceholder.typicode.com',
  //coalesceFindRequests: true
  handleResponse: function handleResponse(status, headers, payload, requestData) {
    let result = this._super(...arguments);
    
    for(let i=0; i<result.length; i++){
    	result[i]["album"] = {
        id: Math.floor(Math.random() * 100) + 1,  
      	//id: result[i]["albumId"],
        type: 'album'
      }
    }
    result = {photo: result}
    return result;
	},
});

components.table.cell-number-of-photos.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
    store: Ember.inject.service(),
  
  columns: [
    {propertyName: 'id', title: 'id as string', className:'small-col'},
    {propertyName: 'idSortable', title: 'is as integer', className:'small-col'},
    {propertyName: 'title'},
    {propertyName: 'numberOfPhotos', title:'Number of Photos (1)'},
    {propertyName: 'numberOfPhotos', title:'Number of Photos (2)', component:'table/cell-number-of-photos', sortedBy:'numberOfPhotos'}
    
  ],
  
  
  photos: Ember.computed(function(){
  	let result = this.store.findAll('photo');
    console.log('photos', result); 
    return result;
  })
});

models.album.js

import DS from "ember-data";

export default DS.Model.extend({
  title: DS.attr('string'),
  photos: DS.hasMany('photos'),

  idSortable: Ember.computed('id', function(){
   	let id = this.get('id');
    return parseInt(id);
  }),
  numberOfPhotos: Ember.computed('photos.[]', async function(){
  	let photos = await this.get('photos');
    return photos.length;
  })



});

models.photo.js

import DS from "ember-data";

export default DS.Model.extend({
  title: DS.attr('string'),
  url: DS.attr('string'),
  thumbnailUrl: DS.attr('string'),
  album: DS.belongsTo('album')
});

routes.application.js

import Ember from 'ember';
import DS from "ember-data";

export default Ember.Route.extend({
  
  model: async function() {
    let photos = this.store.findAll('photo');
    let result = await this.store.findAll('album');
    console.log(result);
    return result;
  }
});

serializers.application.js

import DS from "ember-data";

export default DS.RESTSerializer.extend();

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

table, tr, th, td
{
  	border:1px solid #000;
}
th
{
  	cursor:pointer;
}

templates.application.hbs

<h3>Example that sorting ember-models-table by async values (promises) does not work</h3>


<pre style="padding: 15px;">
Column "Number of Photos (1)" does directly display the promise-object from the async-function.
In column "Number of Photos (2)" a custom component (table/cell-number-of-photos.hbs) renders the promise by using ember-promise-helpers´s async-function.

Sorting and filtering does not work for this two columns.


</pre>

{{#if model.isPending}}
  <p>Loading albums...</p>
{{else}}
{{models-table data=model columns=columns}}

  
{{/if}}
  
  
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<style>
.small-col{
width: 30px;
}
</style>


{{outlet}}

templates.components.table.cell-number-of-photos.hbs

{{yield}}
{{await record.numberOfPhotos}}

twiddle.json

{
  "version": "0.14.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
  	"lodash": "https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js",
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    
    "ember-template-compiler": "2.18.2",
    "jquery-mockjax": "https://cdn.jsdelivr.net/gh/jakerella/jquery-mockjax/dist/jquery.mockjax.js"
  },
  "addons": {
  	"ember-promise-helpers": "1.0.5",
    "ember-data": "2.18.5",
    "ember-models-table": "2.9.0-beta.1"
  }
}