Add contribution basics

2019-05-23 09:46:09 +02:00
parent 18be60da9b
commit 22a9786168
8 changed files with 234 additions and 0 deletions
@@ -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));
+
+    }
+
+  }
+
+});
@@ -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>
+