ENH: Collection List (#20)

app/components/ccdb-table.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+import Table from 'ember-light-table';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  model: null,
+  columns: null,
+  table: null,
+
+  init() {
+    this._super(...arguments);
+    const table = new Table(this.get('columns'), this.get('model'));
+    this.set('table', table);
+  },
+});

app/components/collections-container.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  columns: [
+    { label: 'Project', valuePath: 'project.name', },
+    { label: 'Study Location', valuePath: 'studyLocation.code', },
+    { label: 'Method', valuePath: 'collectionMethod.code', },
+    { label: 'Type', valuePath: 'collectionType.name', },
+    { label: '# of Traps', valuePath: 'numberOfTraps', },
+    { label: 'Start', valuePath: 'startDateTime', },
+    { label: 'End', valuePath: 'endDateTime', },
+  ],
+});

app/components/loading-spinner.js

@@ -0,0 +1,7 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  classNames: ['spinner'],
+});

app/models/collection-method.js

@@ -0,0 +1,10 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  name:                  attr('string'),
+  code:                  attr('string'),
+  collectionMethodClass: attr('string'),
+  sortOrder:             attr('number'),
+});

app/models/collection-type.js

@@ -0,0 +1,9 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  name:      attr('string'),
+  code:      attr('string'),
+  sortOrder: attr('number'),
+});

app/models/collection.js

@@ -0,0 +1,31 @@
+import Ember from 'ember';
+import DS from 'ember-data';
+
+const { computed } = Ember;
+const { Model, attr, belongsTo } = DS;
+
+export default Model.extend({
+  displayName:         attr('string'),
+  numberOfTraps:       attr('number'),
+  collectionStartDate: attr('string-null-to-empty'),
+  collectionStartTime: attr('string-null-to-empty'),
+  collectionEndDate:   attr('string-null-to-empty'),
+  collectionEndTime:   attr('string-null-to-empty'),
+
+  project:          belongsTo('project'),
+  studyLocation:    belongsTo('study-location'),
+  collectionMethod: belongsTo('collection-method'),
+  collectionType:   belongsTo('collection-type'),
+
+  startDateTime: computed('collectionStartDate', 'collectionStartTime',
+    function() { return this._mergeDateTime('Start'); }),
+
+  endDateTime: computed('collectionEndDate', 'collectionEndTime',
+    function() { return this._mergeDateTime('End'); }),
+
+  _mergeDateTime(timepoint) {
+    const date = this.get(`collection${timepoint}Date`);
+    const time = this.get(`collection${timepoint}Time`);
+    return `${date} ${time}`.trim();
+  },
+});

app/models/project.js

@@ -0,0 +1,11 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  name:        attr('string'),
+  code:        attr('string'),
+  iacucNumber: attr('string'),
+  description: attr('string'),
+  sortOrder:   attr('number'),
+});

app/models/study-location.js

@@ -0,0 +1,13 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  name:               attr('string'),
+  code:               attr('string'),
+  studyLocationType:  attr('string'),
+  treatmentType:      attr('string'),
+  collectingLocation: attr('string'),
+  description:        attr('string'),
+  sortOrder:          attr('number'),
+});

app/router.js

@@ -9,6 +9,7 @@ const Router = Ember.Router.extend({
 Router.map(function() {
   this.route('login');
   this.route('logout');
+  this.route('collections');
 });
 
 export default Router;

app/routes/collections.js

@@ -0,0 +1,11 @@
+import Ember from 'ember';
+
+const { Route } = Ember;
+
+export default Route.extend({
+  model() {
+    return this.get('store').findAll('collection', {
+      include: 'project,study-location,collection-method,collection-type'
+    });
+  }
+});

app/styles/app.css

@@ -72,3 +72,45 @@
   background-color: #428bca;
 }
 
+/* Spinkit http://tobiasahlin.com/spinkit/ */
+.spinner {
+  margin: 100px auto 0;
+  width: 70px;
+  text-align: center;
+}
+
+.spinner > div {
+  width: 18px;
+  height: 18px;
+  background-color: #333;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}

app/templates/application.hbs

@@ -3,15 +3,19 @@
   <div class="row">
     <div class="col-md-2 sidebar">
       <ul class="nav nav-sidebar">
-        <li class="active"><a href="#">Overview</a></li>
+        {{#link-to 'index' tagName='li' href=false}}
+          {{link-to 'Overview' 'index'}}
+        {{/link-to}}
         <li><a href="#">Experiments</a></li>
-        <li><a href="#">Collections</a></li>
+        {{#link-to 'collections' tagName='li' href=false}}
+          {{link-to 'Collections' 'collections'}}
+        {{/link-to}}
       </ul>
       <ul class="nav nav-sidebar">
         <li>{{#link-to 'logout'}}Logout{{/link-to}}</li>
       </ul>
     </div>
-    <div class="col-md-10 content">
+    <div class="col-md-offset-2 col-md-10 content">
       {{outlet}}
     </div>
   </div>

app/templates/collections.hbs

@@ -0,0 +1 @@
+{{collections-container model=model}}

app/templates/components/ccdb-table.hbs

@@ -0,0 +1,10 @@
+{{#if hasBlock}}
+  {{yield (hash
+    table=(component 'light-table' table=table)
+  )}}
+{{else}}
+  {{#light-table table tableClassNames="table table-striped" as |t|}}
+    {{t.head}}
+    {{t.body}}
+  {{/light-table}}
+{{/if}}

app/templates/components/collections-container.hbs

@@ -0,0 +1 @@
+{{ccdb-table model=model columns=columns}}

app/templates/components/loading-spinner.hbs

@@ -0,0 +1,3 @@
+<div class="bounce1"></div>
+<div class="bounce2"></div>
+<div class="bounce3"></div>

app/templates/loading.hbs

@@ -0,0 +1 @@
+{{loading-spinner}}

app/transforms/string-null-to-empty.js

@@ -0,0 +1,13 @@
+import DS from 'ember-data';
+
+const { Transform } = DS;
+
+export default Transform.extend({
+  deserialize(serialized) {
+    return serialized || '';
+  },
+
+  serialize(deserialized) {
+    return deserialized;
+  }
+});

tests/unit/models/collection-method-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('collection-method', 'Unit | Model | collection method', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});

tests/unit/models/collection-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('collection', 'Unit | Model | collection', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});

tests/unit/models/collection-type-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('collection-type', 'Unit | Model | collection type', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});

tests/unit/models/project-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('project', 'Unit | Model | project', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});

tests/unit/models/study-location-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('study-location', 'Unit | Model | study location', {
+  // Specify the other units that are required for this test.
+  needs: []
+});
+
+test('it exists', function(assert) {
+  let model = this.subject();
+  // let store = this.store();
+  assert.ok(!!model);
+});

tests/unit/routes/collections-test.js

@@ -0,0 +1,10 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:collections', 'Unit | Route | collections', {
+  unit: true,
+});
+
+test('it exists', function(assert) {
+  const route = this.subject();
+  assert.ok(route);
+});

tests/unit/transforms/string-null-to-empty-test.js

@@ -0,0 +1,12 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('transform:string-null-to-empty', 'Unit | Transform | string null to empty', {
+  // Specify the other units that are required for this test.
+  // needs: ['serializer:foo']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let transform = this.subject();
+  assert.ok(transform);
+});