ENH: Collection Edit (parity with reading) (#48)

app/components/action-button.js

@@ -6,6 +6,7 @@ export default Component.extend({
   tagName: 'a',
   classNames: ['btn'],
   classNameBindings: [
+    // Styles
     'isDefault:btn-default',
     'isPrimary:btn-primary',
     'isSuccess:btn-success',
@@ -13,9 +14,14 @@ export default Component.extend({
     '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,
@@ -23,6 +29,10 @@ export default Component.extend({
   isWarning: false,
   isDanger: false,
   isLink: false,
+  // Sizes
+  isLarge: false,
+  isSmall: false,
+  isXSmall: false,
 
   label: 'LABEL',
 

app/components/collection/create-container.js

@@ -2,13 +2,57 @@ import Ember from 'ember';
 import Changeset from 'ember-changeset';
 import lookupValidator from 'ember-changeset-validations';
 
-const { Component } = Ember;
+const { Component, inject: { service } } = Ember;
 
 export default Component.extend({
+  store: service(),
+
   init() {
     this._super(...arguments);
     const model = this.get('model');
     const validations = this.get('validations');
-    this.set('changeset', new Changeset(model, lookupValidator(validations), validations));
+
+    let changesets = {};
+    changesets['new'] = [];
+    changesets['delete'] = [];
+    changesets['hasMany'] = [];
+    changesets['model'] = new Changeset(model,
+                                        lookupValidator(validations['collection']),
+                                        validations['collection']);
+
+    // TODO: gross, just grab these data in the route.
+    model.get('collectionSpecies').then((collectionSpecies) => {
+      let collectionSpeciesChangesets = [];
+      collectionSpecies.forEach((cs) => {
+        const changeset = new Changeset(cs,
+                                        lookupValidator(validations['collectionSpecies']),
+                                        validations['collectionSpecies']);
+        collectionSpeciesChangesets.push({ model: cs, changeset: changeset });
+      });
+      changesets['hasMany']['collectionSpecies'] = collectionSpeciesChangesets;
+      this.set('changesets', changesets);
+    });
+  },
+
+  actions: {
+    addCollectionSpecies() {
+      const store = this.get('store');
+      let changesets = this.get('changesets');
+      const validations = this.get('validations');
+      const collection = this.get('model');
+      const cs = store.createRecord('collection-species', { collection: collection });
+      collection.get('collectionSpecies').pushObject(cs);
+      changesets['new'].pushObject(cs);
+      const changeset = new Changeset(cs,
+                                      lookupValidator(validations['collectionSpecies']),
+                                      validations['collectionSpecies']);
+      changesets['hasMany']['collectionSpecies'].pushObject({ model: cs, changeset: changeset });
+    },
+
+    deleteCollectionSpecies(changesetRecord) {
+      let changesets = this.get('changesets');
+      changesets['delete'].pushObject(changesetRecord.model);
+      changesets['hasMany']['collectionSpecies'].removeObject(changesetRecord);
+    },
   },
 });

app/components/collection/detail-container.js

@@ -9,6 +9,7 @@ export default Component.extend({
   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', },

app/components/crud-form.js

@@ -4,5 +4,5 @@ const { Component } = Ember;
 
 export default Component.extend({
   // ARGS
-  changeset: null,
+  changesets: null,
 });

app/components/validated-field.js

@@ -11,4 +11,8 @@ export default Component.extend({
     const property = this.get('property');
     return isEmpty(get(changeset, `error.${property}`));
   }),
+
+  hasLabel: computed('label', function() {
+    return !isEmpty(get(this, 'label'));
+  }),
 });