docs(cookbook): add sample for externally provided model

package.json

@@ -59,6 +59,7 @@
     "ember-code-snippet": "^1.9.0",
     "ember-concurrency": "^0.8.6",
     "ember-data": "^2.10.0",
+    "ember-diff-attrs": "^0.2.0",
     "ember-disable-prototype-extensions": "^1.1.0",
     "ember-export-application-global": "^2.0.0",
     "ember-font-awesome": "^3.0.5",
@@ -68,6 +69,7 @@
     "ember-owner-test-utils": "^0.1.2",
     "ember-resolver": "^4.0.0",
     "ember-responsive": "^2.0.4",
+    "ember-route-action-helper": "^2.0.6",
     "ember-source": "~2.13.0",
     "eslint-plugin-ember-suave": "^1.0.0",
     "loader.js": "^4.2.3",

tests/dummy/app/components/cookbook/external-model-table.js

@@ -0,0 +1,97 @@
+// BEGIN-SNIPPET external-model-table
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import Table from 'ember-light-table';
+import { isEmpty } from '@ember/utils';
+import { A } from '@ember/array';
+import diffAttrs from 'ember-diff-attrs';
+
+export default Component.extend({
+  columns: computed(function() {
+    return [{
+      label: 'Avatar',
+      valuePath: 'avatar',
+      width: '60px',
+      sortable: false,
+      cellComponent: 'user-avatar'
+    }, {
+      label: 'First Name',
+      valuePath: 'firstName',
+      width: '150px'
+    }, {
+      label: 'Last Name',
+      valuePath: 'lastName',
+      width: '150px'
+    }, {
+      label: 'Address',
+      valuePath: 'address'
+    }, {
+      label: 'State',
+      valuePath: 'state'
+    }, {
+      label: 'Country',
+      valuePath: 'country'
+    }];
+  }),
+
+  canLoadMore: true,
+  enableSync: true,
+
+  meta: null,
+  table: null,
+  rows: A([]),
+
+  didReceiveAttrs: diffAttrs('model', function(changedAttrs, ...args) {
+    this._super(...args);
+
+    if (changedAttrs && changedAttrs.model) {
+      if (isEmpty(changedAttrs.model[1])) {
+        this.set('canLoadMore', false);
+      } else {
+        this.get('rows').pushObjects(changedAttrs.model[1].toArray());
+        this.set('meta', changedAttrs.model[1].get('meta'));
+      }
+    }
+  }),
+
+  init() {
+    this._super(...arguments);
+
+    let table = new Table(this.get('columns'), this.get('rows'), { enableSync: this.get('enableSync') });
+    let sortColumn = table.get('allColumns').findBy('valuePath', this.get('sort'));
+
+    // Setup initial sort column
+    if (sortColumn) {
+      sortColumn.set('sorted', true);
+    }
+
+    this.set('table', table);
+  },
+
+  willDestroyElement() {
+    this._super(...arguments);
+
+    this.get('rows').clear();
+  },
+
+  actions: {
+    onScrolledToBottom() {
+      if (this.get('canLoadMore')) {
+        this.get('fetchMore')();
+      }
+    },
+
+    onColumnClick(column) {
+      if (column.sorted) {
+        this.set('canLoadMore', true);
+        this.get('onSort')({
+          dir: column.ascending ? 'asc' : 'desc',
+          sort: column.get('valuePath'),
+          page: 1
+        });
+        this.get('rows').clear();
+      }
+    }
+  }
+});
+// END-SNIPPET

tests/dummy/app/mixins/route-common.js

@@ -0,0 +1,48 @@
+// BEGIN-SNIPPET route-common
+import Ember from 'ember';
+import { task } from 'ember-concurrency';
+
+export default Ember.Mixin.create({
+  page: 1,
+  limit: 10,
+  dir: 'asc',
+  sort: 'firstName',
+
+  model() {
+    return this.get('fetchRecords').perform();
+  },
+
+  setupController(controller, model) {
+    this._super(controller, model);
+    controller.setProperties({
+      fetchRecords: this.get('fetchRecords'),
+      sort: this.get('sort')
+    });
+  },
+  resetController(controller, isExiting) {
+    if (isExiting) {
+      this.set('page', 1);
+    }
+  },
+
+  actions: {
+    fetchMore() {
+      this.incrementProperty('page');
+      this.refresh();
+    },
+
+    onSort({ dir = 'asc', sort = 'firstName', page = 1 }) {
+      this.setProperties({
+        dir,
+        sort,
+        page
+      });
+      this.refresh();
+    }
+  },
+
+  fetchRecords: task(function*() {
+    return yield this.get('store').query('user', this.getProperties(['page', 'limit', 'sort', 'dir']));
+  }).restartable()
+});
+// END-SNIPPET

tests/dummy/app/router.js

@@ -1,36 +1,37 @@
-import EmberRouter from '@ember/routing/router';
-import config from './config/environment';
-
-// eslint-disable-next-line ember-suave/no-direct-property-access
-const Router = EmberRouter.extend({
-  location: config.locationType,
-  rootURL: config.rootURL
-});
-
-Router.map(function() {
-  this.route('responsive');
-  this.route('scrolling');
-
-  this.route('columns', function() {
-    this.route('grouped');
-    this.route('resizable');
-    this.route('draggable');
-  });
-
-  this.route('rows', function() {
-    this.route('expandable');
-    this.route('selectable');
-  });
-
-  this.route('cookbook', function() {
-    this.route('client-side');
-    this.route('custom-row');
-    this.route('horizontal-scrolling');
-    this.route('occlusion-rendering');
-    this.route('pagination');
-    this.route('table-actions');
-    this.route('custom-sort-icon');
-  });
-});
-
-export default Router;
+import EmberRouter from '@ember/routing/router';
+import config from './config/environment';
+
+// eslint-disable-next-line ember-suave/no-direct-property-access
+const Router = EmberRouter.extend({
+  location: config.locationType,
+  rootURL: config.rootURL
+});
+
+Router.map(function() {
+  this.route('responsive');
+  this.route('scrolling');
+
+  this.route('columns', function() {
+    this.route('grouped');
+    this.route('resizable');
+    this.route('draggable');
+  });
+
+  this.route('rows', function() {
+    this.route('expandable');
+    this.route('selectable');
+  });
+
+  this.route('cookbook', function() {
+    this.route('client-side');
+    this.route('custom-row');
+    this.route('horizontal-scrolling');
+    this.route('occlusion-rendering');
+    this.route('pagination');
+    this.route('table-actions');
+    this.route('custom-sort-icon');
+    this.route('external-model-table');
+  });
+});
+
+export default Router;

tests/dummy/app/routes/cookbook/external-model-table.js

@@ -0,0 +1,5 @@
+import Route from '@ember/routing/route';
+import RouteCommon from '../../mixins/route-common';
+
+export default Route.extend(RouteCommon, {
+});

tests/dummy/app/templates/application.hbs

@@ -77,6 +77,9 @@
             {{#link-to 'cookbook.custom-sort-icon' tagName="li"}}
               {{link-to 'Custom Sort Icon' 'cookbook.custom-sort-icon'}}
             {{/link-to}}
+            {{#link-to 'cookbook.external-model-table' tagName="li"}}
+              {{link-to 'Externally Provided Model' 'cookbook.external-model-table'}}
+            {{/link-to}}
           </ul>
         {{/link-to}}
         <li><a href="docs">Documentation</a></li>

tests/dummy/app/templates/components/cookbook/external-model-table.hbs

@@ -0,0 +1,31 @@
+{{!-- BEGIN-SNIPPET external-model-table --}}
+{{#light-table table height='65vh' as |t|}}
+
+  {{!--
+    In order for `fa-sort-asc` and `fa-sort-desc` icons to work,
+    you need to have ember-font-awesome installed or manually include
+    the font-awesome assets, e.g. via a CDN.
+  --}}
+
+  {{t.head
+    onColumnClick=(action 'onColumnClick')
+    iconSortable='fa fa-sort'
+    iconAscending='fa fa-sort-asc'
+    iconDescending='fa fa-sort-desc'
+    fixed=true
+  }}
+
+  {{#t.body
+    canSelect=false
+    onScrolledToBottom=(action 'onScrolledToBottom')
+    as |body|
+  }}
+    {{#if isLoading}}
+      {{#body.loader}}
+        {{table-loader}}
+      {{/body.loader}}
+    {{/if}}
+  {{/t.body}}
+
+{{/light-table}}
+{{!-- END-SNIPPET --}}

tests/dummy/app/templates/cookbook/external-model-table.hbs

@@ -0,0 +1,14 @@
+{{!-- BEGIN-SNIPPET external-model-table-route --}}
+{{#code-panel
+  title="Externally Provided Model"
+  snippets=(array
+    "external-model-table.js"
+    "route-common.js"
+    "external-model-table.hbs"
+    "external-model-table-route.hbs"
+    "user-avatar.hbs"
+    "table-loader.hbs"
+)}}
+  {{cookbook/external-model-table model=model onSort=(route-action "onSort") fetchMore=(route-action "fetchMore") isLoading=fetchRecords.isRunning sort=sort}}
+{{/code-panel}}
+{{!-- END-SNIPPET --}}