kredits/kredits-web
9
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Releases 18 Activity

Add time input to contribution form #146

Merged
raucao merged 4 commits from feauture/141-time_picker into master 2019-08-12 12:52:08 +00:00
Conversation 5 Commits 4 Files Changed 3
+72 -54
3 changed files with 72 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a9480a09f1 - Show all commits
app/components/add-contribution/component.js
+4 -4
View File
@@ -21,13 +21,13 @@ export default Component.extend({
raucao commented 2019-07-31 12:25:16 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

Someone has an idea for how to do this in the most simple and efficient way? /cc @galfert @fsmanuel

Someone has an idea for how to do this in the most simple and efficient way? /cc @galfert @fsmanuel
galfert commented 2019-07-31 14:19:04 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

I think it works like this:

    const defaultDate = new Date();
    defaultDate.setHours(0, 0, 0, 0);
    this.set('defaultDate', defaultDate);

Unfortunately you can't just concatenate it (new Date().setHours(0, 0, 0, 0)), because setHours returns a timestamp.

I think it works like this: ```suggestion const defaultDate = new Date(); defaultDate.setHours(0, 0, 0, 0); this.set('defaultDate', defaultDate); ``` Unfortunately you can't just concatenate it (`new Date().setHours(0, 0, 0, 0)`), because `setHours` returns a timestamp.
galfert commented 2019-07-31 14:26:34 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

Scrap my previous comment, I misread you wanted it to be the beginning of the day, not the current hour.

Since we already have moment in the project, I think the easiest way would be

    this.set('defaultDate', moment().startOf('hour').toDate());
Scrap my previous comment, I misread you wanted it to be the beginning of the day, not the current hour. Since we already have moment in the project, I think the easiest way would be ```suggestion this.set('defaultDate', moment().startOf('hour').toDate()); ```
raucao commented 2019-07-31 16:26:28 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

Awesome, will try that. Thanks!

Awesome, will try that. Thanks!
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);
app/components/add-contribution/template.hbs
+64 -50
View File
@@ -1,54 +1,68 @@
<form {{action "submit" on="submit"}}>
<p>
<select required onchange={{action (mut contributorId) value="target.value"}}>
<option value="" selected disabled hidden>Contributor</option>
{{#each contributors as |contributor|}}
<option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
{{/each}}
</select>
</p>
<p>
<select required onchange={{action (mut kind) value="target.value"}}>
<option value="" selected disabled hidden>Kind</option>
<option value="community" selected={{eq kind "community"}}>Community</option>
<option value="design" selected={{eq kind "design"}}>Design</option>
<option value="dev" selected={{eq kind "dev"}}>Development</option>
<option value="docs" selected={{eq kind "docs"}}>Documentation</option>
<option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
<option value="special" selected={{eq kind "special"}}>Special</option>
</select>
</p>
<p>
{{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))
}}
</p>
<p>
{{input type="text"
placeholder="500"
value=amount
class=(if isValidAmount "valid" "")}}
</p>
<p>
{{input type="text"
placeholder="Description"
value=description
class=(if isValidDescription "valid" "")}}
</p>
<p>
{{input type="text"
placeholder="URL (optional)"
value=url
class=(if isValidUrl "valid" "")}}
</p>
<label>
<p class="label">Contributor:</p>
<p>
<select required onchange={{action (mut contributorId) value="target.value"}}>
<option value="" selected disabled hidden></option>
{{#each contributors as |contributor|}}
<option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
{{/each}}
</select>
</p>
</label>
<label>
<p class="label">Kind:</p>
<p>
<select required onchange={{action (mut kind) value="target.value"}}>
<option value="" selected disabled hidden></option>
<option value="community" selected={{eq kind "community"}}>Community</option>
<option value="design" selected={{eq kind "design"}}>Design</option>
<option value="dev" selected={{eq kind "dev"}}>Development</option>
<option value="docs" selected={{eq kind "docs"}}>Documentation</option>
<option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
<option value="special" selected={{eq kind "special"}}>Special</option>
</select>
</p>
</label>
<label>
<p class="label">Date:</p>
<p>
{{ember-flatpickr
date=date
defaultDate=defaultDate
maxDate=defaultDate
enableTime=true
time_24hr=true
onChange=(action (mut date))
}}
</p>
</label>
<label>
<p class="label">Amount:</p>
<p>
{{input type="text"
placeholder="500"
value=amount
class=(if isValidAmount "valid" "")}}
</p>
</label>
<label>
<p class="label">Description:</p>
<p>
{{input type="text"
value=description
class=(if isValidDescription "valid" "")}}
</p>
</label>
<label>
<p class="label">URL (optional):</p>
<p>
{{input type="text"
value=url
class=(if isValidUrl "valid" "")}}
</p>
</label>
<p class="actions">
{{input type="submit"
disabled=inProgress
app/styles/_forms.scss
+4
View File
@@ -7,6 +7,10 @@ section#add-proposal {
p {
margin-bottom: 1.5rem;
&.label {
margin-bottom: .5rem;
}
&.actions {
padding-top: 1.5rem;
text-align: center;