From e1abc5e4cb3fd067084ff7509c319fcbd136701d Mon Sep 17 00:00:00 2001 From: Matthew Dillon Date: Sun, 1 Oct 2017 16:49:43 -0700 Subject: [PATCH] ENH: Create collections (#38) Fixes #35 --- app/components/action-button.js | 32 ++++++ app/components/ccdb-table.js | 2 +- app/components/collection-create-container.js | 12 ++ app/components/crud-form.js | 8 ++ app/components/form-content.js | 7 ++ app/controllers/collections/create.js | 16 +++ app/controllers/collections/index.js | 3 + app/models/collection.js | 6 +- app/router.js | 1 + app/routes/collections/create.js | 21 ++++ app/serializers/application.js | 10 ++ app/templates/collections/create.hbs | 10 ++ app/templates/collections/index.hbs | 1 + app/templates/components/action-button.hbs | 1 + .../collection-create-container.hbs | 107 ++++++++++++++++++ .../components/collections-container.hbs | 6 + app/templates/components/crud-form.hbs | 15 +++ app/templates/components/form-content.hbs | 1 + config/environment.js | 3 +- package.json | 4 +- 20 files changed, 260 insertions(+), 6 deletions(-) create mode 100644 app/components/action-button.js create mode 100644 app/components/collection-create-container.js create mode 100644 app/components/crud-form.js create mode 100644 app/components/form-content.js create mode 100644 app/controllers/collections/create.js create mode 100644 app/routes/collections/create.js create mode 100644 app/serializers/application.js create mode 100644 app/templates/collections/create.hbs create mode 100644 app/templates/components/action-button.hbs create mode 100644 app/templates/components/collection-create-container.hbs create mode 100644 app/templates/components/crud-form.hbs create mode 100644 app/templates/components/form-content.hbs diff --git a/app/components/action-button.js b/app/components/action-button.js new file mode 100644 index 0000000..0edd7ee --- /dev/null +++ b/app/components/action-button.js @@ -0,0 +1,32 @@ +import Ember from 'ember'; + +const { Component } = Ember; + +export default Component.extend({ + tagName: 'a', + classNames: ['btn'], + classNameBindings: [ + 'isDefault:btn-default', + 'isPrimary:btn-primary', + 'isSuccess:btn-success', + 'isInfo:btn-info', + 'isWarning:btn-warning', + 'isDanger:btn-danger', + 'isLink:btn-link', + ], + + // ARGS + isDefault: false, + isPrimary: false, + isSuccess: false, + isInfo: false, + isWarning: false, + isDanger: false, + isLink: false, + + label: 'LABEL', + + click() { + this.get('onClick')(); + } +}); diff --git a/app/components/ccdb-table.js b/app/components/ccdb-table.js index fc40b1d..48cd539 100644 --- a/app/components/ccdb-table.js +++ b/app/components/ccdb-table.js @@ -9,7 +9,7 @@ export default Component.extend({ columns: null, table: null, - init() { + didReceiveAttrs() { this._super(...arguments); const table = new Table(this.get('columns'), this.get('model')); this.set('table', table); diff --git a/app/components/collection-create-container.js b/app/components/collection-create-container.js new file mode 100644 index 0000000..f96ba07 --- /dev/null +++ b/app/components/collection-create-container.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import Changeset from 'ember-changeset'; + +const { Component } = Ember; + +export default Component.extend({ + init() { + this._super(...arguments); + const model = this.get('model'); + this.set('changeset', new Changeset(model)); + }, +}); diff --git a/app/components/crud-form.js b/app/components/crud-form.js new file mode 100644 index 0000000..7795d8a --- /dev/null +++ b/app/components/crud-form.js @@ -0,0 +1,8 @@ +import Ember from 'ember'; + +const { Component } = Ember; + +export default Component.extend({ + // ARGS + changeset: null, +}); diff --git a/app/components/form-content.js b/app/components/form-content.js new file mode 100644 index 0000000..5450065 --- /dev/null +++ b/app/components/form-content.js @@ -0,0 +1,7 @@ +import Ember from 'ember'; + +const { Component } = Ember; + +export default Component.extend({ + tagName: 'form', +}); diff --git a/app/controllers/collections/create.js b/app/controllers/collections/create.js new file mode 100644 index 0000000..fcee964 --- /dev/null +++ b/app/controllers/collections/create.js @@ -0,0 +1,16 @@ +import Ember from 'ember'; + +const { Controller } = Ember; + +export default Controller.extend({ + actions: { + onSave(changeset) { + changeset.save(); + this.transitionToRoute('collections.index'); + }, + onCancel(changeset) { + changeset.rollback(); + this.transitionToRoute('collections.index'); + }, + }, +}); diff --git a/app/controllers/collections/index.js b/app/controllers/collections/index.js index b6143e1..7a022f4 100644 --- a/app/controllers/collections/index.js +++ b/app/controllers/collections/index.js @@ -13,5 +13,8 @@ export default Controller.extend({ rowClick(row) { this.transitionToRoute('collections.detail', row.get('id')); }, + createCollection() { + this.transitionToRoute('collections.create'); + }, }, }); diff --git a/app/models/collection.js b/app/models/collection.js index c2fc7c9..b869c9e 100644 --- a/app/models/collection.js +++ b/app/models/collection.js @@ -4,7 +4,7 @@ import DS from 'ember-data'; const { computed } = Ember; const { Model, attr, belongsTo } = DS; -export default Model.extend({ +export const schema = { displayName: attr('string'), numberOfTraps: attr('number'), collectionStartDate: attr('string-null-to-empty'), @@ -16,7 +16,9 @@ export default Model.extend({ studyLocation: belongsTo('study-location'), collectionMethod: belongsTo('collection-method'), collectionType: belongsTo('collection-type'), +}; +export default Model.extend(Object.assign({}, schema, { startDateTime: computed('collectionStartDate', 'collectionStartTime', function() { return this._mergeDateTime('Start'); }), @@ -28,4 +30,4 @@ export default Model.extend({ const time = this.get(`collection${timepoint}Time`); return `${date} ${time}`.trim(); }, -}); +})); diff --git a/app/router.js b/app/router.js index 32c57ae..5448df0 100644 --- a/app/router.js +++ b/app/router.js @@ -10,6 +10,7 @@ Router.map(function() { this.route('login'); this.route('logout'); this.route('collections', function() { + this.route('create'); this.route('detail', { path: '/:collection_id' }); }); }); diff --git a/app/routes/collections/create.js b/app/routes/collections/create.js new file mode 100644 index 0000000..942a788 --- /dev/null +++ b/app/routes/collections/create.js @@ -0,0 +1,21 @@ +import Ember from 'ember'; + +const { Route, RSVP } = Ember; + +export default Route.extend({ + model() { + const store = this.get('store'); + return RSVP.hash({ + model: store.createRecord('collection'), + projectOptions: store.findAll('project'), + studyLocationOptions: store.findAll('study-location'), + collectionTypeOptions: store.findAll('collection-type'), + collectionMethodOptions: store.findAll('collection-method'), + }); + }, + + setupController(controller, models) { + this._super(...arguments); + controller.setProperties(models); + }, +}); diff --git a/app/serializers/application.js b/app/serializers/application.js new file mode 100644 index 0000000..9a1dc6f --- /dev/null +++ b/app/serializers/application.js @@ -0,0 +1,10 @@ +import Ember from 'ember'; +import DS from 'ember-data'; + +const { JSONAPISerializer } = DS; + +export default JSONAPISerializer.extend({ + payloadTypeFromModelName(modelName) { + return modelName.split('-').map(key => Ember.String.capitalize(key)).join(''); + } +}); diff --git a/app/templates/collections/create.hbs b/app/templates/collections/create.hbs new file mode 100644 index 0000000..eb3c2d4 --- /dev/null +++ b/app/templates/collections/create.hbs @@ -0,0 +1,10 @@ +{{ + collection-create-container + model=model + projectOptions=projectOptions + studyLocationOptions=studyLocationOptions + collectionTypeOptions=collectionTypeOptions + collectionMethodOptions=collectionMethodOptions + onSave=(action 'onSave') + onCancel=(action 'onCancel') +}} diff --git a/app/templates/collections/index.hbs b/app/templates/collections/index.hbs index 53b5edb..91783b3 100644 --- a/app/templates/collections/index.hbs +++ b/app/templates/collections/index.hbs @@ -3,4 +3,5 @@ model=model changePage=(action 'changePage') onRowClick=(action 'rowClick') + createCollection=(action 'createCollection') }} diff --git a/app/templates/components/action-button.hbs b/app/templates/components/action-button.hbs new file mode 100644 index 0000000..21f81c8 --- /dev/null +++ b/app/templates/components/action-button.hbs @@ -0,0 +1 @@ +{{label}} diff --git a/app/templates/components/collection-create-container.hbs b/app/templates/components/collection-create-container.hbs new file mode 100644 index 0000000..ef3882e --- /dev/null +++ b/app/templates/components/collection-create-container.hbs @@ -0,0 +1,107 @@ +{{#crud-form + changeset=changeset + onSave=(action onSave) + 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}} +
+
+ +
+ +
+ {{#power-select + options=studyLocationOptions + selected=changeset.studyLocation + onchange=(action (mut changeset.studyLocation)) + searchField='name' + as |studyLocation| + }} + {{studyLocation.name}} + {{/power-select}} +
+
+ +
+ +
+ {{#power-select + options=collectionTypeOptions + selected=changeset.collectionType + onchange=(action (mut changeset.collectionType)) + searchField='name' + as |collectionType| + }} + {{collectionType.name}} + {{/power-select}} +
+
+ +
+ +
+ {{#power-select + options=collectionMethodOptions + selected=changeset.collectionMethod + onchange=(action (mut changeset.collectionMethod)) + searchField='name' + as |collectionMethod| + }} + {{collectionMethod.name}} + {{/power-select}} +
+
+ +
+ +
+ {{input value=changeset.numberOfTraps type='number' class='form-control'}} +
+
+ +
+ +
+ {{input value=changeset.collectionStartDate type='date' class='form-control'}} +
+
+ +
+ +
+ {{input value=changeset.collectionStartTime type='time' class='form-control'}} +
+
+ +
+ +
+ {{input value=changeset.collectionEndDate type='date' class='form-control'}} +
+
+ +
+ +
+ {{input value=changeset.collectionEndTime type='time' class='form-control'}} +
+
+ + {{/f.content}} + + {{f.save}} {{f.cancel}} +
+{{/crud-form}} diff --git a/app/templates/components/collections-container.hbs b/app/templates/components/collections-container.hbs index 17bcdfb..872a0c8 100644 --- a/app/templates/components/collections-container.hbs +++ b/app/templates/components/collections-container.hbs @@ -1,3 +1,9 @@ +{{ + action-button + isPrimary=true + label='New Collection' + onClick=(action createCollection) +}} {{ ccdb-table model=model diff --git a/app/templates/components/crud-form.hbs b/app/templates/components/crud-form.hbs new file mode 100644 index 0000000..b3983fe --- /dev/null +++ b/app/templates/components/crud-form.hbs @@ -0,0 +1,15 @@ +{{#if hasBlock}} + {{yield (hash + content=(component 'form-content' changeset=changeset) + cancel=(component 'action-button' + label='Cancel' + isDanger=true + onClick=(action onCancel changeset)) + save=(component 'action-button' + label='Save' + isSuccess=true + onClick=(action onSave changeset)) + )}} +{{else}} + MISSING CONTENT BLOCK +{{/if}} diff --git a/app/templates/components/form-content.hbs b/app/templates/components/form-content.hbs new file mode 100644 index 0000000..889d9ee --- /dev/null +++ b/app/templates/components/form-content.hbs @@ -0,0 +1 @@ +{{yield}} diff --git a/config/environment.js b/config/environment.js index f49ceb9..6132d43 100644 --- a/config/environment.js +++ b/config/environment.js @@ -9,8 +9,7 @@ module.exports = function(environment) { locationType: 'auto', EmberENV: { FEATURES: { - // Here you can enable experimental features on an ember canary build - // e.g. 'with-controller': true + 'ds-payload-type-hooks': true, }, EXTEND_PROTOTYPES: { // Prevent Ember Data from overriding Date.parse. diff --git a/package.json b/package.json index 0553304..b0dcd2d 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,8 @@ "devDependencies": { "broccoli-asset-rev": "^2.4.5", "ember-ajax": "^3.0.0", + "ember-changeset": "^1.3.0", + "ember-changeset-validations": "^1.2.8", "ember-cli": "~2.14.0", "ember-cli-app-version": "^3.0.0", "ember-cli-babel": "^6.3.0", @@ -38,7 +40,7 @@ "ember-light-table": "^1.10.0", "ember-load-initializers": "^1.0.0", "ember-moment": "7.3.1", - "ember-power-select": "1.8.5", + "ember-power-select": "^1.8.5", "ember-power-select-with-create": "0.4.3", "ember-resolver": "^4.0.0", "ember-responsive": "^2.0.4",