Octanify add-expense-item syntax

Fixes linter errors

app/components/add-expense-item/component.js

@@ -60,6 +60,11 @@ export default class AddExpenseItemComponent extends Component {
     return validity;
   }
 
+  @action
+  updateCurrency(event) {
+    this.currency = event.target.value;
+  }
+
   @action
   submit (e) {
     e.preventDefault();

app/components/add-expense-item/template.hbs

@@ -1,23 +1,21 @@
-<form id="add-expense-item" onsubmit={{action "submit"}} novalidate>
+<form id="add-expense-item" {{on "submit" this.submit}} novalidate>
   <fieldset class="horizontal">
     <label>
       <p class="label">Amount:</p>
       <p>
-        {{input name="expense-amount"
+        <Input @name="expense-amount"
-                type="text"
+               @type="text"
-                placeholder="10"
+               @placeholder="10"
-                value=this.amount
+               @value={{this.amount}}
-                required=true
+               @required={{true}}
-                pattern="([0-9]*[.])?[0-9]+"
+               @pattern="([0-9]*[.])?[0-9]+"
-                class=this.amountInputClass}}
+               @class={{this.amountInputClass}} />
       </p>
     </label>
     <label>
       <p class="label">Currency:</p>
       <p>
-        <select required name="expense-currency"
+        <select required name="expense-currency" {{on "change" this.updateCurrency}}>
-                onchange={{action (mut this.currency)
-                value="target.value"}}>
           <option value="" selected disabled hidden></option>
           {{#each this.currencies as |currency|}}
           <option value={{currency.code}} selected={{eq this.currency currency.code}}>{{currency.code}}</option>
@@ -29,44 +27,43 @@
   <label>
     <p class="label">Date:</p>
     <p>
-      {{ember-flatpickr
+      <EmberFlatpickr @date={{this.date}}
-      date=this.date
+                      @defaultDate={{this.defaultDate}}
-      defaultDate=this.defaultDate
+                      @maxDate={{this.defaultDate}}
-      maxDate=this.defaultDate
+                      @enableTime={{false}}
-      enableTime=false
+                      @onChange={{fn (mut this.date)}} />
-      onChange=(action (mut this.date))}}
     </p>
   </label>
   <label>
     <p class="label">Title:</p>
     <p>
-      {{input name="expense-title"
+      <Input @name="expense-title"
-              type="text"
+             @type="text"
-              value=this.title
+             @value={{this.title}}
-              required=true}}
+             @required={{true}} />
     </p>
   </label>
   <label>
     <p class="label">Description (optional):</p>
     <p>
-      {{input name="expense-description" type="text" value=this.description}}
+      <Input @name="expense-description" @type="text" @value={{this.description}} />
     </p>
   </label>
   <label>
     <p class="label">URL (optional):</p>
     <p>
-      {{input name="expense-url" type="url" value=this.url}}
+      <Input @name="expense-url" @type="url" @value={{this.url}} />
     </p>
   </label>
   <label>
     <p class="label">Tags (comma-separated, optional):</p>
     <p>
-      {{input name="expense-tags" type="text" value=this.tags}}
+      <Input @name="expense-tags" @type="text" @value={{this.tags}} />
     </p>
   </label>
 
   <p class="actions">
-    {{input type="submit" value="Add" disabled=this.submitButtonDisabled
+    <Input @type="submit" @value="Add" @disabled={{this.submitButtonDisabled}}
-    class="green" title="Add item to reimbursement"}}
+           @class="green" @title="Add item to reimbursement" />
   </p>
 </form>