kredits/kredits-web
9
0
Fork 0
Code Issues 23 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
+77 -54
3 changed files with 77 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/add-contribution/component.js
+9 -4
View File
@@ -1,6 +1,7 @@
import Component from '@ember/component'; import Component from '@ember/component';
import { computed } from '@ember/object'; import { computed } from '@ember/object';
import { and, notEmpty } from '@ember/object/computed'; import { and, notEmpty } from '@ember/object/computed';
import moment from 'moment';
export default Component.extend({ export default Component.extend({
4
 @@ -21,13 +22,13 @@ export default Component.extend({
init () { init () {
this._super(...arguments); this._super(...arguments);
this.set('defaultDate', new Date()); this.set('defaultDate', moment().startOf('hour').toDate());
// Default attributes used by reset // Default attributes used by reset
this.set('attributes', { this.set('attributes', {
contributorId: null, contributorId: null,
kind: null, kind: null,
date: [new Date()], date: this.defaultDate,
amount: null, amount: null,
description: null, description: null,
url: null, url: null,
@@ -49,8 +50,12 @@ export default Component.extend({
} }
const attributes = this.getProperties(Object.keys(this.attributes)); const attributes = this.getProperties(Object.keys(this.attributes));
const [ date/* , time */ ] = attributes.date[0].toISOString().split('T');
attributes.date = date; 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); this.set('inProgress', true);
app/components/add-contribution/template.hbs
+64 -50
View File
@@ -1,54 +1,68 @@
<form {{action "submit" on="submit"}}> <form {{action "submit" on="submit"}}>
<p> <label>
<select required onchange={{action (mut contributorId) value="target.value"}}> <p class="label">Contributor:</p>
<option value="" selected disabled hidden>Contributor</option> <p>
{{#each contributors as |contributor|}} <select required onchange={{action (mut contributorId) value="target.value"}}>
<option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option> <option value="" selected disabled hidden></option>
{{/each}} {{#each contributors as |contributor|}}
</select> <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
</p> {{/each}}
<p> </select>
<select required onchange={{action (mut kind) value="target.value"}}> </p>
<option value="" selected disabled hidden>Kind</option> </label>
<option value="community" selected={{eq kind "community"}}>Community</option> <label>
<option value="design" selected={{eq kind "design"}}>Design</option> <p class="label">Kind:</p>
<option value="dev" selected={{eq kind "dev"}}>Development</option> <p>
<option value="docs" selected={{eq kind "docs"}}>Documentation</option> <select required onchange={{action (mut kind) value="target.value"}}>
<option value="ops" selected={{eq kind "ops"}}>IT Operations</option> <option value="" selected disabled hidden></option>
<option value="special" selected={{eq kind "special"}}>Special</option> <option value="community" selected={{eq kind "community"}}>Community</option>
</select> <option value="design" selected={{eq kind "design"}}>Design</option>
</p> <option value="dev" selected={{eq kind "dev"}}>Development</option>
<p> <option value="docs" selected={{eq kind "docs"}}>Documentation</option>
{{ember-flatpickr <option value="ops" selected={{eq kind "ops"}}>IT Operations</option>
allowInput=false <option value="special" selected={{eq kind "special"}}>Special</option>
altFormat="F j, Y" </select>
altInput=true </p>
altInputClass="date-alt" </label>
date=date <label>
dateFormat="Y-m-d" <p class="label">Date:</p>
defaultDate=defaultDate <p>
maxDate=defaultDate {{ember-flatpickr
onChange=(action (mut date)) date=date
}} defaultDate=defaultDate
</p> maxDate=defaultDate
<p> enableTime=true
{{input type="text" time_24hr=true
placeholder="500" onChange=(action (mut date))
value=amount }}
class=(if isValidAmount "valid" "")}} </p>
</p> </label>
<p> <label>
{{input type="text" <p class="label">Amount:</p>
placeholder="Description" <p>
value=description {{input type="text"
class=(if isValidDescription "valid" "")}} placeholder="500"
</p> value=amount
<p> class=(if isValidAmount "valid" "")}}
{{input type="text" </p>
placeholder="URL (optional)" </label>
value=url <label>
class=(if isValidUrl "valid" "")}} <p class="label">Description:</p>
</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"> <p class="actions">
{{input type="submit" {{input type="submit"
disabled=inProgress disabled=inProgress
app/styles/_forms.scss
+4
View File
@@ -7,6 +7,10 @@ section#add-proposal {
p { p {
margin-bottom: 1.5rem; margin-bottom: 1.5rem;
&.label {
margin-bottom: .5rem;
}
&.actions { &.actions {
padding-top: 1.5rem; padding-top: 1.5rem;
text-align: center; text-align: center;