WIP expense items

app/components/add-reimbursement/component.js

@@ -4,19 +4,37 @@ import { alias } from '@ember/object/computed';
 import { inject as service } from '@ember/service';
 import { action } from '@ember/object';
 import { A } from '@ember/array';
+import Reimbursement from 'kredits-web/models/reimbursement';
+import Expense from 'kredits-web/models/expense';
 
 export default class AddReimbursementComponent extends Component {
   @service kredits;
 
   @tracked recipientId = null;
-  @tracked title = "";
+  @tracked title = '';
-  @tracked total = "0";
+  @tracked total = '0';
   @tracked expenses = A([]);;
+  @tracked newExpense = Expense.create();
+
+  // TODO fetch/apply exchange rate to (W)BTC
+  currencies = [
+    { code: 'EUR' },
+    { code: 'USD' },
+    { code: 'GBP' }
+  ];
 
   get typeofTotal() {
     return typeof this.total;
   }
 
+  get submitButtonEnabled() {
+    return this.expenses.length > 0;
+  }
+
+  get submitButtonDisabled() {
+    return !this.submitButtonEnabled;
+  }
+
   @alias('kredits.contributorsSorted') contributors;
 
   @action

app/components/add-reimbursement/template.hbs

@@ -1,8 +1,3 @@
-<p>
-  Total: {{this.total}}<br>
-  Total type: {{this.typeofTotal}}
-</p>
-
 <form onsubmit={{action "submit"}}>
   <label>
     <p class="label">Contributor:</p>
@@ -18,13 +13,13 @@
   <label>
     <p class="label">Total amount (WBTC):</p>
     <p>
-      {{input type="text"
+      {{input type="text" placeholder="500" value=this.total}}
-              placeholder="500"
-              value=this.total}}
     </p>
   </label>
 
-  <h3>Expense items</h3>
+  <h3>
+    Expense items
+  </h3>
   {{#each this.expenses as |expense|}}
     <table class="expense-list">
       <tr>
@@ -33,39 +28,71 @@
       </tr>
     </table>
     <p>TODO: date, url, tags</p>
+  {{else}}
+    <p>No line items yet.</p>
   {{/each}}
 
+  <p class="actions">
+    {{input type="submit" value="Submit" disabled=this.submitButtonDisabled
+            title="Submit/propose this reimbursement"}}
+  </p>
+
+  <h3>
+    New expense item
+  </h3>
+  <form id="add-expense-item">
+    <fieldset class="horizontal">
+      <label>
+        <p class="label">Amount:</p>
+        <p>
+          {{input type="text" placeholder="10" value=this.newExpense.amount}}
+        </p>
+      </label>
+      <label>
+        <p class="label">Currency:</p>
+        <p>
+          <select required onchange={{action (mut this.newExpense.currency) value="target.value"}}>
+            <option value="" selected disabled hidden></option>
+            {{#each this.currencies as |currency|}}
+              <option value={{currency.code}} selected={{eq this.newExpense.currency currency.code}}>{{currency.code}}</option>
+            {{/each}}
+          </select>
+        </p>
+      </label>
+    </fieldset>
     <label>
       <p class="label">Date:</p>
       <p>
         {{ember-flatpickr
-        date=this.date
+          date=this.newExpense.date
-        defaultDate=this.defaultDate
+          defaultDate=this.newExpense.defaultDate
-        maxDate=this.defaultDate
+          maxDate=this.newExpense.defaultDate
-        enableTime=true
+          enableTime=false
-        time_24hr=true
+          onChange=(action (mut this.newExpense.date))}}
-        onChange=(action (mut this.date))
-      }}
       </p>
     </label>
     <label>
-    <p class="label">Description:</p>
+      <p class="label">Title:</p>
       <p>
-      {{input type="text"
+        {{input type="text" value=this.newExpense.title}}
-              value=this.description
+      </p>
-              class=(if this.isValidDescription "valid" "")}}
+    </label>
+    <label>
+      <p class="label">Description (optional):</p>
+      <p>
+        {{input type="text" value=this.newExpense.description}}
       </p>
     </label>
     <label>
       <p class="label">URL (optional):</p>
       <p>
-      {{input type="text"
+        {{input type="text" value=this.newExpense.url}}
-              value=this.url
-              class=(if this.isValidUrl "valid" "")}}
       </p>
     </label>
 
     <p class="actions">
-    {{input type="submit" value="Submit"}}
+      {{input type="submit" value="Add" disabled=this.addButtonDisabled
+              class="green" title="Add item to reimbursement"}}
     </p>
+  </form>
 </form>

app/models/expense.js

@@ -0,0 +1,43 @@
+import EmberObject, { computed } from '@ember/object';
+import moment from 'moment';
+import { A } from '@ember/array';
+
+export default EmberObject.extend({
+  title: null,
+  description: null,
+  currency: null,
+  amount: null,
+  date: null,
+  url: null,
+  tags: null,
+
+  init () {
+    this._super(...arguments);
+    this.setDefaultValues();
+  },
+
+  iso8601Date: computed('date', 'time', function() {
+    return this.time ? `${this.date}T${this.time}` : this.date;
+  }),
+
+  jsDate: computed('iso8601Date', function() {
+    return moment(this.iso8601Date).toDate();
+  }),
+
+  setDefaultValues () {
+    this.set('defaultDate', moment().startOf('hour').toDate());
+    this.setProperties({
+      title: '',
+      description: '',
+      currency: 'EUR',
+      amount: 0,
+      date: this.defaultDate,
+      url: null,
+      tags: A([])
+    });
+  },
+
+  serialize () {
+    return JSON.stringify(this);
+  }
+});

app/models/reimbursement.js

@@ -26,7 +26,6 @@ export default EmberObject.extend({
 
   init () {
     this._super(...arguments);
-    if (isEmpty(this.details)) this.set('details', {});
   },
 
   iso8601Date: computed('date', 'time', function() {

app/styles/_forms.scss

@@ -3,10 +3,16 @@ section#add-contribution,
 section#add-contribution,
 section#add-item, // TODO use for all forms for adding data
 section#signup {
-
   form {
+    h3 {
+      font-size: 1.5rem;
+      font-weight: normal;
+      margin-top: 2em;
+      margin-bottom: 1em;
+    }
 
     p {
+      font-size: 1.2rem;
       margin-bottom: 1.5rem;
 
       &.mg-bottom-md {
@@ -14,6 +20,7 @@ section#signup {
       }
 
       &.label {
+        font-size: 1rem;
         margin-bottom: .5rem;
       }
 
@@ -33,6 +40,19 @@ section#signup {
       opacity: 0.7;
     }
 
+    fieldset {
+      border: none;
+
+      &.horizontal {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-gap: 2rem;
+
+        label {
+        }
+      }
+    }
+
     input[type=text], select {
       width: 100%;
       padding: 1rem;
@@ -41,6 +61,7 @@ section#signup {
       background-color: rgba(22, 21, 40, 0.3);
       color: #fff;
       font-size: 1.2rem;
+      font-weight: normal;
       transition: border-color 0.1s linear;
 
       &:focus, &.valid {
@@ -111,7 +132,5 @@ section#signup {
         color: #fff;
       }
     }
-
   }
-
 }