Add proposal form

Closes #6

Form can be prefilled using query params on the route. The params are
`recipient`, `amount`, `url` and `ipfsHash`.

app/components/add-proposal/component.js

@@ -0,0 +1,60 @@
+import Ember from 'ember';
+
+const {
+  Component,
+  inject: {
+    service
+  },
+  computed
+} = Ember;
+
+export default Component.extend({
+
+  kredits: service(),
+
+  proposal: null,
+  inProgress: false,
+
+  isValidRecipient: computed('proposal.recipientAddress', function() {
+    return this.get('kredits.web3Instance').isAddress(this.get('proposal.recipientAddress'));
+  }),
+
+  isValidAmount: computed('proposal.amount', function() {
+    // TODO
+    return true;
+  }),
+
+  isValidUrl: computed('proposal.url', function() {
+    // TODO
+    return true;
+  }),
+
+  isValidIpfsHash: computed('proposal.ipfsHash', function() {
+    // TODO
+    return true;
+  }),
+
+  isValid: computed.and('isValidRecipient', 'isValidAmount', 'isValidUrl',
+                        'isValidIpfsHash'),
+
+  actions: {
+    save() {
+      if (this.get('isValid')) {
+        this.set('inProgress', true);
+
+        this.get('kredits').addProposal(this.get('proposal'))
+          .then(() => {
+            this.attrs.onSave();
+          }).catch((error) => {
+            Ember.Logger.error('Error creating the proposal', error);
+            alert('Something went wrong.');
+          }).finally(() => {
+            this.set('inProgress', false);
+          });
+      } else {
+        alert('Invalid data. Please review and try again.');
+      }
+    }
+  }
+
+});

app/components/add-proposal/template.hbs

@@ -0,0 +1,31 @@
+<form {{action "save" on="submit"}}>
+  <p>
+    {{input type="text"
+            placeholder="0xF18E631Ea191aE4ebE70046Fcb01a436554421BA4"
+            value=proposal.recipientAddress
+            class=(if isValidRecipient 'valid' '')}}
+  </p>
+  <p>
+    {{input type="text"
+            placeholder="100"
+            value=proposal.amount
+            class=(if isValidAmount 'valid' '')}}
+  </p>
+  <p>
+    {{input type="text"
+            placeholder="URL"
+            value=proposal.url
+            class=(if isValidUrl 'valid' '')}}
+  </p>
+  <p>
+    {{input type="text"
+            placeholder="IPFS Hash"
+            value=proposal.ipfsHash
+            class=(if isValidIpfsHash 'valid' '')}}
+  </p>
+  <p class="actions">
+    {{input type="submit" value=(if inProgress 'Processing' 'Save') disabled=inProgress}}
+    {{#link-to 'index'}}Back{{/link-to}}
+  </p>
+</form>
+

app/controllers/proposals/new.js

@@ -0,0 +1,27 @@
+import Ember from 'ember';
+import QueryParams from 'ember-parachute';
+
+export const queryParams = new QueryParams({
+  recipient: {
+    defaultValue: ''
+  },
+  amount: {
+    defaultValue: ''
+  },
+  url: {
+    defaultValue: ''
+  },
+  ipfsHash: {
+    defaultValue: ''
+  }
+});
+
+export default Ember.Controller.extend(queryParams.Mixin, {
+
+  actions: {
+    onSave() {
+      this.transitionToRoute('index');
+    }
+  }
+
+});

app/router.js

@@ -8,6 +8,9 @@ const Router = Ember.Router.extend({
 
 Router.map(function() {
   this.route('spinner');
+  this.route('proposals', function() {
+    this.route('new');
+  });
 });
 
 export default Router;

app/routes/proposals/new.js

@@ -0,0 +1,15 @@
+import Ember from 'ember';
+import Proposal from 'kredits-web/models/proposal';
+
+export default Ember.Route.extend({
+
+  model(params) {
+    return Proposal.create({
+      recipientAddress: params.recipient,
+      amount: params.amount,
+      url: params.url,
+      ipfsHash: params.ipfsHash
+    });
+  }
+
+});

app/services/kredits.js

@@ -164,6 +164,23 @@ export default Ember.Service.extend({
     });
   },
 
+  addProposal(proposal) {
+    return new Ember.RSVP.Promise((resolve, reject) => {
+      const {
+        recipientAddress,
+        amount,
+        url,
+        ipfsHash
+      } = proposal.getProperties('recipientAddress', 'amount', 'url', 'ipfsHash');
+
+      this.get('kreditsContract').addProposal(recipientAddress, amount, url, ipfsHash, (err, data) => {
+        if (err) { reject(err); return; }
+        Ember.Logger.debug('[kredits] add proposal response', data);
+        resolve();
+      });
+    });
+  },
+
   logKreditsContract: function() {
     Ember.Logger.debug('[kredits] kreditsContract', this.get('kreditsContract'));
   }.on('init')

app/styles/app.scss

@@ -65,6 +65,22 @@ section {
       }
     }
   }
+
+  &#proposals-open, &#proposals-closed {
+    .actions {
+      padding-top: 3rem;
+      font-size: 1rem;
+      color: lightblue;
+      text-align: center;
+      @include media($mobile) {
+        padding-top: 2rem;
+      }
+
+      a {
+        color: lightblue;
+      }
+    }
+  }
 }
 
 button, input[type=submit] {

app/styles/components/_add-contributor.scss

@@ -1,4 +1,4 @@
-section#add-contributor {
+section#add-contributor, section#add-proposal {
 
   form {
 
@@ -8,6 +8,10 @@ section#add-contributor {
       &.actions {
         padding-top: 1rem;
         text-align: center;
+        a {
+          color: lightblue;
+          margin-left: 1rem;
+        }
       }
     }
 

app/templates/index.hbs

@@ -22,6 +22,10 @@
       {{proposal-list proposals=proposalsOpenSorted
                       confirmAction="confirmProposal"
                       contractInteractionEnabled=contractInteractionEnabled}}
+
+      <p class="actions">
+        {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
+      </p>
     </div>
   </section>
 {{/if}}
@@ -33,6 +37,10 @@
   <div class="content">
     {{proposal-list proposals=proposalsClosedSorted
                     confirmAction="confirmProposal"}}
+
+    <p class="actions">
+      {{#link-to 'proposals.new'}}Create new proposal{{/link-to}}
+    </p>
   </div>
 </section>
 

app/templates/proposals/new.hbs

@@ -0,0 +1,10 @@
+<section id="add-proposal">
+  <header>
+    <h2>Add Proposal</h2>
+  </header>
+
+  <div class="content">
+    {{add-proposal proposal=model onSave=(action 'onSave')}}
+  </div>
+</section>
+