ENH: Collection attachments (#51)

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/components/collection/create-container.js

@@ -20,18 +20,27 @@ export default Component.extend({
                                         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);
+    let collectionSpeciesChangesets = [];
+    const collectionSpecies = model.get('collectionSpecies');
+    collectionSpecies.forEach((cs) => {
+      const changeset = new Changeset(cs,
+                                      lookupValidator(validations['collectionSpecies']),
+                                      validations['collectionSpecies']);
+      collectionSpeciesChangesets.push({ model: cs, changeset: changeset });
     });
+    changesets['hasMany']['collectionSpecies'] = collectionSpeciesChangesets;
+
+    let datasheetsChangesets = [];
+    const datasheets = model.get('datasheets');
+    datasheets.forEach((d) => {
+      const changeset = new Changeset(d,
+                                      lookupValidator(validations['datasheet']),
+                                      validations['datasheet']);
+      datasheetsChangesets.push({ model: d, changeset: changeset });
+    });
+    changesets['hasMany']['datasheets'] = datasheetsChangesets;
+
+    this.set('changesets', changesets);
   },
 
   actions: {
@@ -54,5 +63,29 @@ export default Component.extend({
       changesets['delete'].pushObject(changesetRecord.model);
       changesets['hasMany']['collectionSpecies'].removeObject(changesetRecord);
     },
+
+    updateDatasheet(changeset, event) {
+      changeset.set('datasheet', event.target.files[0]);
+    },
+
+    addDatasheet() {
+      const store = this.get('store');
+      let changesets = this.get('changesets');
+      const validations = this.get('validations');
+      const collection = this.get('model');
+      const d = store.createRecord('datasheet-attachment', { collection: collection });
+      collection.get('datasheets').pushObject(d);
+      changesets['new'].pushObject(d);
+      const changeset = new Changeset(d,
+                                      lookupValidator(validations['datasheets']),
+                                      validations['datasheets']);
+      changesets['hasMany']['datasheets'].pushObject({ model: d, changeset: changeset });
+    },
+
+    deleteDatasheet(changesetRecord) {
+      let changesets = this.get('changesets');
+      changesets['delete'].pushObject(changesetRecord.model);
+      changesets['hasMany']['datasheets'].removeObject(changesetRecord);
+    },
   },
 });

app/controllers/collections/create.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 import CollectionValidations from 'ccdb-web/validations/collection';
 import CollectionSpeciesValidations from 'ccdb-web/validations/collection-species';
+import DatasheetValidations from 'ccdb-web/validations/datasheet';
 import ValidationMixin from 'ccdb-web/mixins/validation';
 
 const { Controller, computed } = Ember;
@@ -8,6 +9,7 @@ const { Controller, computed } = Ember;
 export default Controller.extend(ValidationMixin, {
   CollectionValidations,
   CollectionSpeciesValidations,
+  DatasheetValidations,
 
   options: computed('projectOptions', 'studyLocationOptions',
                     'collectionTypeOptions', 'collectionMethodOptions',

app/controllers/collections/detail/edit.js

@@ -1,6 +1,7 @@
 import Ember from 'ember';
 import CollectionValidations from 'ccdb-web/validations/collection';
 import CollectionSpeciesValidations from 'ccdb-web/validations/collection-species';
+import DatasheetValidations from 'ccdb-web/validations/datasheet';
 import ValidationMixin from 'ccdb-web/mixins/validation';
 
 const { Controller, computed } = Ember;
@@ -8,6 +9,7 @@ const { Controller, computed } = Ember;
 export default Controller.extend(ValidationMixin, {
   CollectionValidations,
   CollectionSpeciesValidations,
+  DatasheetValidations,
 
   options: computed('projectOptions', 'studyLocationOptions',
                     'collectionTypeOptions', 'collectionMethodOptions',

app/mixins/file-upload.js

@@ -0,0 +1,63 @@
+import Ember from 'ember';
+
+const { Mixin, isArray } = Ember;
+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/models/collection.js

@@ -19,6 +19,7 @@ export default Model.extend({
   adfgPermit:        belongsTo('adfg-permit'),
 
   collectionSpecies: hasMany('collection-species'),
+  datasheets:        hasMany('datasheet-attachment'),
 
   // computed
   species: computed.mapBy('collectionSpecies', 'species'),

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/routes/collections/detail.js

@@ -5,7 +5,9 @@ const { Route, RSVP } = Ember;
 export default Route.extend({
   model(params) {
     return RSVP.all([
-      this.get('store').findRecord('collection', params.collection_id)
+      this.get('store').findRecord('collection', params.collection_id, {
+        include: 'collection-species,datasheets',
+      })
     ]);
   },
 });

app/templates/collections/create.hbs

@@ -3,7 +3,8 @@
   model=model
   validations=(hash
     collection=CollectionValidations
-    collectionSpecies=CollectionSpeciesValidations)
+    collectionSpecies=CollectionSpeciesValidations
+    datasheet=DatasheetValidations)
   options=options
   onSave=(action 'onSave')
   onCancel=(action 'onCancel')

app/templates/collections/detail/edit.hbs

@@ -3,7 +3,8 @@
   model=model
   validations=(hash
     collection=CollectionValidations
-    collectionSpecies=CollectionSpeciesValidations)
+    collectionSpecies=CollectionSpeciesValidations
+    datasheet=DatasheetValidations)
   options=options
   onSave=(action 'onSave')
   onCancel=(action 'onCancel')

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

@@ -137,14 +137,51 @@
                   {{input value=cs.changeset.sex}}
                 {{/validated-field}}
               </td>
-              <th class="col-md-2">
+              <td class="col-md-2">
                 {{action-button isDanger=true isXSmall=true label='X' onClick=(action 'deleteCollectionSpecies' cs)}}
-              </th>
+              </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 'addDatasheet')}}
+        </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 'deleteDatasheet' d)}}
+              </td>
+            </tr>
+          {{/each}}
+        </tbody>
+      </table>
+      </form>
+
+    </div>
+  </div>
   {{f.save}} {{f.cancel}}
 {{/crud-form}}

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/validations/datasheet.js

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

tests/unit/transforms/file-test.js

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