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

Add time input to contribution form
67P · Aug 12, 2019 · a4ca37d · a4ca37d
2 parents 143317d + e4a39ec
commit a4ca37d
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 54 deletions.
diff --git 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({
 
@@ -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);
 

diff --git a/app/components/add-contribution/template.hbs b/app/components/add-contribution/template.hbs
@@ -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

diff --git 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;