maint: move to pingo

Fixes #88

.travis.yml

@@ -3,11 +3,17 @@ branches:
   only:
     - master
 node_js:
-  - '6'
+  - "9"
-sudo: false
+sudo: required
+dist: trusty
+addons:
+  chrome: stable
 cache:
   directories:
   - "$HOME/.npm"
+env:
+  global:
+    - JOBS=1
 before_install:
   - npm config set spin false
   - npm install -g phantomjs-prebuilt

README.md

@@ -10,7 +10,7 @@ You will need the following things properly installed on your computer.
 * [Git](https://git-scm.com/)
 * [Node.js](https://nodejs.org/) (with NPM)
 * [Ember CLI](https://ember-cli.com/)
-* [PhantomJS](http://phantomjs.org/)
+* [Google Chrome](https://google.com/chrome/)
 
 ## Installation
 

app/adapters/application.js

@@ -9,4 +9,11 @@ export default JSONAPIAdapter.extend(DataAdapterMixin, {
   namespace: API_NAMESPACE,
   host: API_HOST,
   authorizer: 'authorizer:application',
+  // DRF-JSON-API returns 400 by default
+  handleResponse(status, headers, payload) {
+    if (status === 400 && payload.errors) {
+      return new DS.InvalidError(payload.errors);
+    }
+    return this._super(...arguments);
+  }
 });

app/adapters/datasheet-attachment.js

@@ -0,0 +1,19 @@
+import ApplicationAdapter from './application';
+import FileUploadAdapter from 'ccdb-web/mixins/file-upload';
+
+export default ApplicationAdapter.extend(FileUploadAdapter, {
+  getFormFields(data) {
+    return {
+      'datasheet': data['data']['attributes']['datasheet'],
+      'collection': JSON.stringify(data['data']['relationships']['collection']['data']),
+    }
+  },
+
+  getFormKey(key) {
+    return key;
+  },
+
+  getFormValue(key, value) {
+    return value;
+  },
+});

app/app.js

@@ -1,11 +1,9 @@
-import Ember from 'ember';
+import Application from '@ember/application';
 import Resolver from './resolver';
 import loadInitializers from 'ember-load-initializers';
 import config from './config/environment';
 
-let App;
+const App = Application.extend({
-
-App = Ember.Application.extend({
   modulePrefix: config.modulePrefix,
   podModulePrefix: config.podModulePrefix,
   Resolver

app/authenticators/application.js

@@ -1,9 +1,11 @@
-import Ember from 'ember';
+import { Promise } from 'rsvp';
+import $ from 'jquery';
+import { get } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+import { run } from '@ember/runloop';
 import BaseAuthenticator from 'ember-simple-auth/authenticators/base';
 import config from '../config/environment';
 
-const { RSVP: { Promise }, $, get, isEmpty, run } = Ember;
-
 export default BaseAuthenticator.extend({
   serverTokenEndpoint: `${config.APP.API_HOST}/api/auth/login/`,
   tokenAttributeName: 'data.attributes.auth-token',

app/authorizers/application.js

@@ -1,8 +1,7 @@
-import Ember from 'ember';
+import { isEmpty } from '@ember/utils';
+import { get } from '@ember/object';
 import BaseAuthorizer from 'ember-simple-auth/authorizers/base';
 
-const { isEmpty, get } = Ember;
-
 export default BaseAuthorizer.extend({
   authorize(data, block) {
     const accessToken = get(data, 'data.attributes.auth-token');

app/components/action-button.js

@@ -0,0 +1,40 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: 'a',
+  classNames: ['btn'],
+  classNameBindings: [
+    // Styles
+    'isDefault:btn-default',
+    'isPrimary:btn-primary',
+    'isSuccess:btn-success',
+    'isInfo:btn-info',
+    'isWarning:btn-warning',
+    'isDanger:btn-danger',
+    'isLink:btn-link',
+    // Sizes
+    'isLarge:btn-lg',
+    'isSmall:btn-sm',
+    'isXSmall:btn-xs',
+  ],
+
+  // ARGS
+  // Styles
+  isDefault: false,
+  isPrimary: false,
+  isSuccess: false,
+  isInfo: false,
+  isWarning: false,
+  isDanger: false,
+  isLink: false,
+  // Sizes
+  isLarge: false,
+  isSmall: false,
+  isXSmall: false,
+
+  label: 'LABEL',
+
+  click() {
+    this.get('onClick')();
+  }
+});

app/components/admin-section-list.js

@@ -1,5 +1,3 @@
-import Ember from 'ember';
+import Component from '@ember/component';
-
-const { Component } = Ember;
 
 export default Component.extend({});

app/components/ccdb-filter.js

@@ -0,0 +1,3 @@
+import Component from '@ember/component';
+
+export default Component.extend({ });

app/components/ccdb-pagination.js

@@ -1,5 +1,41 @@
-import Ember from 'ember';
+import Component from '@ember/component';
+import { alias } from '@ember/object/computed';
+import { computed } from '@ember/object';
 
-export default Ember.Component.extend({
+export default Component.extend({
-  classNames: ['row'],
+  // ARGS
+  model: null,
+
+  // COMPUTED
+  meta: alias('model.meta'),
+  links: alias('meta.links'),
+
+  currentPage: alias('meta.pagination.page'),
+  totalRecords: alias('meta.pagination.count'),
+
+  firstLink: alias('links.first'),
+  lastLink: alias('links.last'),
+  nextLink: alias('links.next'),
+  prevLink: alias('links.prev'),
+
+  _getPage(link) {
+    link = this.get(link);
+    if (link === null) {
+      return null;
+    }
+    const url = new URL(link);
+    return parseInt(url.searchParams.get('page'));
+  },
+
+  _notEqual(a, b) {
+    return this.get(a) !== this.get(b);
+  },
+
+  first: computed('firstLink', function() { return this._getPage('firstLink'); }),
+  last: computed('lastLink', function() { return this._getPage('lastLink'); }),
+  next: computed('nextLink', function() { return this._getPage('nextLink'); }),
+  prev: computed('prevLink', function() { return this._getPage('prevLink'); }),
+
+  notOnFirst: computed('first', 'currentPage', function() { return this._notEqual('first', 'currentPage'); }),
+  notOnLast: computed('last', 'currentPage', function() { return this._notEqual('last', 'currentPage'); }),
 });

app/components/ccdb-table.js

@@ -1,16 +1,13 @@
-import Ember from 'ember';
+import Component from '@ember/component';
 import Table from 'ember-light-table';
 
-const { Component } = Ember;
-
 export default Component.extend({
+  // ARGS
   model: null,
   columns: null,
+
   table: null,
-
+  didReceiveAttrs() {
-  classNames: ['row'],
-
-  init() {
     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,93 @@
+import { getProperties, set } from '@ember/object';
+import Component from '@ember/component';
+import { inject as service } from '@ember/service';
+import { debounce } from '@ember/runloop';
+import RSVP from 'rsvp';
+import Changeset from 'ember-changeset';
+import lookupValidator from 'ember-changeset-validations';
+import config from 'ccdb-web/config/environment';
+
+export default Component.extend({
+  store: service(),
+
+  init() {
+    this._super(...arguments);
+    const model = this.get('model');
+    const validations = this.get('validations');
+    const hasMany = this.get('hasMany');
+
+    let changesets = {};
+    changesets['new'] = [];
+    changesets['delete'] = [];
+    changesets['hasMany'] = {};
+    changesets['model'] = new Changeset(model,
+                                        lookupValidator(validations['collection']),
+                                        validations['collection']);
+
+    hasMany.forEach((hasMany) => {
+      let relatedChangesets = [];
+      let validation = validations[hasMany];
+      const related = model.get(hasMany);
+      related.forEach((r) => {
+        const changeset = new Changeset(r, lookupValidator(validation),
+                                        validation);
+        relatedChangesets.push({ model: r, changeset: changeset });
+      });
+      changesets['hasMany'][hasMany] = relatedChangesets;
+    });
+
+    this.set('changesets', changesets);
+    this.set('newStudyLocationAdmin', `${config.APP.API_HOST}/admin/locations/studylocation/add/`);
+  },
+
+  actions: {
+    addHasMany(modelName, relatedName) {
+      const store = this.get('store');
+      let changesets = this.get('changesets');
+      const validations = this.get('validations');
+      const validation = validations[relatedName];
+      const model = this.get('model');
+      const related = store.createRecord(modelName, { collection: model });
+      model.get(relatedName).pushObject(related);
+      changesets['new'].pushObject(related);
+      const changeset = new Changeset(related, lookupValidator(validation), validation);
+      changesets['hasMany'][relatedName].pushObject({ model: related, changeset: changeset });
+    },
+
+    deleteHasMany(changesetRecord, relatedName) {
+      let changesets = this.get('changesets');
+      changesets['delete'].pushObject(changesetRecord.model);
+      changesets['hasMany'][relatedName].removeObject(changesetRecord);
+    },
+
+    // Gross, this side-effects by saving immediately. Someday I should clean
+    // this up, but for now, you have been warned.
+    addOption(relatedModelName, optionName, collectionAttrName, relatedAttrName, term) {
+      const props = getProperties(this, 'store', 'options', 'changesets');
+      const { store, options, changesets: { model } } = props;
+      let payload = {};
+      payload[relatedAttrName] = term;
+      const record = store.createRecord(relatedModelName, payload)
+      record.save().then((record) => {
+        set(options, optionName, store.peekAll(relatedModelName));
+        set(model, collectionAttrName, record);
+      });
+    },
+
+    updateDatasheet(changeset, event) {
+      changeset.set('datasheet', event.target.files[0]);
+    },
+
+    searchStudyLocation(term) {
+      return new RSVP.Promise((resolve, reject) => {
+        debounce(this, this._performSearch, 'study-location', { page_size: 500, code: term }, resolve, reject, 400);
+      });
+    },
+  },
+
+  _performSearch(model, payload, resolve, reject) {
+    this.get('store').query(model, payload).then((results) => {
+      resolve(results);
+    }, reject);
+  },
+});

app/components/collection/detail-container.js

@@ -0,0 +1,34 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  // ARGS
+  model: null,
+
+  mainColumns: [
+    { label: 'Project', valuePath: 'project.name', },
+    { label: 'IACUC', valuePath: 'project.iacucNumber', },
+    { label: 'Region', valuePath: 'studyLocation.site.region.name', },
+    { label: 'Site', valuePath: 'studyLocation.site.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', },
+    { label: 'ADFG Permit', valuePath: 'adfgPermit.name', },
+  ],
+
+  collectionSpeciesColumns: [
+    { label: 'Species', valuePath: 'species.commonName' },
+    { label: 'Count', valuePath: 'count' },
+    { label: 'Count Estimated?', valuePath: 'countEstimated' },
+    { label: 'Sex', valuePath: 'sex.name' },
+  ],
+
+  envMeasColumns: [
+    { label: 'Date Measured', valuePath: 'dateMeasured', },
+    { label: 'Time Measured', valuePath: 'timeMeasured', },
+    { label: 'Water Temp (deg C)', valuePath: 'waterTempC', },
+    { label: 'Air Temp (deg C)', valuePath: 'airTempC', },
+  ],
+});

app/components/collection/list-container.js

@@ -0,0 +1,20 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  // ARGS
+  model: null,
+
+  columns: [
+    { label: 'Project', valuePath: 'project.name', },
+    { label: 'IACUC', valuePath: 'project.iacucNumber', },
+    { label: 'Species', valuePath: 'speciesAndCounts', },
+    { label: 'Region', valuePath: 'studyLocation.site.region.name', },
+    { label: 'Site', valuePath: 'studyLocation.site.name', },
+    { label: 'Study Location', valuePath: 'studyLocation.code', },
+    { label: 'Method', valuePath: 'collectionMethod.name', },
+    { label: '# of Traps', valuePath: 'numberOfTraps', },
+    { label: 'Start', valuePath: 'startDateTime', },
+    { label: 'End', valuePath: 'endDateTime', },
+    { label: 'ADFG Permit', valuePath: 'adfgPermit.name', },
+  ],
+});

app/components/collections-container.js

@@ -1,15 +0,0 @@
-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/confirm-button.js

@@ -0,0 +1,23 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: 'span',
+  showConfirm: false,
+  initialLabel: 'LABEL',
+  confirmLabel: 'CONFIRM LABEL',
+  cancelLabel: 'Cancel',
+
+  actions: {
+    initial() {
+      this.set('showConfirm', true);
+    },
+
+    cancel() {
+      this.set('showConfirm', false);
+    },
+
+    confirm() {
+      this.get('onClick')();
+    },
+  },
+});

app/components/crud-form.js

@@ -0,0 +1,6 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  // ARGS
+  changesets: null,
+});

app/components/filter-collections.js

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

app/components/form-content.js

@@ -0,0 +1,5 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  tagName: 'form',
+});

app/components/loading-spinner.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
+import Component from '@ember/component';
-
-const { Component } = Ember;
 
 export default Component.extend({
   classNames: ['spinner'],

app/components/validated-field.js

@@ -0,0 +1,18 @@
+import Component from '@ember/component';
+import { get, computed } from '@ember/object';
+import { isEmpty } from '@ember/utils';
+
+export default Component.extend({
+  classNames: ['form-group'],
+  classNameBindings: ['isValid::has-error'],
+
+  isValid: computed('changeset.error', 'property', function() {
+    const changeset = this.get('changeset');
+    const property = this.get('property');
+    return isEmpty(get(changeset, `error.${property}`));
+  }),
+
+  hasLabel: computed('label', function() {
+    return !isEmpty(get(this, 'label'));
+  }),
+});

app/controllers/application.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
+import Controller from '@ember/controller';
-
+import { inject as service } from '@ember/service';
-const { Controller, inject: { service }} = Ember;
 
 export default Controller.extend({
   session: service('session'),

app/controllers/collections/create.js

@@ -0,0 +1,46 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import CollectionValidations from 'ccdb-web/validations/collection';
+import CollectionSpeciesValidations from 'ccdb-web/validations/collection-species';
+import CollectionMeasurementValidations from 'ccdb-web/validations/collection-measurement';
+import DatasheetValidations from 'ccdb-web/validations/datasheet';
+import ValidationMixin from 'ccdb-web/mixins/validation';
+
+export default Controller.extend(ValidationMixin, {
+  CollectionValidations,
+  CollectionSpeciesValidations,
+  DatasheetValidations,
+  CollectionMeasurementValidations,
+
+  hasMany: ['collectionSpecies', 'datasheets', 'envMeasurements'],
+
+  options: computed('projectOptions', 'studyLocationOptions',
+                    'collectionTypeOptions', 'collectionMethodOptions',
+                    'speciesOptions', 'adfgPermitOptions', 'sexOptions',
+                    function() {
+    return {
+      projects: this.get('projectOptions'),
+      studyLocations: this.get('studyLocationOptions'),
+      collectionTypes: this.get('collectionTypeOptions'),
+      collectionMethods: this.get('collectionMethodOptions'),
+      species: this.get('speciesOptions'),
+      adfgPermits: this.get('adfgPermitOptions'),
+      sexes: this.get('sexOptions'),
+    };
+  }),
+
+  actions: {
+    onSave(changeset) {
+      const postSave = () => { this.transitionToRoute('collections.index'); };
+      return this.transitionToRoute('loading').then(() => {
+        return this.validationSave(changeset, postSave);
+      });
+    },
+    onCancel(changeset) {
+      const postCancel = () => { this.transitionToRoute('collections.index'); };
+      return this.transitionToRoute('loading').then(() => {
+        return this.validationCancel(changeset, postCancel);
+      });
+    },
+  },
+});

app/controllers/collections/detail/edit.js

@@ -0,0 +1,52 @@
+import Controller from '@ember/controller';
+import { computed } from '@ember/object';
+import CollectionValidations from 'ccdb-web/validations/collection';
+import CollectionSpeciesValidations from 'ccdb-web/validations/collection-species';
+import CollectionMeasurementValidations from 'ccdb-web/validations/collection-measurement';
+import DatasheetValidations from 'ccdb-web/validations/datasheet';
+import ValidationMixin from 'ccdb-web/mixins/validation';
+
+export default Controller.extend(ValidationMixin, {
+  CollectionValidations,
+  CollectionSpeciesValidations,
+  DatasheetValidations,
+  CollectionMeasurementValidations,
+
+  hasMany: ['collectionSpecies', 'datasheets', 'envMeasurements'],
+
+  options: computed('projectOptions', 'studyLocationOptions',
+                    'collectionTypeOptions', 'collectionMethodOptions',
+                    'speciesOptions', 'adfgPermitOptions', 'sexOptions',
+                    function() {
+    return {
+      projects: this.get('projectOptions'),
+      studyLocations: this.get('studyLocationOptions'),
+      collectionTypes: this.get('collectionTypeOptions'),
+      collectionMethods: this.get('collectionMethodOptions'),
+      species: this.get('speciesOptions'),
+      adfgPermits: this.get('adfgPermitOptions'),
+      sexes: this.get('sexOptions'),
+    };
+  }),
+
+  actions: {
+    onSave(changesets) {
+      const postSave = () => {
+        // Use the model's ID here because of the ArrayProxy in the route
+        this.transitionToRoute('collections.detail', this.get('model.id'));
+      };
+      return this.transitionToRoute('loading').then(() => {
+        return this.validationSave(changesets, postSave);
+      });
+    },
+    onCancel(changesets) {
+      const postCancel = () => {
+        // Use the model's ID here because of the ArrayProxy in the route
+        return this.transitionToRoute('collections.detail', this.get('model.id'));
+      };
+      return this.transitionToRoute('loading').then(() => {
+        return this.validationCancel(changesets, postCancel);
+      });
+    },
+  },
+});

app/controllers/collections/detail/index.js

@@ -0,0 +1,14 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+  actions: {
+    editCollection() {
+      this.transitionToRoute('collections.detail.edit', this.get('model'));
+    },
+    deleteCollection() {
+      this.get('model')[0].destroyRecord().then(() => {
+        this.transitionToRoute('collections');
+      });
+    },
+  },
+});

app/controllers/collections/index.js

@@ -0,0 +1,85 @@
+import Controller from '@ember/controller';
+import { set, get, computed } from '@ember/object';
+
+
+export default Controller.extend({
+  queryParams: ['page', 'project', 'region', 'site', 'study_location',
+                'collection_method', 'number_of_traps', 'collection_start_date',
+                'collection_end_date', 'adfg_permit', 'species'],
+  page: 1,
+  project: [],
+  region: [],
+  site: [],
+  study_location: [],
+  collection_method: [],
+  adfg_permit: [],
+  species: [],
+  number_of_traps: '',
+  collection_start_date: '',
+  collection_end_date: '',
+
+  options: computed('projectOptions', 'regionOptions', 'siteOptions',
+                    'studyLocationOptions', 'collectionMethodOptions',
+                    'adfgPermitOptions', 'speciesOptions', function() {
+    return {
+      projects: this.get('projectOptions'),
+      regions: this.get('regionOptions'),
+      sites: this.get('siteOptions'),
+      studyLocations: this.get('studyLocationOptions'),
+      collectionMethods: this.get('collectionMethodOptions'),
+      adfgPermits: this.get('adfgPermitOptions'),
+      species: this.get('speciesOptions'),
+    };
+  }),
+
+  _coerceId(model) {
+    return +get(model, 'id');
+  },
+
+  actions: {
+    changePage(page) {
+      this.set('page', page);
+    },
+    rowClick(row) {
+      this.transitionToRoute('collections.detail', row.get('id'));
+    },
+    createCollection() {
+      this.transitionToRoute('collections.create');
+    },
+    resetFilter() {
+      set(this, 'page', 1);
+      ['project', 'region', 'site', 'study_location', 'collection_method',
+         'adfg_permit', 'species'].forEach((field) => {
+        set(this, field, []);
+      });
+      ['number_of_traps', 'collection_start_date', 'collection_end_date'].forEach((field) => {
+        set(this, field, '');
+      });
+    },
+    changeFilter(filter) {
+      // Need to reset the page so that things don't get weird
+      set(this, 'page', 1);
+
+      const filterModelFields = ['project', 'region', 'site', 'study_location',
+                                 'collection_method', 'adfg_permit', 'species'];
+
+      filterModelFields.forEach((field) => {
+        let fields = get(filter, field);
+        fields = fields.map(this._coerceId);
+        set(this, field, fields);
+      });
+
+      set(this, 'number_of_traps', get(filter, 'number_of_traps'));
+
+      ['collection_start_date', 'collection_end_date'].forEach((field) => {
+        let value = get(filter, field);
+        if (value) {
+          value = value.toJSON().split('T')[0];
+        } else {
+          value = '';
+        }
+        set(this, field, value);
+      });
+    },
+  },
+});

app/controllers/login.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
+import Controller from '@ember/controller';
-
+import { inject as service } from '@ember/service';
-const { Controller, inject: { service } } = Ember;
 
 export default Controller.extend({
   session: service(),

app/index.html

@@ -17,8 +17,8 @@
   <body>
     {{content-for "body"}}
 
-    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script integrity="" src="{{rootURL}}assets/vendor.js"></script>
-    <script src="{{rootURL}}assets/ccdb-web.js"></script>
+    <script integrity="" src="{{rootURL}}assets/ccdb-web.js"></script>
 
     {{content-for "body-footer"}}
   </body>

app/mixins/file-upload.js

@@ -0,0 +1,62 @@
+import Mixin from '@ember/object/mixin';
+import { isArray } from '@ember/array';
+const { keys } = Object;
+
+// Portions borrowed from https://github.com/funtusov/ember-cli-form-data
+// (that project has an MIT license listed, but no copyright holder explicitly identified)
+export default Mixin.create({
+  formDataTypes: ['POST', 'PUT', 'PATCH'],
+
+  ajaxOptions(url, type, options) {
+    let data;
+    if (options && 'data' in options) { data = options.data; }
+    let hash = this._super.apply(this, arguments);
+
+    if (typeof FormData !== 'undefined' && data && this.formDataTypes.indexOf(type) >= 0) {
+      hash.processData = false;
+      hash.contentType = false;
+      hash.data = this._getFormData(data);
+    }
+    return hash;
+  },
+
+  getFormFields(data) {
+    this._root = this._root || keys(data)[0];
+    return data[this._root];
+  },
+
+  getFormKey(key) {
+    return `${this._root}[${key}]`;
+  },
+
+  getFormValue(key, value) {
+    return value;
+  },
+
+  _getFormData(data) {
+    let formData = new FormData();
+    const fields = this.getFormFields(data);
+
+    keys(fields).forEach((key) => {
+      this._appendValue(
+        this.getFormValue(key, fields[key]),
+        this.getFormKey(key, fields[key]),
+        formData);
+    });
+    return formData;
+  },
+
+  _appendValue(value, formKey, formData) {
+    if (isArray(value)) {
+      value.forEach((item) => {
+        this._appendValue(item, `${formKey}[]`, formData);
+      });
+    } else if (value && value.constructor === Object) {
+      keys(value).forEach((key) => {
+        this._appendValue(value[key], `${formKey}[${key}]`, formData);
+      });
+    } else if (typeof value !== 'undefined'){
+      formData.append(formKey, value === null ? '' : value);
+    }
+  },
+});

app/mixins/validation.js

@@ -0,0 +1,73 @@
+import Mixin from '@ember/object/mixin';
+import { get } from '@ember/object';
+import RSVP from 'rsvp';
+const { keys } = Object;
+
+export default Mixin.create({
+  validationSave(changesets, postSave) {
+    let promises = [], changes = [], saves = [], isValid = true;
+
+    let modelChangeset = changesets['model'];
+
+    // first, delete anything that needs to be removed
+    for (const model of changesets['delete']) {
+      promises.push(model.destroyRecord());
+    }
+
+    // second, handle changes on parent model (this is important if new)
+    modelChangeset.validate().then(() => {
+      if (modelChangeset.get('isValid')) {
+        return modelChangeset.save();
+      }
+    }).then(() => {
+      for (const hasMany of keys(changesets['hasMany'])) {
+        for (const { changeset } of changesets['hasMany'][hasMany]) {
+          promises.push(changeset.validate());
+          changes.push(changeset);
+        }
+      }
+      return RSVP.all(promises);
+    }).then(() => {  // don't need the promises, just that they are done.
+      for (let changeset of changes) {
+        if (get(changeset, 'isValid')) {
+          let saver = changeset.save().catch((error) => {
+            /* eslint-disable no-console */
+            console.log(error);
+            /* eslint-enable no-console */
+            // TODO: do something with server-side non-attr errors
+          });
+          saves.push(saver);
+        } else {
+          isValid = false;
+        }
+      }
+      return RSVP.all(saves);
+    }).then(() => {
+      if (isValid) { return postSave(); }
+    });
+  },
+
+  validationCancel(changesets, postCancel) {
+    delete changesets['delete'];
+    for (const key of keys(changesets)) {
+      if (key === 'new') {
+        for (const model of changesets[key]) {
+          model.destroyRecord();
+        }
+      } else if (key === 'hasMany') {
+        const hasMany = changesets[key];
+        for (const hasManyKey of keys(changesets[key])) {
+          const hasManyChangesets = hasMany[hasManyKey];
+          for (const changeset of hasManyChangesets) {
+            changeset.rollback();
+          }
+        }
+      } else {  // single
+        const changeset = changesets[key];
+        changeset.rollback();
+      }
+    }
+
+    return postCancel();
+  },
+});

app/models/adfg-permit.js

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

app/models/collection-measurement.js

@@ -0,0 +1,12 @@
+import DS from 'ember-data';
+
+const { Model, attr, belongsTo } = DS;
+
+export default Model.extend({
+  dateMeasured: attr('ccdb-date'),
+  timeMeasured: attr('string'),
+  waterTempC:   attr('number'),
+  airTempC:     attr('number'),
+
+  collection: belongsTo('collection'),
+});

app/models/collection-species.js

@@ -0,0 +1,12 @@
+import DS from 'ember-data';
+
+const { Model, attr, belongsTo } = DS;
+
+export default Model.extend({
+  sex:            belongsTo('sex'),
+  count:          attr('number'),
+  countEstimated: attr('boolean', { defaultValue: false }),
+
+  collection: belongsTo('collection'),
+  species:    belongsTo('species'),
+});

app/models/collection.js

@@ -1,21 +1,41 @@
-import Ember from 'ember';
+import { mapBy } from '@ember/object/computed';
+import { computed } from '@ember/object';
 import DS from 'ember-data';
 
-const { computed } = Ember;
+const { Model, attr, belongsTo, hasMany } = DS;
-const { Model, attr, belongsTo } = DS;
 
 export default Model.extend({
   displayName:         attr('string'),
   numberOfTraps:       attr('number'),
-  collectionStartDate: attr('string-null-to-empty'),
+  collectionStartDate: attr('ccdb-date'),
   collectionStartTime: attr('string-null-to-empty'),
-  collectionEndDate:   attr('string-null-to-empty'),
+  collectionEndDate:   attr('ccdb-date'),
   collectionEndTime:   attr('string-null-to-empty'),
+  notes:               attr('string', { defaultValue: '' }),
 
-  project:          belongsTo('project'),
+  project:           belongsTo('project'),
-  studyLocation:    belongsTo('study-location'),
+  studyLocation:     belongsTo('study-location'),
-  collectionMethod: belongsTo('collection-method'),
+  collectionMethod:  belongsTo('collection-method'),
-  collectionType:   belongsTo('collection-type'),
+  collectionType:    belongsTo('collection-type'),
+  adfgPermit:        belongsTo('adfg-permit'),
+
+  collectionSpecies: hasMany('collection-species'),
+  datasheets:        hasMany('datasheet-attachment'),
+  envMeasurements:   hasMany('collection-measurement'),
+
+  // computed
+  species: mapBy('collectionSpecies', 'species'),
+
+  speciesNames: mapBy('species', 'commonName'),
+
+  counts: mapBy('collectionSpecies', 'count'),
+
+  speciesAndCounts: computed('speciesNames', 'counts', function() {
+    const speciesNames = this.get('speciesNames');
+    let counts = this.get('counts');
+    counts = counts.map(c => c !== null ? c : 'No Count');
+    return speciesNames.map((n, i) => `${n} (${counts[i]})`).join(', ');
+  }),
 
   startDateTime: computed('collectionStartDate', 'collectionStartTime',
     function() { return this._mergeDateTime('Start'); }),

app/models/datasheet-attachment.js

@@ -0,0 +1,9 @@
+import DS from 'ember-data';
+
+const { Model, attr, belongsTo } = DS;
+
+export default Model.extend({
+  datasheet: attr('file'),
+
+  collection: belongsTo('collection'),
+});

app/models/region.js

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

app/models/sex.js

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

app/models/site.js

@@ -0,0 +1,13 @@
+import DS from 'ember-data';
+
+const { Model, attr, hasMany, belongsTo } = DS;
+
+export default Model.extend({
+  name:        attr('string'),
+  code:        attr('string'),
+  description: attr('string'),
+  sortOrder:   attr('number'),
+
+  region:        belongsTo('region'),
+  studyLocation: hasMany('study-location'),
+});

app/models/species.js

@@ -0,0 +1,11 @@
+import DS from 'ember-data';
+
+const { Model, attr } = DS;
+
+export default Model.extend({
+  commonName: attr('string'),
+  genus:      attr('string'),
+  species:    attr('string'),
+  parasite:   attr('boolean'),
+  sortOrder:  attr('number'),
+});

app/models/study-location.js

@@ -1,6 +1,6 @@
 import DS from 'ember-data';
 
-const { Model, attr } = DS;
+const { Model, attr, belongsTo } = DS;
 
 export default Model.extend({
   name:               attr('string'),
@@ -10,4 +10,6 @@ export default Model.extend({
   collectingLocation: attr('string'),
   description:        attr('string'),
   sortOrder:          attr('number'),
+
+  site: belongsTo('site'),
 });

app/router.js

@@ -1,7 +1,7 @@
-import Ember from 'ember';
+import EmberRouter from '@ember/routing/router';
 import config from './config/environment';
 
-const Router = Ember.Router.extend({
+const Router = EmberRouter.extend({
   location: config.locationType,
   rootURL: config.rootURL
 });
@@ -10,8 +10,10 @@ Router.map(function() {
   this.route('login');
   this.route('logout');
   this.route('collections', function() {
-    this.route('1');
+    this.route('create');
-    this.route('new');
+    this.route('detail', { path: '/:collection_id' }, function() {
+      this.route('edit');
+    });
   });
 });
 

app/routes/application.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
 import ApplicationRouteMixin from 'ember-simple-auth/mixins/application-route-mixin';
 
-const { Route } = Ember;
-
 export default Route.extend(ApplicationRouteMixin, {});

app/routes/collections/1.js

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

app/routes/collections/create.js

@@ -0,0 +1,23 @@
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+
+export default Route.extend({
+  model() {
+    const store = this.get('store');
+    return RSVP.hash({
+      model: store.createRecord('collection'),
+      projectOptions: store.findAll('project'),
+      studyLocationOptions: store.query('study-location', { page_size: 500 }),
+      collectionTypeOptions: store.findAll('collection-type'),
+      collectionMethodOptions: store.findAll('collection-method'),
+      speciesOptions: store.query('species', { page_size: 500 }),
+      adfgPermitOptions: store.findAll('adfg-permit'),
+      sexOptions: store.findAll('sex'),
+    });
+  },
+
+  setupController(controller, models) {
+    this._super(...arguments);
+    controller.setProperties(models);
+  },
+});

app/routes/collections/detail.js

@@ -0,0 +1,12 @@
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+
+export default Route.extend({
+  model(params) {
+    return RSVP.all([
+      this.get('store').findRecord('collection', params.collection_id, {
+        include: 'collection-species,datasheets,env-measurements',
+      })
+    ]);
+  },
+});

app/routes/collections/detail/edit.js

@@ -0,0 +1,26 @@
+import Route from '@ember/routing/route';
+import RSVP from 'rsvp';
+
+export default Route.extend({
+  model() {
+    const store = this.get('store');
+    const model = this.modelFor('collections.detail');
+    return RSVP.hash({
+      model: model,
+      projectOptions: store.findAll('project'),
+      studyLocationOptions: store.query('study-location', { page_size: 500 }),
+      collectionTypeOptions: store.findAll('collection-type'),
+      collectionMethodOptions: store.findAll('collection-method'),
+      speciesOptions: store.query('species', { page_size: 500 }),
+      adfgPermitOptions: store.findAll('adfg-permit'),
+      sexOptions: store.findAll('sex'),
+    });
+  },
+
+  setupController(controller, models) {
+    this._super(...arguments);
+    // Unwrap the parent route's listified model
+    models.model = models.model[0];
+    controller.setProperties(models);
+  },
+});

app/routes/collections/index.js

@@ -1,11 +1,96 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
-
+import RSVP from 'rsvp';
-const { Route } = Ember;
 
 export default Route.extend({
-  model() {
+  queryParams: {
-    return this.get('store').findAll('collection', {
+    // qps are snake_case for the django api
-      include: 'project,study-location,collection-method,collection-type'
+    page: { refreshModel: true },
+    project: { refreshModel: true },
+    region: { refreshModel: true },
+    site: { refreshModel: true },
+    study_location: { refreshModel: true },
+    collection_method: { refreshModel: true },
+    number_of_traps: { refreshModel: true },
+    collection_start_date: { refreshModel: true },
+    collection_end_date: { refreshModel: true },
+    adfg_permit: { refreshModel: true },
+    species: { refreshModel: true },
+  },
+
+  model(params) {
+    const store = this.get('store');
+    const includes = ['project', 'study-location', 'study-location.site', 'site',
+      'collection-method', 'adfg-permit', 'collection-species', 'collection-species.species'];
+    const opts = {
+      include: includes.join(','),
+    };
+
+    return RSVP.hash({
+      projectOptions: store.findAll('project'),
+      regionOptions: store.findAll('region'),
+      siteOptions: store.findAll('site'),
+      studyLocationOptions: store.query('study-location', { page_size: 500 }),
+      collectionMethodOptions: store.findAll('collection-method'),
+      adfgPermitOptions: store.findAll('adfg-permit'),
+      speciesOptions: store.query('species', { page_size: 500 }),
+      model: store.query('collection', Object.assign(params, opts)),
     });
-  }
+  },
+
+  setupController(controller, models) {
+    this._super(...arguments);
+    controller.setProperties(models);
+
+    const store = this.get('store');
+
+    /* eslint-disable no-console */
+
+    let project = controller.get('project');
+    console.log('project', project);
+    project = project.map(id => store.peekRecord('project', id));
+
+    let region = controller.get('region');
+    console.log('region', region);
+    region = region.map(id => store.peekRecord('region', id));
+
+    let site = controller.get('site');
+    console.log('site', site);
+    site = site.map(id => store.peekRecord('site', id));
+
+    let studyLocation = controller.get('study_location');
+    console.log('studyLocation', studyLocation);
+    studyLocation = studyLocation.map(id => store.peekRecord('study-location', id));
+
+    let collectionMethod = controller.get('collection_method');
+    console.log('collectionMethod', collectionMethod);
+    collectionMethod = collectionMethod.map(id => store.peekRecord('collection-method', id));
+
+    let adfgPermit = controller.get('adfg_permit');
+    console.log('adfgPermit', adfgPermit);
+    adfgPermit = adfgPermit.map(id => store.peekRecord('adfg-permit', id));
+
+    let species = controller.get('species');
+    console.log('species', species);
+    species = species.map(id => store.peekRecord('species', id));
+
+    /* eslint-enable no-console */
+
+    const numberOfTraps = controller.get('number_of_traps');
+    const collectionStartDate = controller.get('collection_start_date');
+    const collectionEndDate = controller.get('collection_end_date');
+
+    let filter = {
+      project,
+      region,
+      site,
+      study_location: studyLocation,
+      collection_method: collectionMethod,
+      number_of_traps: numberOfTraps,
+      collection_start_date: collectionStartDate,
+      collection_end_date: collectionEndDate,
+      adfg_permit: adfgPermit,
+      species,
+    }
+    controller.set('filters', filter);
+  },
 });

app/routes/collections/new.js

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

app/routes/index.js

@@ -1,6 +1,8 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
 import AuthenticatedRouteMixin from 'ember-simple-auth/mixins/authenticated-route-mixin';
 
-const { Route } = Ember;
+export default Route.extend(AuthenticatedRouteMixin, {
-
+  afterModel() {
-export default Route.extend(AuthenticatedRouteMixin, {});
+    this.transitionTo('collections');
+  },
+});

app/routes/login.js

@@ -1,6 +1,4 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
 import UnauthenticatedRouteMixin from 'ember-simple-auth/mixins/unauthenticated-route-mixin';
 
-const { Route } = Ember;
-
 export default Route.extend(UnauthenticatedRouteMixin, {});

app/routes/logout.js

@@ -1,6 +1,5 @@
-import Ember from 'ember';
+import Route from '@ember/routing/route';
-
+import { inject as service } from '@ember/service';
-const { Route, inject: { service }} = Ember;
 
 export default Route.extend({
   session: service('session'),

app/serializers/application.js

@@ -0,0 +1,16 @@
+import { capitalize } from '@ember/string';
+import DS from 'ember-data';
+
+const { JSONAPISerializer } = DS;
+
+export default JSONAPISerializer.extend({
+  payloadTypeFromModelName(modelName) {
+    return modelName.split('-').map(key => capitalize(key)).join('');
+  },
+
+  normalizeArrayResponse(store, primaryModelClass, payload, id, requestType) {
+    let normalizedDocument = this._super(store, primaryModelClass, payload, id, requestType);
+    normalizedDocument.meta.links = normalizedDocument.links;
+    return normalizedDocument;
+  },
+});

app/styles/app.css

@@ -1,12 +1,13 @@
-.content {
+[data-ember-action]:not(:disabled) {
-  padding-left: 40px;
+  cursor: pointer;
-  padding-right: 40px;
-  padding-top: 20px;
-  padding-bottom: 20px;
 }
 
-.top-buffer {
+.table-nav .pager {
-  padding-top: 20px;
+  margin-top: 10px;
+}
+
+.table-stats {
+  margin-top: 10px;
 }
 
 .form-signin {
@@ -49,6 +50,10 @@
   border-top-right-radius: 0;
 }
 
+.top-buffer {
+  margin-top: 20px;
+}
+
 /* Sidebar */
 .sidebar {
   position: fixed;

app/templates/application.hbs

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

app/templates/collections/1.hbs

@@ -1,147 +0,0 @@
-<h3>Collection Detail</h3>
-
-<div class="row">
-  <div class="panel panel-default col-md-12">
-    <div class="panel-body table-responsive">
-      <table class="table table-border table-hover table-condensed">
-        <thead>
-          <tr>
-            <th>Project</th>
-            <th>Study Location</th>
-            <th>Method</th>
-            <th>Type</th>
-            <th># of Traps</th>
-            <th>Start</th>
-            <th>End</th>
-            <th>Experiments</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td>Perchlorate</td>
-            <td>RS</td>
-            <td>MT</td>
-            <td>Embryos</td>
-            <td></td>
-            <td>2010-06-07</td>
-            <td>2010-06-07</td>
-            <td>Perchlorate diel; Perchlorate rescue</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </div>
-</div>
-
-<div class="row">
-  <div class="panel panel-default col-md-12">
-    <div class="panel-body">
-      <ul>
-        <li><a href="">Attachment 1: Photo</a></li>
-        <li><a href="">Attachment 2: Field Sheets</a></li>
-        <li><a href="">Attachment 3: Misc Notes</a></li>
-      </ul>
-    </div>
-  </div>
-</div>
-
-<div class="row">
-  <div class="col-md-12">
-    <form class="form-inline">
-      <div class="form-group">
-        <label>Experiment</label>
-        <select class="form-control">
-          <option>All</option>
-          <option selected=selected>Perchlorate diel</option>
-          <option>Perchlorate rescue</option>
-        </select>
-      </div>
-    </form>
-  </div>
-</div>
-
-<div class="row top-buffer">
-  <div class="col-md-12">
-    <!-- Nav tabs -->
-    <ul class="nav nav-tabs" role="tablist">
-      <li role="presentation" class="active"><a href="#treatments" role="tab" data-toggle="tab">Treatments</a></li>
-      <li role="presentation"><a href="#treatment-replicates" role="tab" data-toggle="tab">Treatment Replicates</a></li>
-    </ul>
-
-    <!-- Tab panes -->
-    <div class="tab-content">
-      <div role="tabpanel" class="tab-pane active" id="treatments">
-        <table class="table table-border table-hover table-condensed">
-          <thead>
-            <tr>
-              <th>Experiment</th>
-              <th>Type</th>
-              <th>Species</th>
-              <th>Sex</th>
-              <th>Container</th>
-              <th>Replicates</th>
-              <th>Flaw</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Perchlorate diel</td>
-              <td>10 ppm perchlorate, iodide supplemented</td>
-              <td>Threespine stickleback</td>
-              <td>Both Sexes</td>
-              <td>Jar</td>
-              <td>1; 2; 3</td>
-              <td></td>
-            </tr>
-            <tr>
-              <td>Perchlorate diel</td>
-              <td>10 ppm perchlorate, iodide supplemented</td>
-              <td>Threespine stickleback</td>
-              <td>Both Sexes</td>
-              <td>Jar</td>
-              <td>1; 2; 3</td>
-              <td></td>
-            </tr>
-            <tr>
-              <td>Perchlorate diel</td>
-              <td>10 ppm perchlorate, iodide supplemented</td>
-              <td>Threespine stickleback</td>
-              <td>Both Sexes</td>
-              <td>Jar</td>
-              <td>1; 2; 3</td>
-              <td></td>
-            </tr>
-            <tr>
-              <td>Perchlorate diel</td>
-              <td>10 ppm perchlorate, iodide supplemented</td>
-              <td>Threespine stickleback</td>
-              <td>Both Sexes</td>
-              <td>Jar</td>
-              <td>1; 2; 3</td>
-              <td></td>
-            </tr>
-            <tr>
-              <td>Perchlorate diel</td>
-              <td>10 ppm perchlorate, iodide supplemented</td>
-              <td>Threespine stickleback</td>
-              <td>Both Sexes</td>
-              <td>Jar</td>
-              <td>1; 2; 3</td>
-              <td></td>
-            </tr>
-            <tr>
-              <td>Perchlorate diel</td>
-              <td>10 ppm perchlorate, iodide supplemented</td>
-              <td>Threespine stickleback</td>
-              <td>Both Sexes</td>
-              <td>Jar</td>
-              <td>1; 2; 3</td>
-              <td></td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <div role="tabpanel" class="tab-pane" id="treatment-replicates">...</div>
-    </div>
-  </div>
-</div>

app/templates/collections/create.hbs

@@ -0,0 +1,13 @@
+{{
+  collection/create-container
+  model=model
+  validations=(hash
+    collection=CollectionValidations
+    collectionSpecies=CollectionSpeciesValidations
+    envMeasurements=CollectionMeasurementValidations
+    datasheet=DatasheetValidations)
+  options=options
+  hasMany=hasMany
+  onSave=(action 'onSave')
+  onCancel=(action 'onCancel')
+}}

app/templates/collections/detail/edit.hbs

@@ -0,0 +1,13 @@
+{{
+  collection/create-container
+  model=model
+  validations=(hash
+    collection=CollectionValidations
+    collectionSpecies=CollectionSpeciesValidations
+    datasheet=DatasheetValidations
+    envMeasurements=CollectionMeasurementValidations)
+  options=options
+  hasMany=hasMany
+  onSave=(action 'onSave')
+  onCancel=(action 'onCancel')
+}}

app/templates/collections/detail/index.hbs

@@ -0,0 +1,6 @@
+{{
+  collection/detail-container
+  model=model
+  editCollection=(action 'editCollection')
+  deleteCollection=(action 'deleteCollection')
+}}

app/templates/collections/index.hbs

@@ -1 +1,11 @@
-{{collections-container model=model}}
+{{
+  collection/list-container
+  model=model
+  filters=filters
+  options=options
+  changeFilter=(action 'changeFilter')
+  resetFilter=(action 'resetFilter')
+  changePage=(action 'changePage')
+  onRowClick=(action 'rowClick')
+  createCollection=(action 'createCollection')
+}}

app/templates/collections/loading.hbs

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

app/templates/collections/new.hbs

@@ -1,130 +0,0 @@
-<form class="form-horizontal">
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Start Date
-    </label>
-    <div class="col-sm-10">
-      <input type="date" class="form-control">
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Start Time
-    </label>
-    <div class="col-sm-10">
-      <input type="date" class="form-control">
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      End Date
-    </label>
-    <div class="col-sm-10">
-      <input type="date" class="form-control">
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      End Time
-    </label>
-    <div class="col-sm-10">
-      <input type="date" class="form-control">
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Collectors
-    </label>
-    <div class="col-sm-10">
-      <select multiple=true class="form-control">
-        <option>Frank</option>
-        <option>Loren</option>
-        <option>Danielle</option>
-        <option>Matt</option>
-        <option>Lauren</option>
-        <option>Amy</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Site
-    </label>
-    <div class="col-sm-10">
-      <select class="form-control">
-        <option>--- Select a Site ---</option>
-        <option>SQ12</option>
-        <option>SQ1</option>
-        <option>SQ3</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Method
-    </label>
-    <div class="col-sm-10">
-      <select class="form-control">
-        <option>--- Select a Method ---</option>
-        <option>MT</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Type
-    </label>
-    <div class="col-sm-10">
-      <select class="form-control">
-        <option>--- Select a Type ---</option>
-        <option>Embryos</option>
-        <option>Adults</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      # Of Traps
-    </label>
-    <div class="col-sm-10">
-      <input type="text" class="form-control">
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Experiments
-    </label>
-    <div class="col-sm-10">
-      <select multiple=true class="form-control">
-        <option>Perchlorate diel</option>
-        <option>Perchlorate rescue</option>
-        <option>Ship creek monitoring</option>
-        <option>St Lawrence island monitoring</option>
-      </select>
-    </div>
-  </div>
-
-  <div class="form-group">
-    <label class="col-sm-2 control-label">
-      Attachments
-    </label>
-    <div class="col-sm-10">
-      <input type="file">
-    </div>
-  </div>
-
-  <div class="form-group">
-    <div class="col-sm-offset-2 col-sm-10">
-      <button type="submit" class="btn btn-default">Save</button>
-    </div>
-  </div>
-</form>

app/templates/components/action-button.hbs

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

app/templates/components/ccdb-filter.hbs

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

app/templates/components/ccdb-pagination.hbs

@@ -1,36 +1,35 @@
-<div class="col-md-12">
+<div class="row">
-  <div class="pull-left" style="padding-top: 26px;">
+  <div class="col-md-6 table-nav">
-    Showing 1-100 of 102 entries
+      <ul class="pager pull-left">
-  </div>
+        {{#if notOnFirst}}
-  <div class="pull-right">
+          <li><a {{action (action changePage first)}}>First</a></li>
-    <nav aria-label="Page navigation">
+        {{else}}
-      <ul class="pagination">
+          <li class="disabled"><a>First</a></li>
-        <li>
+        {{/if}}
-          <a href="#">
+
-            <span aria-hidden="true">First</span>
+        {{#if prev}}
-          </a>
+          <li><a {{action (action changePage prev)}}>Previous</a></li>
-        </li>
+        {{else}}
-        <li>
+          <li class="disabled"><a>Previous</a></li>
-          <a href="#">
+        {{/if}}
-            <span aria-hidden="true">Previous</span>
+
-          </a>
+        {{#if next}}
-        </li>
+          <li><a {{action (action changePage next)}}>Next</a></li>
-        <li><a href="#">1</a></li>
+        {{else}}
-        <li><a href="#">2</a></li>
+          <li class="disabled"><a>Next</a></li>
-        <li><a href="#">3</a></li>
+        {{/if}}
-        <li><a href="#">4</a></li>
+
-        <li><a href="#">5</a></li>
+        {{#if notOnLast}}
-        <li>
+          <li><a {{action (action changePage last)}}>Last</a></li>
-          <a href="#">
+        {{else}}
-            <span aria-hidden="true">Next</span>
+          <li class="disabled"><a>Last</a></li>
-          </a>
+        {{/if}}
-        </li>
-        <li>
-          <a href="#">
-            <span aria-hidden="true">Last</span>
-          </a>
-        </li>
       </ul>
-    </nav>
+  </div>
+  <div class="col-md-6">
+    <div class="pull-right table-stats">
+      <span class="label label-default">Current Page: {{currentPage}}</span>
+      <span class="label label-default">Total Records: {{totalRecords}}</span>
+    </div>
   </div>
 </div>

app/templates/components/ccdb-table.hbs

@@ -1,10 +1,14 @@
 {{#if hasBlock}}
   {{yield (hash
-    table=(component 'light-table' table=table)
+    grid=(component 'light-table' table=table onRowClicked=(action (optional onRowClicked)))
+    pagination=(component 'ccdb-pagination' model=model changePage=(action (optional changePage)))
   )}}
 {{else}}
-  {{#light-table table tableClassNames="table table-striped" as |t|}}
+  {{ccdb-pagination model=model changePage=(action (optional changePage))}}
-    {{t.head}}
+  <div class="table-responsive">
-    {{t.body}}
+    {{#light-table table tableClassNames="table table-striped" as |t|}}
-  {{/light-table}}
+      {{t.head}}
+      {{t.body onRowClick=(action (optional onRowClick))}}
+    {{/light-table}}
+  </div>
 {{/if}}

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

@@ -0,0 +1,283 @@
+{{#crud-form
+  changesets=changesets
+  onSave=(action onSave)
+  onCancel=(action onCancel) as |f|
+}}
+  <div class="row">
+    <div class="col-md-4">
+      <div class="well">
+        {{#f.content class='form'}}
+          {{#with changesets.model as |changeset|}}
+            {{#validated-field property='project' label='Project' changeset=changeset}}
+              {{#power-select
+                options=options.projects
+                selected=changeset.project
+                onchange=(action (mut changeset.project))
+                searchField='name'
+                as |project|
+              }}
+                {{project.name}}
+              {{/power-select}}
+            {{/validated-field}}
+
+            {{#validated-field property='adfgPermit' label='ADFG Permit' changeset=changeset}}
+              {{#power-select-with-create
+                options=options.adfgPermits
+                selected=changeset.adfgPermit
+                onchange=(action (mut changeset.adfgPermit))
+                oncreate=(action 'addOption' 'adfg-permit' 'adfgPermits' 'adfgPermit' 'name')
+                searchField='name'
+                as |adfgPermit term|
+              }}
+                {{adfgPermit.name}}
+              {{/power-select-with-create}}
+            {{/validated-field}}
+
+            {{#validated-field property='studyLocation' changeset=changeset}}
+              <label class="control-label">
+                Study location
+                <a href="{{newStudyLocationAdmin}}" target="_blank">+</a>
+              </label>
+              {{#power-select
+                search=(action 'searchStudyLocation')
+                options=options.studyLocations
+                selected=changeset.studyLocation
+                onchange=(action (mut changeset.studyLocation))
+                searchField='code'
+                as |studyLocation|
+              }}
+                {{studyLocation.code}}
+              {{/power-select}}
+            {{/validated-field}}
+
+            {{#validated-field property='collectionType' label='Collection type' changeset=changeset}}
+                {{#power-select
+                  options=options.collectionTypes
+                  selected=changeset.collectionType
+                  onchange=(action (mut changeset.collectionType))
+                  searchField='name'
+                  as |collectionType|
+                }}
+                  {{collectionType.name}}
+                {{/power-select}}
+            {{/validated-field}}
+
+            {{#validated-field property='collectionMethod' label='Collection method' changeset=changeset}}
+              {{#power-select
+                options=options.collectionMethods
+                selected=changeset.collectionMethod
+                onchange=(action (mut changeset.collectionMethod))
+                searchField='name'
+                as |collectionMethod|
+              }}
+                {{collectionMethod.name}}
+              {{/power-select}}
+            {{/validated-field}}
+
+            {{#validated-field property='numberOfTraps' label='Number of traps' changeset=changeset}}
+              {{input value=changeset.numberOfTraps type='number' class='form-control'}}
+            {{/validated-field}}
+
+            {{#validated-field property='collectionStartDate' label='Collection start date' changeset=changeset}}
+              {{
+                pikaday-input
+                onSelection=(action (mut changeset.collectionStartDate))
+                value=changeset.collectionStartDate
+                useUTC=true
+                placeholder='MM/DD/YYYY'
+                format='MM/DD/YYYY'
+                class='form-control'
+              }}
+            {{/validated-field}}
+
+            {{#validated-field property='collectionStartTime' label='Collection start time' changeset=changeset}}
+              {{input value=changeset.collectionStartTime type='time' class='form-control' placeholder='HH:MM:SS (24 hour)'}}
+            {{/validated-field}}
+
+            {{#validated-field property='collectionEndDate' label='Collection end date' changeset=changeset}}
+              {{
+                pikaday-input
+                onSelection=(action (mut changeset.collectionEndDate))
+                value=changeset.collectionEndDate
+                useUTC=true
+                placeholder='MM/DD/YYYY'
+                format='MM/DD/YYYY'
+                class='form-control'
+              }}
+            {{/validated-field}}
+
+            {{#validated-field property='collectionEndTime' label='Collection end time' changeset=changeset}}
+              {{input value=changeset.collectionEndTime type='time' class='form-control' placeholder='HH:MM:SS (24 hour)'}}
+            {{/validated-field}}
+          {{/with}}
+        {{/f.content}}
+      </div>
+    </div>
+    <div class="col-md-8">
+      <div class="row">
+        <div class="col-md-12">
+          {{#validated-field property='notes' label='Notes' changeset=changesets.model}}
+            {{textarea value=changesets.model.notes class='form-control'}}
+          {{/validated-field}}
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <table class="table">
+            <caption>
+              Species / Count Info
+              {{action-button isSuccess=true isXSmall=true label='+' onClick=(action 'addHasMany' 'collection-species' 'collectionSpecies')}}
+            </caption>
+            <thead>
+              <tr>
+                <th class="col-md-3">Species</th>
+                <th class="col-md-3">Count</th>
+                <th class="col-md-3">Count Estimated</th>
+                <th class="col-md-3">Sex</th>
+                <th class="col-md-1">Delete</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each changesets.hasMany.collectionSpecies as |cs|}}
+                <tr class="form">
+                  <td class="col-md-3">
+                    {{#validated-field property='species' changeset=cs.changeset}}
+                      {{#power-select
+                        options=options.species
+                        selected=cs.changeset.species
+                        onchange=(action (mut cs.changeset.species))
+                        searchField='commonName'
+                        as |species|
+                      }}
+                        {{species.commonName}}
+                      {{/power-select}}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-3">
+                    {{#validated-field property='count' changeset=cs.changeset}}
+                      {{input value=cs.changeset.count}}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-3">
+                    {{#validated-field property='countEstimated' changeset=cs.changeset}}
+                      {{input checked=cs.changeset.countEstimated type='checkbox'}}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-3">
+                    {{#validated-field property='sex' changeset=cs.changeset}}
+                      {{#power-select
+                        options=options.sexes
+                        selected=cs.changeset.sex
+                        onchange=(action (mut cs.changeset.sex))
+                        searchField='name'
+                        as |sex|
+                      }}
+                        {{sex.name}}
+                      {{/power-select}}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-2">
+                    {{action-button isDanger=true isXSmall=true label='X' onClick=(action 'deleteHasMany' cs 'collectionSpecies')}}
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <table class="table">
+            <caption>
+              Environmental Measurements
+              {{action-button isSuccess=true isXSmall=true label='+' onClick=(action 'addHasMany' 'collection-measurement' 'envMeasurements')}}
+            </caption>
+            <thead>
+              <tr>
+                <th class="col-md-3">Date Measured</th>
+                <th class="col-md-3">Time Measured</th>
+                <th class="col-md-3">Water Temperature (deg C)</th>
+                <th class="col-md-3">Air Temperature (deg C)</th>
+                <th class="col-md-1">Delete</th>
+              </tr>
+            </thead>
+            <tbody>
+              {{#each changesets.hasMany.envMeasurements as |cm|}}
+                <tr class="form">
+                  <td class="col-md-3">
+                    {{#validated-field property='dateMeasured' changeset=cm.changeset}}
+                      {{
+                        pikaday-input
+                        onSelection=(action (mut cm.changeset.dateMeasured))
+                        value=cm.changeset.dateMeasured
+                        useUTC=true
+                        placeholder='MM/DD/YYYY'
+                        format='MM/DD/YYYY'
+                        class='form-control'
+                      }}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-3">
+                    {{#validated-field property='timeMeasured' changeset=cm.changeset}}
+                      {{input value=cm.changeset.timeMeasured type='time' class='form-control'}}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-3">
+                    {{#validated-field property='waterTempC' changeset=cm.changeset}}
+                      {{input value=cm.changeset.waterTempC class='form-control'}}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-3">
+                    {{#validated-field property='airTempC' changeset=cm.changeset}}
+                      {{input value=cm.changeset.airTempC class='form-control'}}
+                    {{/validated-field}}
+                  </td>
+                  <td class="col-md-2">
+                    {{action-button isDanger=true isXSmall=true label='X' onClick=(action 'deleteHasMany' cm 'envMeasurements')}}
+                  </td>
+                </tr>
+              {{/each}}
+            </tbody>
+          </table>
+        </div>
+      </div>
+      <div class="row">
+        <div class="col-md-12">
+          <form enctype="multipart/form-data">
+            <table class="table">
+              <caption>
+                Attachments
+                {{action-button isSuccess=true isXSmall=true label='+' onClick=(action 'addHasMany' 'datasheet-attachment' 'datasheets')}}
+              </caption>
+              <thead>
+                <tr>
+                  <th>File</th>
+                  <th>Delete</th>
+                </tr>
+              </thead>
+              <tbody>
+                {{#each changesets.hasMany.datasheets as |d|}}
+                  <tr class="form">
+                    <td>
+                      {{#if d.model.isNew}}
+                        {{#validated-field property='datasheet' changeset=d.changeset}}
+                          <input type="file" onchange={{action 'updateDatasheet' d.changeset}} accept="image/png,image/jpeg,application/pdf">
+                        {{/validated-field}}
+                      {{else}}
+                        <a href="{{ d.model.datasheet }}">{{ d.model.datasheet }}</a>
+                      {{/if}}
+                    </td>
+                    <td>
+                      {{action-button isDanger=true isXSmall=true label='X' onClick=(action 'deleteHasMany' d 'datasheets')}}
+                    </td>
+                  </tr>
+                {{/each}}
+              </tbody>
+            </table>
+          </form>
+        </div>
+      </div>
+    </div>
+  </div>
+  {{f.save}} {{f.cancel}}
+{{/crud-form}}

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

@@ -0,0 +1,75 @@
+{{
+  action-button
+  isPrimary=true
+  label='Edit Collection'
+  onClick=(action editCollection)
+}}
+
+{{
+  confirm-button
+  initialLabel='Delete Collection'
+  confirmLabel='Yes, Delete Collection'
+  onClick=(action deleteCollection)
+}}
+
+<h3>Main Detail</h3>
+<div class="row">
+  <div class="col-md-12">
+    {{#ccdb-table model=model columns=mainColumns as |c|}}
+      {{#c.grid as |g|}}
+        {{g.head}}
+        {{g.body}}
+      {{/c.grid}}
+    {{/ccdb-table}}
+  </div>
+</div>
+
+<hr>
+
+<h3>Species/Counts</h3>
+<div class="row">
+  <div class="col-md-12">
+    {{#ccdb-table model=model.[0].collectionSpecies columns=collectionSpeciesColumns as |c|}}
+      {{#c.grid as |g|}}
+        {{g.head}}
+        {{g.body}}
+      {{/c.grid}}
+    {{/ccdb-table}}
+  </div>
+</div>
+
+<hr>
+
+<h3>Environmental Measurements</h3>
+<div class="row">
+  <div class="col-md-12">
+    {{#ccdb-table model=model.[0].envMeasurements columns=envMeasColumns as |c|}}
+      {{#c.grid as |g|}}
+        {{g.head}}
+        {{g.body}}
+      {{/c.grid}}
+    {{/ccdb-table}}
+  </div>
+</div>
+
+<hr>
+
+<h3>Notes</h3>
+<div class="row">
+  <div class="col-md-12">
+    {{model.[0].notes}}
+  </div>
+</div>
+
+<hr>
+
+<h3>Attachments</h3>
+<div class="row">
+  <div class="col-md-12">
+    <ul>
+      {{#each model.[0].datasheets as |d|}}
+        <li><a href="{{ d.datasheet }}">{{ d.datasheet }}</a></li>
+      {{/each}}
+    </ul>
+  </div>
+</div>

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

@@ -0,0 +1,163 @@
+{{
+  action-button
+  isPrimary=true
+  label='New Collection'
+  onClick=(action createCollection)
+}}
+
+<hr>
+
+{{#ccdb-filter
+  filters=filters
+  options=options
+}}
+  <div class="well">
+    <div class="row">
+      <div class="col-md-3">
+        <label>Projects</label>
+        {{#power-select-multiple
+          options=options.projects
+          selected=filters.project
+          onchange=(action (mut filters.project))
+          searchField='name'
+          as |project|
+        }}
+          {{project.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-3">
+        <label>Regions</label>
+        {{#power-select-multiple
+          options=options.regions
+          selected=filters.region
+          onchange=(action (mut filters.region))
+          searchField='name'
+          as |region|
+        }}
+          {{region.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-3">
+        <label>Sites</label>
+        {{#power-select-multiple
+          options=options.sites
+          selected=filters.site
+          onchange=(action (mut filters.site))
+          searchField='name'
+          as |site|
+        }}
+          {{site.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-3">
+        <label>Study Locations</label>
+        {{#power-select-multiple
+          options=options.studyLocations
+          selected=filters.study_location
+          onchange=(action (mut filters.study_location))
+          searchField='code'
+          as |studyLocation|
+        }}
+          {{studyLocation.code}}
+        {{/power-select-multiple}}
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-4">
+        <label>Collection Methods</label>
+        {{#power-select-multiple
+          options=options.collectionMethods
+          selected=filters.collection_method
+          onchange=(action (mut filters.collection_method))
+          searchField='name'
+          as |collectionMethod|
+        }}
+          {{collectionMethod.name}}
+        {{/power-select-multiple}}
+      </div>
+      <div class="col-md-4">
+        <label>Number of Traps</label>
+        {{input type="text" class="form-control" value=filters.number_of_traps}}
+      </div>
+      <div class="col-md-4">
+        <label>ADFG Permit</label>
+        {{#power-select-multiple
+          options=options.adfgPermits
+          selected=filters.adfg_permit
+          onchange=(action (mut filters.adfg_permit))
+          searchField='name'
+          as |adfgPermit|
+        }}
+          {{adfgPermit.name}}
+        {{/power-select-multiple}}
+      </div>
+    </div>
+
+    <div class="row">
+      <div class="col-md-4">
+        <label>Start Date</label>
+        {{
+          pikaday-input
+          onSelection=(action (mut filters.collection_start_date))
+          value=filters.collection_start_date
+          useUTC=true
+          placeholder='MM/DD/YYYY'
+          format='MM/DD/YYYY'
+          class='form-control'
+        }}
+      </div>
+      <div class="col-md-4">
+        <label>End Date</label>
+        {{
+          pikaday-input
+          onSelection=(action (mut filters.collection_end_date))
+          value=filters.collection_end_date
+          useUTC=true
+          placeholder='MM/DD/YYYY'
+          format='MM/DD/YYYY'
+          class='form-control'
+        }}
+      </div>
+      <div class="col-md-4">
+        <label>Species</label>
+        {{#power-select-multiple
+          options=options.species
+          selected=filters.species
+          onchange=(action (mut filters.species))
+          searchField='commonName'
+          as |species|
+        }}
+          {{species.commonName}}
+        {{/power-select-multiple}}
+      </div>
+    </div>
+
+    <div class="row top-buffer">
+      <div class="col-md-12">
+        <div class="btn-group">
+          {{
+            action-button
+            isSuccess=true
+            label='Search'
+            onClick=(action changeFilter filters)
+          }}
+          {{
+            action-button
+            isWarning=true
+            label='Reset'
+            onClick=(action resetFilter)
+          }}
+        </div>
+      </div>
+    </div>
+  </div>
+{{/ccdb-filter}}
+
+{{
+  ccdb-table
+  model=model
+  columns=columns
+  changePage=(action changePage)
+  onRowClick=(action onRowClick)
+}}

app/templates/components/collections-container.hbs

@@ -1,5 +0,0 @@
-{{#link-to "collections.new" class="btn btn-default"}}New Collection{{/link-to}}
-<hr>
-{{filter-collections}}
-{{ccdb-pagination}}
-{{ccdb-table model=model columns=columns}}

app/templates/components/confirm-button.hbs

@@ -0,0 +1,6 @@
+{{#if showConfirm}}
+  {{action-button isDanger=true label=cancelLabel onClick=(action 'cancel')}}
+  {{action-button isSuccess=true label=confirmLabel onClick=(action 'confirm')}}
+{{else}}
+  {{action-button isDanger=true label=initialLabel onClick=(action 'initial')}}
+{{/if}}

app/templates/components/crud-form.hbs

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

app/templates/components/filter-collections.hbs

@@ -1,73 +0,0 @@
-<div class="well well-sm">
-  <div class="row">
-
-    <div class="col-md-3">
-      <label>Project</label>
-      <select class="form-control">
-        <option selected=selected>Perchlorate</option>
-        <option>Ship Creek</option>
-        <option>St. Lawrence Island</option>
-      </select>
-    </div>
-
-    <div class="col-md-3">
-      <label>Study Location</label>
-      <select class="form-control">
-        <option selected=selected>TL5</option>
-        <option>SQ12</option>
-        <option>CPISBV</option>
-      </select>
-    </div>
-
-    <div class="col-md-3">
-      <label>Method</label>
-      <select class="form-control">
-        <option selected=selected>Fyke Net</option>
-        <option>Seine</option>
-        <option>Minnow Trap</option>
-      </select>
-    </div>
-
-    <div class="col-md-3">
-      <label>Type</label>
-      <select class="form-control">
-        <option selected=selected>Adults</option>
-        <option>Embryos</option>
-      </select>
-    </div>
-
-  </div>
-
-  <div class="row top-buffer">
-
-    <div class="col-md-4">
-      <label># of Traps</label>
-      <input type="text" class="form-control" placeholder="3">
-    </div>
-
-    <div class="col-md-4">
-      <label>Start</label>
-      <input type="datetime" class="form-control">
-    </div>
-
-    <div class="col-md-4">
-      <label>End</label>
-      <input type="datetime" class="form-control">
-    </div>
-
-  </div>
-
-  <div class="row top-buffer">
-    <div class="col-md-12">
-      <div class="btn-group" role="group">
-        <button type="submit" class="btn btn-default">
-          Search
-        </button>
-        <button type="button" class="btn btn-default">
-          Reset
-        </button>
-
-      </div>
-    </div>
-  </div>
-</div>

app/templates/components/form-content.hbs

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

app/templates/components/validated-field.hbs

@@ -0,0 +1,13 @@
+{{#if hasLabel}}
+  <label class="control-label">{{label}}</label>
+{{/if}}
+
+{{yield}}
+
+{{#if (get changeset.error property)}}
+  <ul class="help-block">
+    {{#each (get (get changeset.error property) "validation") as |message|}}
+      <li>{{message}}</li>
+    {{/each}}
+  </ul>
+{{/if}}

app/templates/index.hbs

@@ -1 +1 @@
-
+TBA

app/transforms/ccdb-date.js

@@ -0,0 +1,19 @@
+import DS from 'ember-data';
+
+export default DS.Transform.extend({
+  deserialize(serialized) {
+    return serialized || '';
+  },
+
+  serialize(date) {
+    if (date !== '') {
+      date = new Date(date);
+      const day = date.getUTCDate();
+      const month = date.getUTCMonth() + 1;
+      const year = date.getUTCFullYear();
+      return `${year}-${month}-${day}`;
+    } else {
+      return null;
+    }
+  }
+});

app/transforms/file.js

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

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

@@ -8,6 +8,6 @@ export default Transform.extend({
   },
 
   serialize(deserialized) {
-    return deserialized;
+    return deserialized === '' ? null : deserialized;
   }
 });

app/validations/collection-measurement.js

@@ -0,0 +1,12 @@
+import {
+  validatePresence,
+  validateNumber,
+} from 'ember-changeset-validations/validators';
+
+export default {
+  dateMeasured: validatePresence(true),
+  timeMeasured: validatePresence(true),
+  waterTempC:   validateNumber({ allowBlank: true, integer: false, positive: false }),
+  airTempC:     validateNumber({ allowBlank: true, integer: false, positive: false }),
+  collection:   validatePresence(true),
+}

app/validations/collection-species.js

@@ -0,0 +1,12 @@
+import {
+  validatePresence,
+  validateNumber,
+} from 'ember-changeset-validations/validators';
+
+export default {
+  sex:            validatePresence(true),
+  count:          validateNumber({ allowBlank: true, integer: true, positive: true }),
+  countEstimated: validatePresence(true),
+  species:        validatePresence(true),
+  collection:     validatePresence(true),
+}

app/validations/collection.js

@@ -0,0 +1,16 @@
+import {
+  validatePresence,
+  validateNumber,
+} from 'ember-changeset-validations/validators';
+
+export default {
+  project:             validatePresence(true),
+  studyLocation:       validatePresence(true),
+  collectionMethod:    validatePresence(true),
+  collectionType:      validatePresence(true),
+  numberOfTraps:       validateNumber({ allowBlank: true, integer: true, positive: true }),
+
+  collectionStartDate: validatePresence(true),
+  collectionEndDate:   validatePresence(true),
+  // TODO: Fix time formats
+}

app/validations/datasheet.js

@@ -0,0 +1,8 @@
+import {
+  validatePresence,
+} from 'ember-changeset-validations/validators';
+
+export default {
+  datasheet:  validatePresence(true),
+  collection: validatePresence(true),
+}

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
+        'ds-payload-type-hooks': true,
-        // e.g. 'with-controller': true
       },
       EXTEND_PROTOTYPES: {
         // Prevent Ember Data from overriding Date.parse.
@@ -21,12 +20,23 @@ module.exports = function(environment) {
     APP: {
       // Here you can pass flags/options to your application instance
       // when it is created
+    },
+
+    sentry: {
+      dsn: 'https://fd3c695fa9394de48a7c69b7a322960b@sentry.io/1186914',
+      globalErrorCatching: false,
+    },
+
+    contentSecurityPolicy: {
+      'script-src': "'self' 'unsafe-inline' 'unsafe-eval'",
+      'img-src': 'data: app.getsentry.com',
     }
   };
 
   if (environment === 'development') {
     ENV.APP.API_HOST = 'http://localhost:8000';
     ENV.APP.API_NAMESPACE = 'api/v1';
+    ENV.sentry.development = true;
   }
 
   if (environment === 'test') {
@@ -41,7 +51,7 @@ module.exports = function(environment) {
   }
 
   if (environment === 'production') {
-    ENV.APP.API_HOST = 'https://obscure-caverns-99102.herokuapp.com';
+    ENV.APP.API_HOST = 'https://ccdb-api.thermokar.st';
     ENV.APP.API_NAMESPACE = 'api/v1';
   }
 

ember-cli-build.js

@@ -11,6 +11,7 @@ module.exports = function(defaults) {
   });
 
   app.import('bower_components/bootstrap/dist/css/bootstrap.min.css');
+  app.import('bower_components/bootstrap/dist/css/bootstrap-theme.min.css');
 
   return app.toTree();
 };

package.json

@@ -17,37 +17,46 @@
   "devDependencies": {
     "broccoli-asset-rev": "^2.4.5",
     "ember-ajax": "^3.0.0",
-    "ember-cli": "~2.14.0",
+    "ember-changeset": "^1.3.0",
+    "ember-changeset-validations": "^1.2.8",
+    "ember-cli": "^3.24.0",
     "ember-cli-app-version": "^3.0.0",
-    "ember-cli-babel": "^6.3.0",
+    "ember-cli-babel": "^6.6.0",
     "ember-cli-code-coverage": "^0.4.1",
-    "ember-cli-dependency-checker": "^1.3.0",
+    "ember-cli-dependency-checker": "^2.0.0",
-    "ember-cli-eslint": "^3.0.0",
+    "ember-cli-eslint": "^4.0.0",
-    "ember-cli-flash": "1.4.3",
+    "ember-cli-flash": "^1.4.3",
     "ember-cli-htmlbars": "^2.0.1",
-    "ember-cli-htmlbars-inline-precompile": "^0.4.3",
+    "ember-cli-htmlbars-inline-precompile": "^1.0.0",
     "ember-cli-inject-live-reload": "^1.4.1",
+    "ember-cli-moment-shim": "^3.5.0",
     "ember-cli-qunit": "^4.0.0",
+    "ember-cli-sentry": "^3.0.0",
     "ember-cli-shims": "^1.1.0",
     "ember-cli-sri": "^2.1.0",
-    "ember-cli-uglify": "^1.2.0",
+    "ember-cli-uglify": "^2.0.0",
-    "ember-data": "~2.14.3",
+    "ember-composable-helpers": "^2.0.3",
+    "ember-data": "~2.16.2",
     "ember-export-application-global": "^2.0.0",
     "ember-inflector": "^2.0.1",
     "ember-light-table": "^1.10.0",
     "ember-load-initializers": "^1.0.0",
     "ember-moment": "7.3.1",
-    "ember-power-select": "1.8.5",
+    "ember-pikaday": "^2.2.3",
-    "ember-power-select-with-create": "0.4.3",
+    "ember-power-select": "^1.8.5",
+    "ember-power-select-with-create": "^0.4.3",
     "ember-resolver": "^4.0.0",
     "ember-responsive": "^2.0.4",
     "ember-simple-auth": "1.4.0",
     "ember-sinon": "^1.0.0",
-    "ember-source": "~2.14.0",
+    "ember-source": "~2.16.0",
     "loader.js": "^4.2.3"
   },
   "engines": {
     "node": "^4.5 || 6.* || >= 7.*"
   },
-  "private": true
+  "private": true,
+  "dependencies": {
+    "npm": "^5.7.1"
+  }
 }

testem.js

@@ -3,10 +3,20 @@ module.exports = {
   test_page: 'tests/index.html?hidepassed',
   disable_watching: true,
   launch_in_ci: [
-    'PhantomJS'
+    'Chrome'
   ],
   launch_in_dev: [
-    'PhantomJS',
     'Chrome'
-  ]
+  ],
+  browser_args: {
+    Chrome: {
+      mode: 'ci',
+      args: [
+        '--disable-gpu',
+        '--headless',
+        '--remote-debugging-port=9222',
+        '--window-size=1440,900'
+      ]
+    },
+  }
 };

tests/helpers/destroy-app.js

@@ -1,5 +1,5 @@
-import Ember from 'ember';
+import { run } from '@ember/runloop';
 
 export default function destroyApp(application) {
-  Ember.run(application, 'destroy');
+  run(application, 'destroy');
 }

tests/helpers/flash-message.js

@@ -1,6 +1,3 @@
-import Ember from 'ember';
 import FlashObject from 'ember-cli-flash/flash/object';
 
-const { K } = Ember;
+FlashObject.reopen({ init() {} });
-
-FlashObject.reopen({ init: K });

tests/helpers/module-for-acceptance.js

@@ -1,10 +1,8 @@
 import { module } from 'qunit';
-import Ember from 'ember';
+import { resolve } from 'rsvp';
 import startApp from '../helpers/start-app';
 import destroyApp from '../helpers/destroy-app';
 
-const { RSVP: { resolve } } = Ember;
-
 export default function(name, options = {}) {
   module(name, {
     beforeEach() {

tests/helpers/responsive.js

@@ -1,17 +1,16 @@
-import Ember from 'ember';
+import { registerAsyncHelper } from '@ember/test';
+import { A } from '@ember/array';
+import { computed } from '@ember/object';
+import { classify } from '@ember/string';
+import { getOwner } from '@ember/application';
 import MediaService from 'ember-responsive/media';
 
-const {
-  getOwner
-} = Ember;
-const { classify } = Ember.String;
-
 MediaService.reopen({
   // Change this if you want a different default breakpoint in tests.
   _defaultBreakpoint: 'desktop',
 
-  _breakpointArr: Ember.computed('breakpoints', function() {
+  _breakpointArr: computed('breakpoints', function() {
-    return Object.keys(this.get('breakpoints')) || Ember.A([]);
+    return Object.keys(this.get('breakpoints')) || A([]);
   }),
 
   _forceSetBreakpoint(breakpoint) {
@@ -45,7 +44,7 @@ MediaService.reopen({
   }
 });
 
-export default Ember.Test.registerAsyncHelper('setBreakpoint', function(app, breakpoint) {
+export default registerAsyncHelper('setBreakpoint', function(app, breakpoint) {
   // this should use getOwner once that's supported
   const mediaService = app.__deprecatedInstance__.lookup('service:media');
   mediaService._forceSetBreakpoint(breakpoint);

tests/helpers/start-app.js

@@ -1,12 +1,13 @@
-import Ember from 'ember';
 import Application from '../../app';
 import config from '../../config/environment';
+import { merge } from '@ember/polyfills';
+import { run } from '@ember/runloop';
 
 export default function startApp(attrs) {
-  let attributes = Ember.merge({}, config.APP);
+  let attributes = merge({}, config.APP);
-  attributes = Ember.merge(attributes, attrs); // use defaults, but you can override;
+  attributes = merge(attributes, attrs); // use defaults, but you can override;
 
-  return Ember.run(() => {
+  return run(() => {
     let application = Application.create(attributes);
     application.setupForTesting();
     application.injectTestHelpers();

tests/integration/components/ccdb-pagination-test.js

@@ -1,25 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-import hbs from 'htmlbars-inline-precompile';
-
-moduleForComponent('ccdb-pagination', 'Integration | Component | ccdb pagination', {
-  integration: true
-});
-
-test('it renders', function(assert) {
-
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
-
-  this.render(hbs`{{ccdb-pagination}}`);
-
-  assert.equal(this.$().text().trim(), '');
-
-  // Template block usage:
-  this.render(hbs`
-    {{#ccdb-pagination}}
-      template block text
-    {{/ccdb-pagination}}
-  `);
-
-  assert.equal(this.$().text().trim(), 'template block text');
-});

tests/integration/components/filter-collections-test.js

@@ -1,25 +0,0 @@
-import { moduleForComponent, test } from 'ember-qunit';
-import hbs from 'htmlbars-inline-precompile';
-
-moduleForComponent('filter-collections', 'Integration | Component | filter collections', {
-  integration: true
-});
-
-test('it renders', function(assert) {
-
-  // Set any properties with this.set('myProperty', 'value');
-  // Handle any actions with this.on('myAction', function(val) { ... });
-
-  this.render(hbs`{{filter-collections}}`);
-
-  assert.equal(this.$().text().trim(), '');
-
-  // Template block usage:
-  this.render(hbs`
-    {{#filter-collections}}
-      template block text
-    {{/filter-collections}}
-  `);
-
-  assert.equal(this.$().text().trim(), 'template block text');
-});

tests/unit/authenticators/application-test.js

@@ -1,6 +1,6 @@
+import $ from 'jquery';
 import { moduleFor, test } from 'ember-qunit';
 import sinon from 'sinon';
-import Ember from 'ember';
 
 moduleFor('authenticator:application', 'Unit | application', {
   unit: true,
@@ -35,28 +35,28 @@ test('`invalidate` should invalidate the session', function(assert) {
 
 test('`makeRequest` should make a request', function(assert) {
   assert.expect(2);
-  const stub = sinon.stub(Ember.$, 'ajax');
+  const stub = sinon.stub($, 'ajax');
   stub.resolves(42);
   const authenticator = this.subject();
   authenticator.set('serverTokenEndpoint', 'foo')
   const promise = authenticator.makeRequest({bar: 'baz'}).then((d) => {
     assert.equal(d, 42);
   });
-  assert.ok(Ember.$.ajax.calledWithMatch({url: 'foo', data: {bar: 'baz'}}));
+  assert.ok($.ajax.calledWithMatch({url: 'foo', data: {bar: 'baz'}}));
-  Ember.$.ajax.restore();
+  $.ajax.restore();
   return promise;
 });
 
 test('authenticate should craft a nice payload', function(assert) {
   assert.expect(2);
-  const stub = sinon.stub(Ember.$, 'ajax');
+  const stub = sinon.stub($, 'ajax');
   stub.resolves(42);
   const authenticator = this.subject();
   authenticator.set('serverTokenEndpoint', 'foo')
   const promise = authenticator.authenticate('myusername', 'mypassword').then((d) => {
     assert.equal(d, 42);
   });
-  assert.ok(Ember.$.ajax.calledWithMatch({url: 'foo', data: {username: 'myusername', password: 'mypassword'}}));
+  assert.ok($.ajax.calledWithMatch({url: 'foo', data: {username: 'myusername', password: 'mypassword'}}));
-  Ember.$.ajax.restore();
+  $.ajax.restore();
   return promise;
 });

tests/unit/models/adfgpermit-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('adfg-permit', 'Unit | Model | adfg permit', {
+  // 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/region-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('region', 'Unit | Model | region', {
+  // 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/site-test.js

@@ -0,0 +1,12 @@
+import { moduleForModel, test } from 'ember-qunit';
+
+moduleForModel('site', 'Unit | Model | site', {
+  // 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

@@ -1,10 +0,0 @@
-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);
-});