From df6d7c1aaeb8b3ab2996a8c0b2e639f6b21a10f1 Mon Sep 17 00:00:00 2001 From: Josh Smith Date: Wed, 14 Dec 2016 19:16:44 -0800 Subject: [PATCH] Add birthdate select --- app/components/payments/funds-recipient.js | 11 ++--- app/components/select/birth-date.js | 38 ++++++++++++++++ .../components/payments/funds-recipient.hbs | 24 +++------- .../components/select/birth-date.hbs | 22 ++++++++++ package.json | 2 +- .../components/select/birth-date-test.js | 44 +++++++++++++++++++ tests/pages/components/select/birth-date.js | 20 +++++++++ tests/test-helper.js | 2 + 8 files changed, 135 insertions(+), 28 deletions(-) create mode 100644 app/components/select/birth-date.js create mode 100644 app/templates/components/select/birth-date.hbs create mode 100644 tests/integration/components/select/birth-date-test.js create mode 100644 tests/pages/components/select/birth-date.js diff --git a/app/components/payments/funds-recipient.js b/app/components/payments/funds-recipient.js index e89b7f7d1..9feaa4e4d 100644 --- a/app/components/payments/funds-recipient.js +++ b/app/components/payments/funds-recipient.js @@ -10,6 +10,9 @@ export default Component.extend({ init() { this.setProperties(get(this, 'fundsRecipient')); + set(this, 'dobDay', 1); + set(this, 'dobMonth', 1); + set(this, 'dobYear', 2016); this._super(...arguments); }, @@ -18,14 +21,6 @@ export default Component.extend({ set(this, 'businessType', value); }, - setDob(value) { - let dobDay = value.getDay() + 1; - let dobMonth = value.getMonth() + 1; - let dobYear = value.getFullYear(); - - this.setProperties({ dobDay, dobMonth, dobYear }); - }, - setRecipientType(value) { set(this, 'recipientType', value); }, diff --git a/app/components/select/birth-date.js b/app/components/select/birth-date.js new file mode 100644 index 000000000..c518a3493 --- /dev/null +++ b/app/components/select/birth-date.js @@ -0,0 +1,38 @@ +import Ember from 'ember'; +import moment from 'moment'; + +const { + Component + } = Ember; + +export default Component.extend({ + classNames: ['select-birth-date'], + + monthOptions: function() { + return [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12].map((i) => { + return { + number: i, + text: moment.months(i - 1) + }; + }); + }.property(), + + dayOptions: function() { + let results = []; + for (let i = 1; i <= 31; i++) { + results.push(i); + } + return results; + }.property(), + + yearOptions: function() { + let thisYear = moment().year(); + let results = []; + return (function() { + for (let i = thisYear, ref = thisYear - 120; thisYear <= ref ? i <= ref : i >= ref; thisYear <= ref ? i++ : i--) { + results.push(i); + } + return results; + }).apply(this); + }.property() +}); diff --git a/app/templates/components/payments/funds-recipient.hbs b/app/templates/components/payments/funds-recipient.hbs index 1dbafcdfd..a6c55bea3 100644 --- a/app/templates/components/payments/funds-recipient.hbs +++ b/app/templates/components/payments/funds-recipient.hbs @@ -7,16 +7,6 @@ {{#if (eq recipientType 'company')}} -
- - -
{{input type="text" name="business-name" value=businessName}} @@ -39,10 +29,8 @@ {{input type="text" name="last-name" value=lastName}}
- + {{dobMonth}} {{dobDay}} {{dobYear}} + {{select/birth-date day=dobDay month=dobMonth year=dobYear}}
@@ -59,8 +47,7 @@
- {{! TODO: Make a proper select dropdown}} -
@@ -70,8 +57,7 @@
- {{! TODO: Make a proper select dropdown}} -
@@ -81,4 +67,4 @@ {{input type="text" name="ssn-last4" value=ssnLast4}} - \ No newline at end of file + diff --git a/app/templates/components/select/birth-date.hbs b/app/templates/components/select/birth-date.hbs new file mode 100644 index 000000000..0d7ec12f7 --- /dev/null +++ b/app/templates/components/select/birth-date.hbs @@ -0,0 +1,22 @@ + +
+ {{#x-select value=month as |xs|}} + {{#each monthOptions as |monthOption|}} + {{#xs.option value=monthOption.number}}{{monthOption.text}}{{/xs.option}} + {{/each}} + {{/x-select}} + + {{#x-select value=day as |xs|}} + {{#each dayOptions as |dayOption|}} + {{#xs.option value=dayOption}}{{dayOption}}{{/xs.option}} + {{/each}} + {{/x-select}} + + {{#x-select value=year as |xs|}} + {{#each yearOptions as |yearOption|}} + {{#xs.option value=yearOption}}{{yearOption}}{{/xs.option}} + {{/each}} + {{/x-select}} +
diff --git a/package.json b/package.json index 2ebf2dd5f..87e06eaec 100644 --- a/package.json +++ b/package.json @@ -77,7 +77,6 @@ "ember-modal-dialog": "0.8.8", "ember-moment": "7.1.0", "ember-page-title": "^3.0.10", - "ember-pikaday": "2.2.0", "ember-resolver": "^2.0.3", "ember-route-action-helper": "^2.0.0", "ember-simple-auth": "1.1.0", @@ -88,6 +87,7 @@ "ember-tooltips": "2.5.0", "ember-truth-helpers": "1.2.0", "ember-typed": "0.1.3", + "emberx-select": "2.2.2", "eslint-plugin-ember-suave": "^1.0.0", "loader.js": "^4.0.10", "phantomjs": "^1.9.20" diff --git a/tests/integration/components/select/birth-date-test.js b/tests/integration/components/select/birth-date-test.js new file mode 100644 index 000000000..4a9250dfe --- /dev/null +++ b/tests/integration/components/select/birth-date-test.js @@ -0,0 +1,44 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; +import selectBirthDate from '../../../pages/components/select/birth-date'; +import PageObject from 'ember-cli-page-object'; + +let page = PageObject.create(selectBirthDate); + +moduleForComponent('select/birth-date', 'Integration | Component | select/birth date', { + integration: true, + beforeEach() { + page.setContext(this); + }, + afterEach() { + page.removeContext(); + } +}); + +test('it sets the month strings correctly', function(assert) { + assert.expect(1); + page.render(hbs`{{select/birth-date}}`); + assert.equal(page.month.text, 'January February March April May June July August September October December'); +}); + +test('it sets to the correct date', function(assert) { + assert.expect(3); + + this.set('month', 1); + this.set('day', 1); + this.set('year', 2016); + + page.render(hbs`{{select/birth-date month=month day=day year=year}}`); + + page.month.fillIn('4'); + page.day.fillIn('13'); + page.year.fillIn('1970'); + + let month = this.get('month'); + let day = this.get('day'); + let year = this.get('year'); + + assert.equal(month, 4); + assert.equal(day, 13); + assert.equal(year, 1970); +}); diff --git a/tests/pages/components/select/birth-date.js b/tests/pages/components/select/birth-date.js new file mode 100644 index 000000000..acaba9951 --- /dev/null +++ b/tests/pages/components/select/birth-date.js @@ -0,0 +1,20 @@ +import { + selectable +} from 'ember-cli-page-object'; + +export default { + scope: '.select-birth-date', + + month: { + scope: 'select:eq(0)', + fillIn: selectable() + }, + day: { + scope: 'select:eq(1)', + fillIn: selectable() + }, + year: { + scope: 'select:eq(2)', + fillIn: selectable() + } +}; diff --git a/tests/test-helper.js b/tests/test-helper.js index f9ddf8d69..de2c3f63f 100644 --- a/tests/test-helper.js +++ b/tests/test-helper.js @@ -1,4 +1,6 @@ import resolver from './helpers/resolver'; +import registerSelectHelper from './helpers/register-select-helper'; +registerSelectHelper(); import './helpers/flash-message'; import {