Merge pull request #146 from 67P/feauture/141-time_picker

Add time input to contribution form

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({
 
@@ -21,13 +22,13 @@ export default Component.extend({
 
   init () {
     this._super(...arguments);
-    this.set('defaultDate', new Date());
+    this.set('defaultDate', moment().startOf('hour').toDate());
 
     // 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 +50,12 @@ export default Component.extend({
       }
 
       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);
 

app/components/add-contribution/template.hbs

@@ -1,15 +1,20 @@
 <form {{action "submit" on="submit"}}>
+  <label>
+    <p class="label">Contributor:</p>
     <p>
       <select required onchange={{action (mut contributorId) value="target.value"}}>
-      <option value="" selected disabled hidden>Contributor</option>
+        <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>Kind</option>
+        <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>
@@ -18,37 +23,46 @@
         <option value="special" selected={{eq kind "special"}}>Special</option>
       </select>
     </p>
+  </label>
+  <label>
+    <p class="label">Date:</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
+        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"
-            placeholder="Description"
               value=description
               class=(if isValidDescription "valid" "")}}
     </p>
+  </label>
+  <label>
+    <p class="label">URL (optional):</p>
     <p>
       {{input type="text"
-            placeholder="URL (optional)"
               value=url
               class=(if isValidUrl "valid" "")}}
     </p>
+  </label>
+
   <p class="actions">
     {{input type="submit"
             disabled=inProgress

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;