docs(cookbook): add sample for externally provided model

package.json

@@ -60,6 +60,7 @@
     "ember-code-snippet": "^2.0.1",
     "ember-concurrency": "^0.8.14",
     "ember-data": "^3.0.1",
+    "ember-diff-attrs": "^0.2.0",
     "ember-disable-prototype-extensions": "^1.1.2",
     "ember-export-application-global": "^2.0.0",
     "ember-font-awesome": "^4.0.0-rc.2",
@@ -70,6 +71,7 @@
     "ember-owner-test-utils": "^0.1.2",
     "ember-resolver": "^4.5.0",
     "ember-responsive": "^2.0.5",
+    "ember-route-action-helper": "^2.0.6",
     "ember-source": "~3.0.0",
     "ember-source-channel-url": "^1.0.1",
     "ember-try": "^0.2.23",

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

@@ -0,0 +1,91 @@
+// 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,
+
+  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);
+
+    this.set('rows', A([]));
+    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);
+  },
+
+  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 { task } from 'ember-concurrency';
+import Mixin from '@ember/object/mixin';
+
+export default 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 --}}

yarn.lock

@@ -1970,6 +1970,13 @@ browserslist@^2.1.2, browserslist@^2.11.3:
     caniuse-lite "^1.0.30000792"
     electron-to-chromium "^1.3.30"
 
+browserslist@^2.2.2:
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.10.0.tgz#bac5ee1cc69ca9d96403ffb8a3abdc5b6aed6346"
+  dependencies:
+    caniuse-lite "^1.0.30000780"
+    electron-to-chromium "^1.3.28"
+
 bser@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/bser/-/bser-2.0.0.tgz#9ac78d3ed5d915804fd87acb158bc797147a1719"
@@ -2067,6 +2074,10 @@ can-symlink@^1.0.0:
   dependencies:
     tmp "0.0.28"
 
+caniuse-lite@^1.0.30000780:
+  version "1.0.30000783"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000783.tgz#9b5499fb1b503d2345d12aa6b8612852f4276ffd"
+
 caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805:
   version "1.0.30000810"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000810.tgz#47585fffce0e9f3593a6feea4673b945424351d9"
@@ -2781,6 +2792,10 @@ [email protected]:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
+electron-to-chromium@^1.3.28:
+  version "1.3.28"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.28.tgz#8dd4e6458086644e9f9f0a1cf32e2a1f9dffd9ee"
+
 electron-to-chromium@^1.3.30:
   version "1.3.33"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.33.tgz#bf00703d62a7c65238136578c352d6c5c042a545"
@@ -3300,6 +3315,13 @@ ember-data@^3.0.1:
     semver "^5.1.0"
     silent-error "^1.0.0"
 
+ember-diff-attrs@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/ember-diff-attrs/-/ember-diff-attrs-0.2.0.tgz#376bc09349e2a601d74fa0b21fdb43540d3b8e7c"
+  dependencies:
+    ember-cli-babel "^5.1.7"
+    ember-weakmap "^3.0.0"
+
 ember-disable-prototype-extensions@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/ember-disable-prototype-extensions/-/ember-disable-prototype-extensions-1.1.3.tgz#1969135217654b5e278f9fe2d9d4e49b5720329e"
@@ -3493,6 +3515,13 @@ ember-rfc176-data@^0.3.0, ember-rfc176-data@^0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/ember-rfc176-data/-/ember-rfc176-data-0.3.1.tgz#6a5a4b8b82ec3af34f3010965fa96b936ca94519"
 
+ember-route-action-helper@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/ember-route-action-helper/-/ember-route-action-helper-2.0.6.tgz#1d50454350d7112be326ab44058f06cf291d5fd9"
+  dependencies:
+    ember-cli-babel "^6.8.1"
+    ember-getowner-polyfill "^2.0.0"
+
 ember-router-generator@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/ember-router-generator/-/ember-router-generator-1.2.3.tgz#8ed2ca86ff323363120fc14278191e9e8f1315ee"
@@ -3572,6 +3601,14 @@ ember-try@^0.2.23:
     rsvp "^3.0.17"
     semver "^5.1.0"
 
+ember-weakmap@^3.0.0:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/ember-weakmap/-/ember-weakmap-3.1.1.tgz#2ae6e0080b5b80cf0d108f7752dc69ea9603dbd7"
+  dependencies:
+    browserslist "^2.2.2"
+    debug "^3.1.0"
+    ember-cli-babel "^6.3.0"
+
 ember-wormhole@^0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/ember-wormhole/-/ember-wormhole-0.5.4.tgz#968e80f093494f4aed266e750afa63919c61383d"