Collections

addon/components/md-collection.js

@@ -0,0 +1,14 @@
+import Ember from 'ember';
+import DefaultCollectionHeaderView from 'ember-cli-materialize/views/default-collection-header';
+import layout from '../templates/components/md-collection';
+
+const { computed: { bool } } = Ember;
+
+export default Ember.Component.extend({
+  classNames: ['collection'],
+  classNameBindings: ['_hasHeader:with-header'],
+  headerView: DefaultCollectionHeaderView,
+  header: null,
+  layout: layout,
+  _hasHeader: bool('header')
+});

addon/templates/components/md-collection.hbs

@@ -0,0 +1,6 @@
+{{#if _hasHeader}}
+  {{view headerView}}
+{{/if}}
+{{#each content as |item|}}
+  {{yield item}}
+{{/each}}

addon/templates/default-collection-header.hbs

@@ -0,0 +1 @@
+<h4>{{header}}</h4>

addon/views/default-collection-header.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+import layout from '../templates/default-collection-header';
+
+export default Ember.View.extend({
+  layout: layout,
+  classNames: ['collection-header']
+});

app/components/md-collection.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-materialize/components/md-collection';

app/views/default-collection-header.js

@@ -0,0 +1 @@
+export { default } from 'ember-cli-materialize/views/default-collection-header';

tests/dummy/app/controllers/application.js

@@ -6,6 +6,7 @@ export default Ember.Controller.extend({
     {name: 'Buttons',     route: 'buttons'},
     {name: 'Cards',       route: 'cards'},
     {name: 'Collapsible', route: 'collapsible'},
+    {name: 'Collection',  route: 'collection'},
     {name: 'Copyright',   route: 'copyright'},
     {name: 'Forms',       route: 'forms'},
     {name: 'Loader',      route: 'loader'},

tests/dummy/app/controllers/collection.js

@@ -0,0 +1,5 @@
+import Ember from 'ember';
+
+export default Ember.Controller.extend({
+
+});

tests/dummy/app/router.js

@@ -18,6 +18,7 @@ Router.map(function() {
   this.route("pagination");
   this.route("parallax");
   this.route("tabs");
+  this.route("collection");
 });
 
 export default Router;

tests/dummy/app/routes/collection.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+export default Ember.Route.extend({
+  model() {
+    // BEGIN-SNIPPET collection-route
+    let content = Ember.A([
+      {id: 'white',   name: 'Walter White',   route: 'tabs'},
+      {id: 'pinkman', name: 'Jesse Pinkman',  route: 'modal'},
+      {id: 'freng',   name: 'Gustavo Freng',  route: 'collection'}
+    ]);
+    // END-SNIPPET
+    return content;
+  }
+});
+

tests/dummy/app/templates/collection.hbs

@@ -0,0 +1,42 @@
+{{example-header title="Collection"}}
+
+<div class='container'>
+    {{#options-panel}}
+      {{component-option optionId="content" required=true description="Iterable collection"}}
+      {{component-option optionId="header" description="Header text"}}
+      {{component-option optionId="headerView" description="Header view (string or view class)"}}
+    {{/options-panel}}
+
+    <p>For the following examples, let's say we have an array like this</p>
+    {{code-snippet name='collection-route.js'}}
+
+    <div class="section">
+      <h4 class="col s12 header">Basic Collection</h4>
+      {{example-snippet snippet='collection-basic' class='basic-collection-example' content=content}}
+    </div>
+    <div class="section">
+      <h4 class="col s12 header">Links</h4>
+      {{example-snippet snippet='collection-links' class='links-collection-example' content=content}}
+    </div>
+    <div class="section">
+      <h4 class="col s12 header">Simple Collection Header</h4>
+      {{example-snippet snippet='collection-header' class='simple-header-collection-example' content=content}}
+    </div>
+    <div class="section">
+      <h4 class="col s12 header">Custom Collection Header</h4>
+      <p>First you need to create a view</p>
+      {{code-snippet name='custom-collection-header.js'}}
+      <p>And a template for the header view</p>
+      {{code-snippet name='my-custom-header.hbs'}}
+      <p>You can then pass this view to the collection</p>
+      {{example-snippet snippet='collection-header-custom' class='custom-header-collection-example' content=content}}
+    </div>
+    <div class="section">
+      <h4 class="col s12 header">Secondary Content</h4>
+      {{example-snippet snippet='collection-secondary-content' class='secondary-content-collection-example' content=content}}
+    </div>
+    <div class="section">
+      <h4 class="col s12 header">Avatars</h4>
+      {{example-snippet snippet='collection-avatars' class='avatars-collection-example' content=content}}
+    </div>
+</div>

tests/dummy/app/templates/snippets/collection-avatars.hbs

@@ -0,0 +1,10 @@
+{{#md-collection content=content as |item|}}
+  <div class='collection-item avatar'>
+    <i class="circle green mdi-action-favorite"></i>
+    <span class="title">{{item.name}}</span>
+    <p>A character from the TV series "Breaking Bad"</p>
+    {{#link-to item.route class='secondary-content'}}
+      <i class="mdi-action-favorite"></i>
+    {{/link-to}}
+  </div>
+{{/md-collection}}

tests/dummy/app/templates/snippets/collection-basic.hbs

@@ -0,0 +1,5 @@
+{{#md-collection content=content as |item|}}
+  <div class='collection-item'>
+    {{item.name}}
+  </div>
+{{/md-collection}}

tests/dummy/app/templates/snippets/collection-header-custom.hbs

@@ -0,0 +1,7 @@
+{{#md-collection content=content
+  headerView='my-custom-header'
+  header='People to Watch' as |item|}}
+  <div class='collection-item'>
+    {{item.name}}
+  </div>
+{{/md-collection}}

tests/dummy/app/templates/snippets/collection-header.hbs

@@ -0,0 +1,5 @@
+{{#md-collection content=content header='People to Watch' as |item|}}
+  <div class='collection-item'>
+    {{item.name}}
+  </div>
+{{/md-collection}}

tests/dummy/app/templates/snippets/collection-links.hbs

@@ -0,0 +1,3 @@
+{{#md-collection content=content as |item|}}
+  {{link-to item.name item.route class='collection-item'}}
+{{/md-collection}}

tests/dummy/app/templates/snippets/collection-secondary-content.hbs

@@ -0,0 +1,8 @@
+{{#md-collection content=content as |item|}}
+  <div class='collection-item'>
+    {{item.name}}
+    {{#link-to item.route class='secondary-content'}}
+      <i class="mdi-action-favorite"></i>
+    {{/link-to}}
+  </div>
+{{/md-collection}}

tests/dummy/app/templates/snippets/my-custom-header.hbs

@@ -0,0 +1 @@
+<h4 class='white-text'>{{header}}</h4>

tests/dummy/app/views/my-custom-header.js

@@ -0,0 +1,10 @@
+// BEGIN-SNIPPET custom-collection-header
+import Ember from 'ember';
+import DefaultCollectionHeader from 'ember-cli-materialize/views/default-collection-header';
+import layout from '../templates/snippets/my-custom-header';
+
+export default DefaultCollectionHeader.extend({
+  classNames: ['deep-purple'],
+  layout: layout
+});
+// END-SNIPPET

tests/integration/collection-test.js

@@ -0,0 +1,41 @@
+import Ember from 'ember';
+
+import startApp from '../../tests/helpers/start-app';
+import { module, test } from 'qunit';
+
+var App;
+
+module('Acceptance - Collection', {
+  setup: function() {
+    App = startApp();
+  },
+  teardown: function() {
+    Ember.run(App, 'destroy');
+  }
+});
+
+test('Load the demo page', function(assert) {
+  visit('/collection');
+
+  andThen(function () {
+    // Basic collection
+    assert.equal(find('.basic-collection-example .collection-item').length, 3, '3 items in basic collection example');
+
+    // Links example
+    assert.equal(find('.links-collection-example a.collection-item').length, 3, 'links items in links collection example');
+      // "active" link
+    assert.equal(find('.links-collection-example a.collection-item.active').text(), 'Gustavo Freng', 'Gus should be active');
+
+    // Simple header on collection
+    assert.equal(find('.simple-header-collection-example .collection-item').length, 3, '3 items in basic collection example');
+    assert.equal(find('.simple-header-collection-example .collection-header').text(), 'People to Watch', 'Header content is correct');
+    assert.equal(find('.simple-header-collection-example .with-header').length, 1, 'with-header class is present');
+
+     // Custom header on collection
+    assert.equal(find('.custom-header-collection-example .collection-item').length, 3, '3 items in basic collection example');
+    assert.equal(find('.custom-header-collection-example .collection-header').text(), 'People to Watch', 'Header content is correct');
+    assert.equal(find('.custom-header-collection-example .with-header').length, 1, 'with-header class is present');
+    assert.equal(find('.custom-header-collection-example .collection-header.deep-purple').length, 1, 'Header is customized (deep-purple)');
+
+  });
+});

tests/unit/components/md-collection-test.js

@@ -0,0 +1,19 @@
+import { moduleForComponent, test } from 'ember-qunit';
+
+moduleForComponent('md-collection', 'Unit | Component | md collection', {
+  // Specify the other units that are required for this test
+  // needs: ['component:foo', 'helper:bar'],
+  unit: true
+});
+
+test('it renders', function(assert) {
+  assert.expect(2);
+
+  // Creates the component instance
+  var component = this.subject();
+  assert.equal(component._state, 'preRender');
+
+  // Renders the component to the page
+  this.render();
+  assert.equal(component._state, 'inDOM');
+});

tests/unit/views/default-collection-header-test.js

@@ -0,0 +1,9 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('view:default-collection-header', 'Unit | View | default collection header');
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  var view = this.subject();
+  assert.ok(view);
+});