Object browser

controllers.browser.js

import Ember from 'ember';

export default Ember.Controller.extend({
  queryParams: ['filter', 'sort', 'page'],
  
  filter: null,
  sort: null,
  page: null,
  
  actions: {
    onFilter(model) {
      this.send('resetPage')
      this.set('filter', model)
    },
    
    onSort(desc) {
      this.send('resetPage')
      this.set('sort', desc ? true : null)
    },
    
    onPage(next) {
      this.send(next ? 'nextPage' : 'previousPage')
  	}
  }
});

helpers.divisible-by-five.js

import Ember from 'ember';

export function divisibleByFive(params) {
  return params[0] % 5 === 0;
}

export default Ember.Helper.helper(divisibleByFive);

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('browser')
  this.route('reset')
});

export default Router;

routes.browser.js

import Ember from 'ember';

const data = [
  'ab', 'bc', 'cd', 'de', 'ef',
  'fg', 'gh', 'hi', 'ij', 'jk',
  'kl', 'lm', 'mn', 'no', 'op', 
  'pq', 'qr', 'rs', 'st', 'tu', 
  'uv', 'vw', 'wx', 'xy', 'yz'
]

const pageSize = 5

export default Ember.Route.extend({
  queryParams: {
    filter: {
      replace: true,
      refreshModel: true
    },
    sort: {
      replace: true,
      refreshModel: true
    },
    page: {
      replace: true,
      refreshModel: true
    }
  },
  
  firstPage: null,
  lastPage: null,
  
  query(params) {
  return new Promise((resolve, reject) => {
    const result = Ember.A(data)
    	.filter((item) => {
        if (Ember.isEmpty(params.filter)) {
          return true
        }
        return item.includes(params.filter)
      })
      .sort(function (a, b) {
        if (a > b) { return params.sort ? -1 : 1 }
        if (a < b) { return params.sort ? 1 : -1 }
        return 0
      })
      .slice(params.page * pageSize, params.page * pageSize + pageSize)
    resolve(result)
  })
},
  
  model(params) {
    const filter = params && params.filter
    const sort = params && params.sort
    const page = (params && params.page) || 0
    
    let requests = []
    requests.push(this.query({ filter, sort, page }))
    
    // On the initial load request the pages before/after as well
    if (Ember.isEmpty(this.get('firstPage')) && Ember.isEmpty(this.get('lastPage'))) {
      if (params.page > 0) {
      	requests.unshift(this.query({ filter, sort, page: Number(page) - 1 }))
      }
      requests.push(this.query({ filter, sort, page: Number(page) + 1 }))
    }
    
    return Promise.all(requests).then((values) => {
    	const result = [].concat(...values)
      
      if (Ember.isEmpty(this.get('firstPage'))) {
        this.setProperties({
          firstPage: page != 0 ? Number(page) - 1 : 0,
          lastPage: Number(page) + 1
        })
        return result
      } else if (page > this.get('lastPage')) {
        this.setProperties({
          lastPage: page
        }) 
        return  this.controllerFor('browser').get('model').concat(result) // append
      } else if (page < this.get('firstPage')) {
        this.setProperties({
          firstPage: page
        })
        return result.concat(this.controllerFor('browser').get('model')) // prepend
      }
    })
  },
  
  actions: {
    nextPage() {
      this.controllerFor('browser').set('page', Number(this.get('lastPage')) + 1)
    },
    
    previousPage() {
      const firstPage = Number(this.get('firstPage'))
      if (firstPage > 0) {
        this.controllerFor('browser').set('page', firstPage - 1)
      }
    },
    
    resetPage() {
      this.setProperties({
      	firstPage: null,
        lastPage: null
      })
    }
  },
  
  resetController: function(controller, isExiting, transition) {
    if (isExiting) {
      // TODO Only for the demo? Might want to keep this state
      controller.set('model', null)
      controller.set('filter', null)
      controller.set('sort', null)
      controller.set('page', null)
      this.set('firstPage', null)
      this.set('lastPage', null)
    }
  }
});

routes.reset.js

import Ember from 'ember';

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

templates.application.hbs

<div>
	{{link-to 'Browser' 'browser' (query-params filter=null)}}
</div>
<div>
	{{link-to 'Browser (filter=b)' 'browser' (query-params filter='b')}}
</div>
<div>
	{{link-to 'Browser (page=2)' 'browser' (query-params page=2)}}
</div>
<div>
	{{link-to 'Reset' 'reset'}}
</div>
<br>
{{outlet}}

templates.browser.hbs

<div>
	Filter {{input type='text' enter=(action 'onFilter')}}
</div>
<br>
<div>
  Sort 
  <button type='button' {{action (action 'onSort' false)}}>asc</button>
  <button type='button' {{action (action 'onSort' true)}}>desc</button>
</div>
<br>
<div>
  Load page 
  <button type='button' {{action (action 'onPage' true)}}>next</button>
  <button type='button' {{action (action 'onPage' false)}}>previous</button>
</div>
<br>
<div>
	Push event (TODO)
</div>
<br>
{{#each model as |record index|}}
	{{#if (divisible-by-five index)}}
  	<br>
  {{/if}}
	<div>{{record}}</div>
{{/each}}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}