Add quick filters

2019-07-06 15:49:29 +02:00
parent 0e0b1afe3a
commit abb7d95804
5 changed files with 126 additions and 33 deletions
@@ -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: {

@@ -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>