From a9480a09f1e7ae6540d1ecaf28cc1da485abe2bb Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Wed, 31 Jul 2019 13:20:39 +0200 Subject: [PATCH 1/4] Add time input to conribution form After adding it as a separate field, I figured out that we should use the same picker, because otherwise we'd have to keep the date in sync depending on the time zone. Zones are too messy in that regard, and the date is already normalized to UTC before creating the contribution record. closes #141 --- app/components/add-contribution/component.js | 8 +- app/components/add-contribution/template.hbs | 114 +++++++++++-------- app/styles/_forms.scss | 4 + 3 files changed, 72 insertions(+), 54 deletions(-) diff --git a/app/components/add-contribution/component.js b/app/components/add-contribution/component.js index 4b16e65..6dd293d 100644 --- a/app/components/add-contribution/component.js +++ b/app/components/add-contribution/component.js @@ -21,13 +21,13 @@ export default Component.extend({ init () { this._super(...arguments); - this.set('defaultDate', new Date()); + this.set('defaultDate', new Date()); // TODO use beginning of current hour // Default attributes used by reset this.set('attributes', { contributorId: null, kind: null, - date: [new Date()], + date: this.defaultDate, amount: null, description: null, url: null, @@ -49,8 +49,8 @@ export default Component.extend({ } const attributes = this.getProperties(Object.keys(this.attributes)); - const [ date/* , time */ ] = attributes.date[0].toISOString().split('T'); - attributes.date = date; + const [ date, time ] = attributes.date[0].toISOString().split('T'); + [ attributes.date, attributes.time ] = [ date, time ]; this.set('inProgress', true); diff --git a/app/components/add-contribution/template.hbs b/app/components/add-contribution/template.hbs index 8126463..2d2751f 100644 --- a/app/components/add-contribution/template.hbs +++ b/app/components/add-contribution/template.hbs @@ -1,54 +1,68 @@
-

- -

-

- -

-

- {{ember-flatpickr - allowInput=false - altFormat="F j, Y" - altInput=true - altInputClass="date-alt" - date=date - dateFormat="Y-m-d" - defaultDate=defaultDate - maxDate=defaultDate - onChange=(action (mut date)) - }} -

-

- {{input type="text" - placeholder="500" - value=amount - class=(if isValidAmount "valid" "")}} -

-

- {{input type="text" - placeholder="Description" - value=description - class=(if isValidDescription "valid" "")}} -

-

- {{input type="text" - placeholder="URL (optional)" - value=url - class=(if isValidUrl "valid" "")}} -

+ + + + + + +

{{input type="submit" disabled=inProgress diff --git a/app/styles/_forms.scss b/app/styles/_forms.scss index f9e3dd9..75f3067 100644 --- a/app/styles/_forms.scss +++ b/app/styles/_forms.scss @@ -7,6 +7,10 @@ section#add-proposal { p { margin-bottom: 1.5rem; + &.label { + margin-bottom: .5rem; + } + &.actions { padding-top: 1.5rem; text-align: center; From d8f565cd9e107b3a81242c8e56cefdac07b446b0 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Fri, 2 Aug 2019 16:08:13 +0200 Subject: [PATCH 2/4] Use start of current hour as default contribution time Co-Authored-By: Garret Alfert --- app/components/add-contribution/component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/components/add-contribution/component.js b/app/components/add-contribution/component.js index 6dd293d..eeb984d 100644 --- a/app/components/add-contribution/component.js +++ b/app/components/add-contribution/component.js @@ -21,7 +21,7 @@ export default Component.extend({ init () { this._super(...arguments); - this.set('defaultDate', new Date()); // TODO use beginning of current hour + this.set('defaultDate', moment().startOf('hour').toDate()); // Default attributes used by reset this.set('attributes', { From 5b47ba9e116a2a7299d4c54577425a67c7c7e7c1 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Fri, 2 Aug 2019 16:58:01 +0200 Subject: [PATCH 3/4] Import missing module --- app/components/add-contribution/component.js | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/add-contribution/component.js b/app/components/add-contribution/component.js index eeb984d..5a72ff6 100644 --- a/app/components/add-contribution/component.js +++ b/app/components/add-contribution/component.js @@ -1,6 +1,7 @@ import Component from '@ember/component'; import { computed } from '@ember/object'; import { and, notEmpty } from '@ember/object/computed'; +import moment from 'moment'; export default Component.extend({ From e4a39ec67cc11c05f948ca4bf0632fb7cc4694a6 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Fri, 2 Aug 2019 16:58:12 +0200 Subject: [PATCH 4/4] Fix bug with default date input When the input isn't touched by the user, the date isn't stored as an array on the property. --- app/components/add-contribution/component.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/app/components/add-contribution/component.js b/app/components/add-contribution/component.js index 5a72ff6..0c25c85 100644 --- a/app/components/add-contribution/component.js +++ b/app/components/add-contribution/component.js @@ -50,7 +50,11 @@ export default Component.extend({ } const attributes = this.getProperties(Object.keys(this.attributes)); - const [ date, time ] = attributes.date[0].toISOString().split('T'); + + let dateInput = (attributes.date instanceof Array) ? + attributes.date[0] : attributes.date; + + const [ date, time ] = dateInput.toISOString().split('T'); [ attributes.date, attributes.time ] = [ date, time ]; this.set('inProgress', true);