Add quick filters

app/components/contribution-list/component.js

@@ -1,9 +1,45 @@
 import Component from '@ember/component';
+import { computed } from '@ember/object';
+import { sort } from '@ember/object/computed';
+import { isPresent } from '@ember/utils';
+import { inject as service } from '@ember/service';
 
 export default Component.extend({
 
-  tagName: 'ul',
+  tagName: 'div',
-  classNames: ['contribution-list'],
+  classNames: ['contributions'],
+
+  kredits: service(),
+
+  contributorsSorting: Object.freeze(['name:asc']),
+  contributors: sort('kredits.contributors', 'contributorsSorting'),
+
+  contributorsActive: computed('contributors.[]', 'contributions', function() {
+    let activeIds = this.contributions.mapBy('contributorId')
+                                      .map(id => id.toString())
+                                      .uniq();
+    return this.contributors.filter(c => {
+      return activeIds.includes(c.id.toString());
+    });
+  }),
+
+  showQuickFilter: false,
+  hideSmallContributions: false,
+  contributorId: null,
+
+  contributionsFiltered: computed('contributions.[]', 'hideSmallContributions', 'contributorId', function() {
+    return this.contributions.filter(c => {
+      let included = true;
+
+      if (this.hideSmallContributions &&
+          c.amount <= 500) { included = false; }
+
+      if (isPresent(this.contributorId) &&
+          (c.contributorId.toString() !== this.contributorId.toString())) { included = false; }
+
+      return included;
+    });
+  }),
 
   actions: {
 

app/components/contribution-list/template.hbs

@@ -1,25 +1,48 @@
-{{#each contributions as |contribution|}}
+{{#if showQuickFilter}}
-  <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
+  <div class="quick-filter">
-    <p class="meta">
+    <p>
-      <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
+      <label class="filter-contributor">
-      <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
+        Contributor:
-      <span class="title">
+        <select onchange={{action (mut contributorId) value="target.value"}}>
-        {{#if contribution.url}}
+          <option value="" selected>all</option>
-          <a href={{contribution.url}} target="_blank" rel="noopener">{{contribution.description}}</a>
+          {{#each contributorsActive as |contributor|}}
-        {{else}}
+            <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
-          {{contribution.description}}
+          {{/each}}
-        {{/if}}
+        </select>
-      </span>
+      </label>
+
+      <label class="filter-contribution-size">
+        {{input type="checkbox" checked=hideSmallContributions}}
+        Hide small contributions
+      </label>
     </p>
-    <p class="kredits-amount">
+  </div>
-      <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>
+{{/if}}
-    </p>
+
-    {{#unless contribution.vetoed}}
+<ul class="contribution-list">
-      {{#unless (is-confirmed-contribution contribution)}}
+  {{#each contributionsFiltered as |contribution|}}
-        <p class="voting">
+    <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
-          <button {{action "veto" contribution.id}} class="small danger">veto</button>
+      <p class="meta">
-        </p>
+        <span class="recipient">{{user-avatar contributor=contribution.contributor}}</span>
+        <span class="category {{contribution.kind}}">({{contribution.kind}})</span>
+        <span class="title">
+          {{#if contribution.url}}
+            <a href={{contribution.url}} target="_blank" rel="noopener">{{contribution.description}}</a>
+          {{else}}
+            {{contribution.description}}
+          {{/if}}
+        </span>
+      </p>
+      <p class="kredits-amount">
+        <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>
+      </p>
+      {{#unless contribution.vetoed}}
+        {{#unless (is-confirmed-contribution contribution)}}
+          <p class="voting">
+            <button {{action "veto" contribution.id}} class="small danger">veto</button>
+          </p>
+        {{/unless}}
       {{/unless}}
-    {{/unless}}
+    </li>
-  </li>
+  {{/each}}
-{{/each}}
+</ul>

app/styles/components/_contribution-list.scss

@@ -6,6 +6,24 @@ main section {
   }
 }
 
+.quick-filter {
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+
+  p {
+    font-size: inherit;
+    padding: 0.2rem 0 0;
+  }
+
+  label {
+    font-size: inherit;
+
+    &+ label {
+      margin-left: 3.6rem;
+    }
+  }
+}
+
 ul.contribution-list {
   clear: both;
   width: 100%;

app/templates/index.hbs

@@ -51,7 +51,8 @@
           {{!-- TODO: We need a better naming for kredits.hasAccounts --}}
           {{contribution-list contributions=contributionsUnconfirmedSorted
                               vetoContribution=(action "vetoContribution")
-                              contractInteractionEnabled=kredits.hasAccounts}}
+                              contractInteractionEnabled=kredits.hasAccounts
+                              showQuickFilter=showQuickFilterUnconfirmed}}
         </div>
       </section>
     {{/if}}
@@ -65,7 +66,8 @@
       </header>
       <div class="content">
         {{contribution-list contributions=contributionsConfirmedSorted
-                            vetoContribution=(action "vetoContribution")}}
+                            vetoContribution=(action "vetoContribution")
+                            showQuickFilter=showQuickFilterConfirmed}}
       </div>
     </section>
   </div>

tests/integration/components/contribution-list/component-test.js

@@ -1,17 +1,31 @@
 import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
-import { render } from '@ember/test-helpers';
+import { click, fillIn, render } from '@ember/test-helpers';
 import hbs from 'htmlbars-inline-precompile';
+import contributors from '../../../fixtures/contributors';
+import contributions from '../../../fixtures/contributions';
 
 module('Integration | Component | contribution-list', function(hooks) {
   setupRenderingTest(hooks);
 
-  test('it renders', async function(assert) {
+  test('it renders all contributions', async function(assert) {
-    // Set any properties with this.set('myProperty', 'value');
+    this.set('fixtures', contributions);
-    // Handle any actions with this.set('myAction', function(val) { ... });
+    await render(hbs`{{contribution-list contributions=fixtures}}`);
 
-    await render(hbs`{{contribution-list}}`);
+    assert.equal(this.element.querySelectorAll('li').length, 9);
+  });
 
-    assert.equal(this.element.textContent.trim(), '');
+  test('it renders filtered contributions', async function(assert) {
+    let service = this.owner.lookup('service:kredits');
+    service.set('contributors', contributors);
+
+    this.set('fixtures', contributions);
+    await render(hbs`{{contribution-list contributions=fixtures showQuickFilter=true}}`);
+
+    await fillIn('.filter-contributor select', '1');
+    assert.equal(this.element.querySelectorAll('li').length, 5, 'select contributor');
+
+    await click('.filter-contribution-size input');
+    assert.equal(this.element.querySelectorAll('li').length, 4, 'hide small contributions');
   });
 });