Ember Data example

.eslintrc.js

@@ -1,4 +1,7 @@
 module.exports = {
+  globals: {
+    server: true,
+  },
   root: true,
   parserOptions: {
     ecmaVersion: 6,

.jshintrc

@@ -1,5 +1,6 @@
 {
   "predef": [
+    "server",
     "document",
     "window",
     "-Promise",

package.json

@@ -33,6 +33,7 @@
     "ember-cli-dependency-checker": "^1.3.0",
     "ember-cli-eslint": "^3.0.0",
     "ember-cli-inject-live-reload": "^1.4.1",
+    "ember-cli-mirage": "^0.3.4",
     "ember-cli-qunit": "^3.1.0",
     "ember-cli-sass": "5.6.0",
     "ember-cli-shims": "^1.0.2",

tests/dummy/app/adapters/character.js

@@ -0,0 +1,5 @@
+import DS from 'ember-data';
+
+export default DS.JSONAPIAdapter.extend({
+  namespace: 'api'
+});

tests/dummy/app/controllers/ember-data.js

@@ -0,0 +1,77 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+
+  store: Ember.inject.service(),
+
+  columnDefs: [
+    {
+      key: 'id',
+      header: 'ID',
+      width: 50,
+      hideLabel: true
+    },
+    {
+      key: 'name',
+      header: 'Name',
+      width: 200,
+      cellClass: 'name',
+      filter: {
+        type: 'search'
+      }
+    },
+    {
+      key: 'address',
+      header: 'Address',
+      filter: {
+        type: 'search'
+      }
+    },
+    {
+      key: 'alignment',
+      header: 'Alignment',
+      filter: {
+        type: 'select',
+        selectOptions: [
+          { value: 'Good' },
+          { value: 'Evil' },
+          { value: 'Neutral' }
+        ]
+      }
+    },
+    {
+      key: 'username',
+      header: 'Username',
+      component: 'user-name',
+      cellClass: 'monospace'
+    }
+  ],
+
+  possiblePageSizes: [5, 25, 50, 100],
+
+  selectedNames: null,
+
+  actions: {
+    updatePage(page, pageSize, filters) {
+      this.set('isLoading', true);
+      let query = {
+        pageNumber: page,
+        pageSize: pageSize,
+        name: filters.name || '',
+        address: filters.address || '',
+        alignment: filters.alignment || ''
+      };
+      this.get('store').query('character', query)
+      .then( (data) => {
+        let meta = data.meta;
+        delete data.meta;
+        this.setProperties({isLoading: false, model: data, meta: meta});
+      });
+    },
+    updateSelection(selectedDataRows) {
+      var selectedNames = selectedDataRows.map(row => row.get('name'));
+      this.set('selectedNames', selectedNames.join(', '));
+    }
+  }
+
+});

tests/dummy/app/models/character.js

@@ -0,0 +1,7 @@
+import DS from 'ember-data';
+
+export default DS.Model.extend({
+  name: DS.attr('string'),
+  address: DS.attr('string'),
+  alignment: DS.attr('string')
+});

tests/dummy/app/router.js

@@ -9,6 +9,7 @@ const Router = Ember.Router.extend({
 Router.map(function() {
   this.route('index', { path: '/' });
   this.route('editable', { path: '/editable' });
+  this.route('ember-data', { path: '/ember-data' });
 });
 
 export default Router;

tests/dummy/app/routes/ember-data.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model() {
+    return [];
+  }
+});

tests/dummy/app/templates/ember-data.hbs

@@ -0,0 +1,23 @@
+<h2>Ember Data Test</h2>
+{{#link-to 'index'}}
+  Test Basic Grid
+{{/link-to}}
+
+<h3>Server Paging and Filtering + Row Selection</h3>
+<p>This Fixtable implements server-side paging and filtering, via a query to the Ember Data record store. Responses are mocked using <a href="http://www.ember-cli-mirage.com/">Mirage</a>. It also enables row selection with a callback that builds a string listing the names of the selected characters to display above the table.</p>
+<p>This example exists to help verify functionality and identify any issues when using Ember Data records rather than arrays of plain JavaScript objects.</p>
+<h4>Selected:</h4>
+{{#if selectedNames.length}}
+  <p>{{selectedNames}}</p>
+{{else}}
+  <p>(none)</p>
+{{/if}}
+<div class="row">
+  <div class="col-md-8">
+    {{fixtable-grid columns=columnDefs content=model
+      fixtableClass='restrict-height' tableClass='table-hover'
+      isLoading=isLoading serverPaging=true totalRowsOnServer=meta.total
+      onReloadContent=(action 'updatePage') possiblePageSizes=possiblePageSizes
+      rowSelection=true onSelectionChanged=(action 'updateSelection')}}
+  </div>
+</div>

tests/dummy/app/templates/index.hbs

@@ -1,7 +1,14 @@
 <h2>Basic Grid Test</h2>
-{{#link-to 'editable'}}
-  Test Editable Grid
-{{/link-to}}
+<p>
+  {{#link-to 'editable'}}
+    Test Editable Grid
+  {{/link-to}}
+</p>
+<p>
+  {{#link-to 'ember-data'}}
+    Test Grid Populated via Ember Data
+  {{/link-to}}
+</p>
 
 <div>Total Rows: {{model.dataRows.length}}</div>
 

tests/dummy/mirage/config.js

@@ -0,0 +1,48 @@
+export default function() {
+  this.namespace = 'api';
+
+  // handles requests from .findAll and .query on dummy app character model
+  this.get('/characters', (schema, request) => {
+
+    // start with all characters (loaded via fixture)
+    let characters = schema.characters.all();
+
+    // get all filters received via query string
+    let filters = {};
+    let filterParams = ['name', 'address', 'alignment'];
+    filterParams.forEach(function (filterParam) {
+      if (request.queryParams[filterParam]) {
+        filters[filterParam] = request.queryParams[filterParam];
+      }
+    });
+
+    // loop through filters and apply each
+    for (let property in filters) {
+      let value = filters[property];
+      characters = characters.filter(function (character) {
+        let characterValue = character[property];
+        if (characterValue) {
+          return characterValue.toLowerCase().indexOf(value.toLowerCase()) >= 0;
+        } else {
+          return false;
+        }
+      });
+    }
+
+    let total = characters.length;
+
+    // page data, if requested
+    let pageSize = request.queryParams.pageSize;
+    let pageNumber = request.queryParams.pageNumber;
+    if (pageSize && pageNumber) {
+      let startIndex = (pageNumber - 1) * pageSize;
+      let endIndex = startIndex + parseInt(pageSize);
+      characters = characters.slice(startIndex, endIndex);
+    }
+
+    let json = this.serializerOrRegistry.serialize(characters, request);
+    json.meta = {total};
+    return json;
+  });
+
+}