Add contribution basics

app/components/add-contribution/component.js

@@ -0,0 +1,72 @@
+import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { and, notEmpty } from '@ember/object/computed';
+
+export default Component.extend({
+
+  attributes: null,
+  contributors: Object.freeze([]),
+
+  isValidContributor: notEmpty('contributorId'),
+  isValidKind: notEmpty('kind'),
+  isValidAmount: computed('amount', function() {
+    return parseInt(this.amount, 10) > 0;
+  }),
+  isValidDescription: notEmpty('description'),
+  isValidUrl: notEmpty('url'),
+  isValid: and('isValidContributor',
+               'isValidKind',
+               'isValidAmount',
+               'isValidDescription'),
+
+  init () {
+    this._super(...arguments);
+    this.set('defaultDate', new Date());
+
+    // Default attributes used by reset
+    this.set('attributes', {
+      contributorId: null,
+      kind: null,
+      date: [new Date()],
+      amount: null,
+      description: null,
+      url: null,
+    });
+
+    this.reset();
+  },
+
+  reset () {
+    this.setProperties(this.attributes);
+  },
+
+  actions: {
+
+    submit () {
+      if (!this.isValid) {
+        alert('Invalid data. Please review and try again.');
+        return;
+      }
+
+      const attributes = this.getProperties(Object.keys(this.attributes));
+      const [ date/* , time */ ] = attributes.date[0].toISOString().split('T');
+      attributes.date = date;
+
+      this.set('inProgress', true);
+
+      this.save(attributes)
+        .then(contribution => {
+          console.debug('contribution', contribution);
+          this.reset();
+          window.scroll(0,0);
+        }, err => {
+          console.warn(err);
+          window.alert('Fail');
+        })
+        .finally(() => this.set('inProgress', false));
+
+    }
+
+  }
+
+});

app/components/add-contribution/template.hbs

@@ -0,0 +1,58 @@
+<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.github_username}}</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>
+    </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>
+  <p class="actions">
+    {{input type="submit"
+            disabled=inProgress
+            value=(if inProgress "Processing" "Save")}}
+    {{#link-to "index"}}Back{{/link-to}}
+  </p>
+</form>
+

app/controllers/contributions/new.js

@@ -0,0 +1,28 @@
+import Controller from '@ember/controller';
+import { alias, filterBy, sort } from '@ember/object/computed';
+import { inject as service } from '@ember/service';
+
+export default Controller.extend({
+
+  kredits: service(),
+
+  contributors: alias('kredits.contributors'),
+  minedContributors: filterBy('contributors', 'id'),
+  sortedContributors: sort('minedContributors', Object.freeze(['name:asc'])),
+
+  actions: {
+
+    save (contribution) {
+      const contributor = this.contributors.findBy('id', contribution.contributorId);
+      contribution.contributorIpfsHash = contributor.ipfsHash;
+
+      return this.kredits.addContribution(contribution)
+        .then(contribution => {
+          this.transitionToRoute('index');
+          return contribution;
+        });
+    }
+
+  }
+
+});

app/router.js

@@ -10,6 +10,9 @@ Router.map(function() {
   this.route('proposals', function() {
     this.route('new');
   });
+  this.route('contributions', function() {
+    this.route('new');
+  });
 });
 
 export default Router;

app/services/kredits.js

@@ -203,6 +203,17 @@ export default Service.extend({
       });
   },
 
+  addContribution(attributes) {
+    console.debug('[kredits] add contribution', attributes);
+
+    return this.kredits.Contribution.addContribution(attributes)
+      .then(data => {
+        console.debug('[kredits] add contribution response', data);
+        attributes.contributor = this.contributors.findBy('id', attributes.contributorId);
+        return Contribution.create(attributes);
+      });
+  },
+
   addProposal(attributes) {
     console.debug('[kredits] add proposal', attributes);
 

app/templates/contributions/new.hbs

@@ -0,0 +1,10 @@
+<section id="add-contribution">
+  <header>
+    <h2>Submit a contribution</h2>
+  </header>
+
+  <div class="content">
+    {{add-contribution contributors=minedContributors save=(action "save")}}
+  </div>
+</section>
+