ENH: Create collections (#38)

Fixes #35

app/components/action-button.js

@@ -0,0 +1,32 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  tagName: 'a',
+  classNames: ['btn'],
+  classNameBindings: [
+    'isDefault:btn-default',
+    'isPrimary:btn-primary',
+    'isSuccess:btn-success',
+    'isInfo:btn-info',
+    'isWarning:btn-warning',
+    'isDanger:btn-danger',
+    'isLink:btn-link',
+  ],
+
+  // ARGS
+  isDefault: false,
+  isPrimary: false,
+  isSuccess: false,
+  isInfo: false,
+  isWarning: false,
+  isDanger: false,
+  isLink: false,
+
+  label: 'LABEL',
+
+  click() {
+    this.get('onClick')();
+  }
+});

app/components/ccdb-table.js

@@ -9,7 +9,7 @@ export default Component.extend({
   columns: null,
 
   table: null,
-  init() {
+  didReceiveAttrs() {
     this._super(...arguments);
     const table = new Table(this.get('columns'), this.get('model'));
     this.set('table', table);

app/components/collection-create-container.js

@@ -0,0 +1,12 @@
+import Ember from 'ember';
+import Changeset from 'ember-changeset';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  init() {
+    this._super(...arguments);
+    const model = this.get('model');
+    this.set('changeset', new Changeset(model));
+  },
+});

app/components/crud-form.js

@@ -0,0 +1,8 @@
+import Ember from 'ember';
+
+const { Component } = Ember;
+
+export default Component.extend({
+  // ARGS
+  changeset: null,
+});

app/components/form-content.js

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

app/controllers/collections/create.js

@@ -0,0 +1,16 @@
+import Ember from 'ember';
+
+const { Controller } = Ember;
+
+export default Controller.extend({
+  actions: {
+    onSave(changeset) {
+      changeset.save();
+      this.transitionToRoute('collections.index');
+    },
+    onCancel(changeset) {
+      changeset.rollback();
+      this.transitionToRoute('collections.index');
+    },
+  },
+});

app/controllers/collections/index.js

@@ -13,5 +13,8 @@ export default Controller.extend({
     rowClick(row) {
       this.transitionToRoute('collections.detail', row.get('id'));
     },
+    createCollection() {
+      this.transitionToRoute('collections.create');
+    },
   },
 });

app/models/collection.js

@@ -4,7 +4,7 @@ import DS from 'ember-data';
 const { computed } = Ember;
 const { Model, attr, belongsTo } = DS;
 
-export default Model.extend({
+export const schema = {
   displayName:         attr('string'),
   numberOfTraps:       attr('number'),
   collectionStartDate: attr('string-null-to-empty'),
@@ -16,7 +16,9 @@ export default Model.extend({
   studyLocation:    belongsTo('study-location'),
   collectionMethod: belongsTo('collection-method'),
   collectionType:   belongsTo('collection-type'),
+};
 
+export default Model.extend(Object.assign({}, schema, {
   startDateTime: computed('collectionStartDate', 'collectionStartTime',
     function() { return this._mergeDateTime('Start'); }),
 
@@ -28,4 +30,4 @@ export default Model.extend({
     const time = this.get(`collection${timepoint}Time`);
     return `${date} ${time}`.trim();
   },
-});
+}));

app/router.js

@@ -10,6 +10,7 @@ Router.map(function() {
   this.route('login');
   this.route('logout');
   this.route('collections', function() {
+    this.route('create');
     this.route('detail', { path: '/:collection_id' });
   });
 });

app/routes/collections/create.js

@@ -0,0 +1,21 @@
+import Ember from 'ember';
+
+const { Route, RSVP } = Ember;
+
+export default Route.extend({
+  model() {
+    const store = this.get('store');
+    return RSVP.hash({
+      model: store.createRecord('collection'),
+      projectOptions: store.findAll('project'),
+      studyLocationOptions: store.findAll('study-location'),
+      collectionTypeOptions: store.findAll('collection-type'),
+      collectionMethodOptions: store.findAll('collection-method'),
+    });
+  },
+
+  setupController(controller, models) {
+    this._super(...arguments);
+    controller.setProperties(models);
+  },
+});

app/serializers/application.js

@@ -0,0 +1,10 @@
+import Ember from 'ember';
+import DS from 'ember-data';
+
+const { JSONAPISerializer } = DS;
+
+export default JSONAPISerializer.extend({
+  payloadTypeFromModelName(modelName) {
+    return modelName.split('-').map(key => Ember.String.capitalize(key)).join('');
+  }
+});

app/templates/collections/create.hbs

@@ -0,0 +1,10 @@
+{{
+  collection-create-container
+  model=model
+  projectOptions=projectOptions
+  studyLocationOptions=studyLocationOptions
+  collectionTypeOptions=collectionTypeOptions
+  collectionMethodOptions=collectionMethodOptions
+  onSave=(action 'onSave')
+  onCancel=(action 'onCancel')
+}}

app/templates/collections/index.hbs

@@ -3,4 +3,5 @@
   model=model
   changePage=(action 'changePage')
   onRowClick=(action 'rowClick')
+  createCollection=(action 'createCollection')
 }}

app/templates/components/action-button.hbs

@@ -0,0 +1 @@
+{{label}}

app/templates/components/collection-create-container.hbs

@@ -0,0 +1,107 @@
+{{#crud-form
+  changeset=changeset
+  onSave=(action onSave)
+  onCancel=(action onCancel) as |f|
+}}
+  <div class="well">
+    {{#f.content class='form-horizontal'}}
+      <div class="form-group">
+        <label class="col-md-2 control-label">Project</label>
+        <div class="col-md-10">
+          {{#power-select
+            options=projectOptions
+            selected=changeset.project
+            onchange=(action (mut changeset.project))
+            searchField='name'
+            as |project|
+          }}
+            {{project.name}}
+          {{/power-select}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Study location</label>
+        <div class="col-md-10">
+          {{#power-select
+            options=studyLocationOptions
+            selected=changeset.studyLocation
+            onchange=(action (mut changeset.studyLocation))
+            searchField='name'
+            as |studyLocation|
+          }}
+            {{studyLocation.name}}
+          {{/power-select}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Collection type</label>
+        <div class="col-md-10">
+          {{#power-select
+            options=collectionTypeOptions
+            selected=changeset.collectionType
+            onchange=(action (mut changeset.collectionType))
+            searchField='name'
+            as |collectionType|
+          }}
+            {{collectionType.name}}
+          {{/power-select}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Collection method</label>
+        <div class="col-md-10">
+          {{#power-select
+            options=collectionMethodOptions
+            selected=changeset.collectionMethod
+            onchange=(action (mut changeset.collectionMethod))
+            searchField='name'
+            as |collectionMethod|
+          }}
+            {{collectionMethod.name}}
+          {{/power-select}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Number of traps</label>
+        <div class="col-md-10">
+          {{input value=changeset.numberOfTraps type='number' class='form-control'}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Collection start date</label>
+        <div class="col-md-10">
+          {{input value=changeset.collectionStartDate type='date' class='form-control'}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Collection start time</label>
+        <div class="col-md-10">
+          {{input value=changeset.collectionStartTime type='time' class='form-control'}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Collection end date</label>
+        <div class="col-md-10">
+          {{input value=changeset.collectionEndDate type='date' class='form-control'}}
+        </div>
+      </div>
+
+      <div class="form-group">
+        <label class="col-md-2 control-label">Collection end time</label>
+        <div class="col-md-10">
+          {{input value=changeset.collectionEndTime type='time' class='form-control'}}
+        </div>
+      </div>
+
+    {{/f.content}}
+
+    {{f.save}} {{f.cancel}}
+  </div>
+{{/crud-form}}

app/templates/components/collections-container.hbs

@@ -1,3 +1,9 @@
+{{
+  action-button
+  isPrimary=true
+  label='New Collection'
+  onClick=(action createCollection)
+}}
 {{
   ccdb-table
   model=model

app/templates/components/crud-form.hbs

@@ -0,0 +1,15 @@
+{{#if hasBlock}}
+  {{yield (hash
+    content=(component 'form-content' changeset=changeset)
+    cancel=(component 'action-button'
+            label='Cancel'
+            isDanger=true
+            onClick=(action onCancel changeset))
+    save=(component 'action-button'
+          label='Save'
+          isSuccess=true
+          onClick=(action onSave changeset))
+  )}}
+{{else}}
+  MISSING CONTENT BLOCK
+{{/if}}

app/templates/components/form-content.hbs

@@ -0,0 +1 @@
+{{yield}}

config/environment.js

@@ -9,8 +9,7 @@ module.exports = function(environment) {
     locationType: 'auto',
     EmberENV: {
       FEATURES: {
-        // Here you can enable experimental features on an ember canary build
-        // e.g. 'with-controller': true
+        'ds-payload-type-hooks': true,
       },
       EXTEND_PROTOTYPES: {
         // Prevent Ember Data from overriding Date.parse.

package.json

@@ -17,6 +17,8 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
+    "ember-changeset": "^1.3.0",
+    "ember-changeset-validations": "^1.2.8",
     "ember-cli": "~2.14.0",
     "ember-cli-app-version": "^3.0.0",
     "ember-cli-babel": "^6.3.0",
@@ -38,7 +40,7 @@
     "ember-light-table": "^1.10.0",
     "ember-load-initializers": "^1.0.0",
     "ember-moment": "7.3.1",
-    "ember-power-select": "1.8.5",
+    "ember-power-select": "^1.8.5",
     "ember-power-select-with-create": "0.4.3",
     "ember-resolver": "^4.0.0",
     "ember-responsive": "^2.0.4",