From f41f4caccd7a906b32641769c813e022b323636c Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Sat, 7 Oct 2017 17:37:24 -0700 Subject: [PATCH] ENH: Collections (update) (#40) Fixes #36 --- app/adapters/application.js | 7 ++ app/components/collection-create-container.js | 4 +- app/components/validated-field.js | 14 +++ app/controllers/collections/create.js | 15 ++- app/controllers/collections/detail/edit.js | 27 +++++ app/controllers/collections/detail/index.js | 11 ++ app/mixins/validation.js | 30 +++++ app/router.js | 4 +- app/routes/collections/detail/edit.js | 24 ++++ app/templates/collections/create.hbs | 1 + app/templates/collections/detail.hbs | 1 - app/templates/collections/detail/edit.hbs | 11 ++ app/templates/collections/detail/index.hbs | 5 + .../collection-create-container.hbs | 111 +++++++----------- .../collection-detail-container.hbs | 7 ++ app/templates/components/validated-field.hbs | 10 ++ app/validations/collection.js | 16 +++ 17 files changed, 221 insertions(+), 77 deletions(-) create mode 100644 app/components/validated-field.js create mode 100644 app/controllers/collections/detail/edit.js create mode 100644 app/controllers/collections/detail/index.js create mode 100644 app/mixins/validation.js create mode 100644 app/routes/collections/detail/edit.js delete mode 100644 app/templates/collections/detail.hbs create mode 100644 app/templates/collections/detail/edit.hbs create mode 100644 app/templates/collections/detail/index.hbs create mode 100644 app/templates/components/validated-field.hbs create mode 100644 app/validations/collection.js diff --git a/app/adapters/application.js b/app/adapters/application.js index 65c8c47..a9c6c0c 100644 --- a/app/adapters/application.js +++ b/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); + } }); diff --git a/app/components/collection-create-container.js b/app/components/collection-create-container.js index f96ba07..e5ad339 100644 --- a/app/components/collection-create-container.js +++ b/app/components/collection-create-container.js @@ -1,5 +1,6 @@ import Ember from 'ember'; import Changeset from 'ember-changeset'; +import lookupValidator from 'ember-changeset-validations'; const { Component } = Ember; @@ -7,6 +8,7 @@ export default Component.extend({ init() { this._super(...arguments); const model = this.get('model'); - this.set('changeset', new Changeset(model)); + const validations = this.get('validations'); + this.set('changeset', new Changeset(model, lookupValidator(validations), validations)); }, }); diff --git a/app/components/validated-field.js b/app/components/validated-field.js new file mode 100644 index 0000000..1b877db --- /dev/null +++ b/app/components/validated-field.js @@ -0,0 +1,14 @@ +import Ember from 'ember'; + +const { Component, computed, get, isEmpty } = Ember; + +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}`)); + }), +}); diff --git a/app/controllers/collections/create.js b/app/controllers/collections/create.js index fcee964..f95fad7 100644 --- a/app/controllers/collections/create.js +++ b/app/controllers/collections/create.js @@ -1,16 +1,21 @@ import Ember from 'ember'; +import CollectionValidations from '../../validations/collection'; +import { schema } from '../../models/collection'; +import ValidationMixin from '../../mixins/validation'; const { Controller } = Ember; -export default Controller.extend({ +export default Controller.extend(ValidationMixin, { + CollectionValidations, + actions: { onSave(changeset) { - changeset.save(); - this.transitionToRoute('collections.index'); + const postSave = () => { this.transitionToRoute('collections.index'); }; + return this.validationSave(changeset, schema, postSave); }, onCancel(changeset) { - changeset.rollback(); - this.transitionToRoute('collections.index'); + const postCancel = () => { this.transitionToRoute('collections.index'); }; + return this.validationCancel(changeset, postCancel); }, }, }); diff --git a/app/controllers/collections/detail/edit.js b/app/controllers/collections/detail/edit.js new file mode 100644 index 0000000..d830e10 --- /dev/null +++ b/app/controllers/collections/detail/edit.js @@ -0,0 +1,27 @@ +import Ember from 'ember'; +import CollectionValidations from '../../../validations/collection'; +import { schema } from '../../../models/collection'; +import ValidationMixin from '../../../mixins/validation'; + +const { Controller } = Ember; + +export default Controller.extend(ValidationMixin, { + CollectionValidations, + + actions: { + onSave(changeset) { + 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.validationSave(changeset, schema, postSave); + }, + onCancel(changeset) { + 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.validationCancel(changeset, postCancel); + }, + }, +}); diff --git a/app/controllers/collections/detail/index.js b/app/controllers/collections/detail/index.js new file mode 100644 index 0000000..6603a27 --- /dev/null +++ b/app/controllers/collections/detail/index.js @@ -0,0 +1,11 @@ +import Ember from 'ember'; + +const { Controller } = Ember; + +export default Controller.extend({ + actions: { + editCollection() { + this.transitionToRoute('collections.detail.edit', this.get('model')); + }, + }, +}); diff --git a/app/mixins/validation.js b/app/mixins/validation.js new file mode 100644 index 0000000..1c965a1 --- /dev/null +++ b/app/mixins/validation.js @@ -0,0 +1,30 @@ +import Ember from 'ember'; + +const { Mixin, get } = Ember; +const { keys } = Object; + +export default Mixin.create({ + validationSave(changeset, schema, postSave) { + return changeset + .cast(keys(schema)) + .validate() + .then(() => { + if (changeset.get('isValid')) { + return changeset.save().then(postSave); + } + }) + .catch((error) => { + /* eslint-disable no-console */ + console.log(error); + /* eslint-enable no-console */ + get(this, 'model.errors').forEach(({ attribute, message }) => { + changeset.pushErrors(attribute, message); + }); + }); + }, + + validationCancel(changeset, postCancel) { + changeset.rollback(); + return postCancel(); + }, +}); diff --git a/app/router.js b/app/router.js index 5448df0..b0b2914 100644 --- a/app/router.js +++ b/app/router.js @@ -11,7 +11,9 @@ Router.map(function() { this.route('logout'); this.route('collections', function() { this.route('create'); - this.route('detail', { path: '/:collection_id' }); + this.route('detail', { path: '/:collection_id' }, function() { + this.route('edit'); + }); }); }); diff --git a/app/routes/collections/detail/edit.js b/app/routes/collections/detail/edit.js new file mode 100644 index 0000000..16a7bdc --- /dev/null +++ b/app/routes/collections/detail/edit.js @@ -0,0 +1,24 @@ +import Ember from 'ember'; + +const { Route, RSVP } = Ember; + +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.findAll('study-location'), + collectionTypeOptions: store.findAll('collection-type'), + collectionMethodOptions: store.findAll('collection-method'), + }); + }, + + setupController(controller, models) { + this._super(...arguments); + // Unwrap the parent route's listified model + models.model = models.model[0]; + controller.setProperties(models); + }, +}); diff --git a/app/templates/collections/create.hbs b/app/templates/collections/create.hbs index eb3c2d4..64fc896 100644 --- a/app/templates/collections/create.hbs +++ b/app/templates/collections/create.hbs @@ -1,6 +1,7 @@ {{ collection-create-container model=model + validations=CollectionValidations projectOptions=projectOptions studyLocationOptions=studyLocationOptions collectionTypeOptions=collectionTypeOptions diff --git a/app/templates/collections/detail.hbs b/app/templates/collections/detail.hbs deleted file mode 100644 index 9f5f596..0000000 --- a/app/templates/collections/detail.hbs +++ /dev/null @@ -1 +0,0 @@ -{{collection-detail-container model=model}} diff --git a/app/templates/collections/detail/edit.hbs b/app/templates/collections/detail/edit.hbs new file mode 100644 index 0000000..64fc896 --- /dev/null +++ b/app/templates/collections/detail/edit.hbs @@ -0,0 +1,11 @@ +{{ + collection-create-container + model=model + validations=CollectionValidations + projectOptions=projectOptions + studyLocationOptions=studyLocationOptions + collectionTypeOptions=collectionTypeOptions + collectionMethodOptions=collectionMethodOptions + onSave=(action 'onSave') + onCancel=(action 'onCancel') +}} diff --git a/app/templates/collections/detail/index.hbs b/app/templates/collections/detail/index.hbs new file mode 100644 index 0000000..78d67aa --- /dev/null +++ b/app/templates/collections/detail/index.hbs @@ -0,0 +1,5 @@ +{{ + collection-detail-container + model=model + editCollection=(action 'editCollection') +}} diff --git a/app/templates/components/collection-create-container.hbs b/app/templates/components/collection-create-container.hbs index ef3882e..0aeecb8 100644 --- a/app/templates/components/collection-create-container.hbs +++ b/app/templates/components/collection-create-container.hbs @@ -4,25 +4,20 @@ onCancel=(action onCancel) as |f| }}
- {{#f.content class='form-horizontal'}} -
- -
- {{#power-select - options=projectOptions - selected=changeset.project - onchange=(action (mut changeset.project)) - searchField='name' - as |project| - }} - {{project.name}} - {{/power-select}} -
-
+ {{#f.content class='form'}} + {{#validated-field property='project' label='Project' changeset=changeset}} + {{#power-select + options=projectOptions + selected=changeset.project + onchange=(action (mut changeset.project)) + searchField='name' + as |project| + }} + {{project.name}} + {{/power-select}} + {{/validated-field}} -
- -
+ {{#validated-field property='studyLocation' label='Study location' changeset=changeset}} {{#power-select options=studyLocationOptions selected=changeset.studyLocation @@ -32,12 +27,9 @@ }} {{studyLocation.name}} {{/power-select}} -
-
+ {{/validated-field}} -
- -
+ {{#validated-field property='collectionType' label='Collection type' changeset=changeset}} {{#power-select options=collectionTypeOptions selected=changeset.collectionType @@ -47,58 +39,39 @@ }} {{collectionType.name}} {{/power-select}} -
-
+ {{/validated-field}} -
- -
- {{#power-select - options=collectionMethodOptions - selected=changeset.collectionMethod - onchange=(action (mut changeset.collectionMethod)) - searchField='name' - as |collectionMethod| - }} - {{collectionMethod.name}} - {{/power-select}} -
-
+ {{#validated-field property='collectionMethod' label='Collection method' changeset=changeset}} + {{#power-select + options=collectionMethodOptions + selected=changeset.collectionMethod + onchange=(action (mut changeset.collectionMethod)) + searchField='name' + as |collectionMethod| + }} + {{collectionMethod.name}} + {{/power-select}} + {{/validated-field}} -
- -
- {{input value=changeset.numberOfTraps type='number' class='form-control'}} -
-
+ {{#validated-field property='numberOfTraps' label='Number of traps' changeset=changeset}} + {{input value=changeset.numberOfTraps type='number' class='form-control'}} + {{/validated-field}} -
- -
- {{input value=changeset.collectionStartDate type='date' class='form-control'}} -
-
+ {{#validated-field property='collectionStartDate' label='Collection start date' changeset=changeset}} + {{input value=changeset.collectionStartDate type='date' class='form-control'}} + {{/validated-field}} -
- -
- {{input value=changeset.collectionStartTime type='time' class='form-control'}} -
-
+ {{#validated-field property='collectionStartTime' label='Collection start time' changeset=changeset}} + {{input value=changeset.collectionStartTime type='time' class='form-control'}} + {{/validated-field}} -
- -
- {{input value=changeset.collectionEndDate type='date' class='form-control'}} -
-
+ {{#validated-field property='collectionEndDate' label='Collection end date' changeset=changeset}} + {{input value=changeset.collectionEndDate type='date' class='form-control'}} + {{/validated-field}} -
- -
- {{input value=changeset.collectionEndTime type='time' class='form-control'}} -
-
+ {{#validated-field property='collectionEndTime' label='Collection end time' changeset=changeset}} + {{input value=changeset.collectionEndTime type='time' class='form-control'}} + {{/validated-field}} {{/f.content}} diff --git a/app/templates/components/collection-detail-container.hbs b/app/templates/components/collection-detail-container.hbs index bcc031b..7161918 100644 --- a/app/templates/components/collection-detail-container.hbs +++ b/app/templates/components/collection-detail-container.hbs @@ -1,3 +1,10 @@ +{{ + action-button + isPrimary=true + label='Edit Collection' + onClick=(action editCollection) +}} + {{#ccdb-table model=model columns=columns as |c|}} {{#c.grid as |g|}} {{g.head}} diff --git a/app/templates/components/validated-field.hbs b/app/templates/components/validated-field.hbs new file mode 100644 index 0000000..e9eb98a --- /dev/null +++ b/app/templates/components/validated-field.hbs @@ -0,0 +1,10 @@ + +{{yield}} + +{{#if (get changeset.error property)}} + +{{/if}} diff --git a/app/validations/collection.js b/app/validations/collection.js new file mode 100644 index 0000000..f25de29 --- /dev/null +++ b/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 +}