Using offset parameter in backend request

[jevanlingen]

The app I am working on has two variables for pagination: limit and offset. Offset indicates just the starting point from which row the selection in the database table should start, the limit parameter tells how much rows should be selected.

Of course, limit is equal to the _perPage and can easily be customized by using the perPageParam. But offset is a multiplication of the currentPage and _perPage variables.

By using the bound parameters, the request send to the backend can be created:

import InfinityRoute from "ember-infinity/mixins/route";

export default Ember.Route.extend(InfinityRoute, {
  perPageParam: 'limit',

  offset: Ember.computed('currentPage', '_perPage', function() {
    return this.get('currentPage') * this.get('_perPage');
  }),

  model() {
    return this.infinityModel('model-name', {}, { offset: 'offset' });
  }
}

As this works nice, I am using the private variable _perPage. Is there a way to create this request avoiding the use of a private variable?

[wayne-o]

Is this related to: #139

If so I have tried to make this work here:

https://github.com/wayne-o/sonatribe-ember-infinity

I am happy to create a PR for this if it is suitable - I will need to check the code again though as it's been a while since I looked at it

[wayne-o]

Although - having said that... this might be all that's needed!

#148 (comment)

[jevanlingen]

Yes that's all I need. But the solution is a little dumb to me. Actually @hhff pagesPerFetch variable does exactly the same as _perPage.

@hhff: Maybe we should change _perPage from private to public?

[hhff]

@jevanlingen - _perPage is set by the initial model invocation, and is private for that reason. Ember Infinity assumes that perPage is not dynamic - by making it public we're likely to run into some wacky problems for some users. I'd rather leave it private and let the savvy use it when they know what they're doing.

[queenvictoria]

Now that the route mixin is deprecated you can do this by extending InfinityModel.

// routes/myroute.js
import Ember from 'ember';
import Route from '@ember/routing/route';
import { inject as service } from '@ember/service';
import { computed, get, set, getProperties } from '@ember/object';

import { typeOf } from '@ember/utils';
import RSVP from 'rsvp';
import InfinityModel from 'ember-infinity/lib/infinity-model';
import { objectAssign } from 'ember-infinity/utils';


// Extend InfinityModel to support offset rather than page number
const ExtendedInfinityModel = InfinityModel.extend({
  buildParams(increment) {
    const pageParams = this._super(...arguments);

    let { pageParam } = getProperties(this, 'pageParam');
    if (typeOf(pageParam) === 'string' && pageParam.indexOf('offset') > -1 ) {
      pageParams[pageParam] = (get(this, 'currentPage') + increment) * get(this, 'perPage');
    }

    return objectAssign(pageParams, get(this, 'extraParams'));
  },
});


export default Route.extend({
  infinity: service(),

  model() {
    // Return multiple models.
    return RSVP.hash({
      // Our resources for this route.
      items: this.get("infinity").model('mymodel', {
        // Infinity parameters.
        perPage: 16,
        startingPage: 0,

        // Configuring Infinity.
        perPageParam: 'page[limit]',
        pageParam: 'page[offset]',
        countParam: 'meta.page.total',

        // OPTIONAL.
        // Our additional parameters.
        include: 'relatedmodel,relatedmodel.nestedmodel',
        sort: 'name'
      }, ExtendedInfinityModel.extend()),

      othermodel: this.get("store").findRecord("othermodel", "othermodel_id"),
    });
  },
});

{{!-- templates/myroute.hbs --}}
{{#each model.items as |item|}}
{{model.name}}
{{/each}}

{{infinity-loader infinityModel=model.items }}