Example of <my-api-datasource> element

[bnason]

Could some example code for the custom element that's talked about in the Getting started with datatable cards page be provided?

<my-api-datasource for="users" data-source="{{dataSource}}"></my-api-datasource>

[RoXuS]

Sorry I use ES6 but a simple example should be :

class myApiDatasource {

  beforeRegister() {
    this.properties = {
      page: {
        type: Number,
        value: 0,
      },
      size: {
        type: Number,
        value: 10,
      },
      dataSource: {
        type: Object,
        value: {},
      },
    };
  }

  attached() {
    this._setDataSource();
  }

  _userRequest(resolve) {
    let userResource = this.$.userResource;
    userResource.resolve = resolve;
    userResource.generateRequest();
  }

  _handleUserResourcesResponse(event) {
    /** Get data. */
    this.resolve(event.detail.response.users);
  }

  _setDataSource() {
    this.dataSource.get = (sort, page, pageSize) => {
      this.page = page;
      this.size = pageSize;
      return new Promise((resolve, reject) => this._userRequest(resolve));
    };
  }
}

Polymer(myApiDatasource);

Template:

<dom-module id="my-api-datasource">
  <template>
    <iron-ajax id="userResource" on-response="_handleUserResourcesResponse"></iron-ajax>
  </template>
</dom-module>

dataSource.get is called by paper-datatable-card element. dataSource.get launches the iron-ajax request. The response of the iron-ajax is transmitted to the dataTable through the promise (this.resolve())

Usage:

<my-api-datasource data-source="{{dataSource}}" page="{{page}}" size="{{size}}"></my-api-datasource>

<paper-datatable-card page-size="[[size]]" page="[[page]]" data-source="{{dataSource}}"></paper-datatable-card>

[tidzo]

I've been trying to get my head around this for ages but I can't get it to work. I don't understand where {{dataSource}} would get set in the final two lines above or why it's in both the my-api-datasource element and the paper-datatable-card one. I would greatly appreciate a spelled-out example if possible.

[RoXuS]

Hello,

my-api-datasource is an element to manage the calls to your API.

• my-api-datasource sets the get function in dataSource object (in the attached method).
• When paper-datatable-card needs data, it calls this function dataSource.get.
• dataSource.get returns a promise which contains the data. (the promise response is set when on the response of the iron-ajax element).

[foochris]

@RoXuS In your Feb 10, is the function this.resolve missing from your example?

[RoXuS]

@foochris, when I wrote this example it was functional, but now I can't test it because I don't use paper-datatable. I suggest you do not use paper-datatable because it is no longer maintained and there are too inconsistent things.

If you think it lacks features on https://github.com/RoXuS/paper-datatable-api, don't hesitate to let me know, I'd be happy to add them, you can do PRs too.