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',
-  classNames: ['contribution-list'],
+  tagName: 'div',
+  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|}}
-  <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
-    <p class="meta">
-      <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>
+{{#if showQuickFilter}}
+  <div class="quick-filter">
+    <p>
+      <label class="filter-contributor">
+        Contributor:
+        <select onchange={{action (mut contributorId) value="target.value"}}>
+          <option value="" selected>all</option>
+          {{#each contributorsActive as |contributor|}}
+            <option value={{contributor.id}} selected={{eq contributorId contributor.id}}>{{contributor.name}}</option>
+          {{/each}}
+        </select>
+      </label>
+
+      <label class="filter-contribution-size">
+        {{input type="checkbox" checked=hideSmallContributions}}
+        Hide small contributions
+      </label>
     </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>
+  </div>
+{{/if}}
+
+<ul class="contribution-list">
+  {{#each contributionsFiltered as |contribution|}}
+    <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
+      <p class="meta">
+        <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>
-{{/each}}
+    </li>
+  {{/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>