From abb7d95804ad688deeaac7b5e585d14fe0ffc3f7 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Sat, 6 Jul 2019 15:49:29 +0200 Subject: [PATCH] Add quick filters --- app/components/contribution-list/component.js | 40 ++++++++++- app/components/contribution-list/template.hbs | 69 ++++++++++++------- app/styles/components/_contribution-list.scss | 18 +++++ app/templates/index.hbs | 6 +- .../contribution-list/component-test.js | 26 +++++-- 5 files changed, 126 insertions(+), 33 deletions(-) diff --git a/app/components/contribution-list/component.js b/app/components/contribution-list/component.js index f85da1d..f0fc89d 100644 --- a/app/components/contribution-list/component.js +++ b/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: { diff --git a/app/components/contribution-list/template.hbs b/app/components/contribution-list/template.hbs index 29a5760..3143254 100644 --- a/app/components/contribution-list/template.hbs +++ b/app/components/contribution-list/template.hbs @@ -1,25 +1,48 @@ -{{#each contributions as |contribution|}} -
  • -

    - {{user-avatar contributor=contribution.contributor}} - ({{contribution.kind}}) - - {{#if contribution.url}} - {{contribution.description}} - {{else}} - {{contribution.description}} - {{/if}} - +{{#if showQuickFilter}} +

    +

    + + +

    -

    - {{contribution.amount}}₭S -

    - {{#unless contribution.vetoed}} - {{#unless (is-confirmed-contribution contribution)}} -

    - -

    +
    +{{/if}} + + \ No newline at end of file diff --git a/app/styles/components/_contribution-list.scss b/app/styles/components/_contribution-list.scss index 0e0a938..53bbc32 100644 --- a/app/styles/components/_contribution-list.scss +++ b/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%; diff --git a/app/templates/index.hbs b/app/templates/index.hbs index 312337b..1ecc5f0 100644 --- a/app/templates/index.hbs +++ b/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}} {{/if}} @@ -65,7 +66,8 @@
    {{contribution-list contributions=contributionsConfirmedSorted - vetoContribution=(action "vetoContribution")}} + vetoContribution=(action "vetoContribution") + showQuickFilter=showQuickFilterConfirmed}}
    diff --git a/tests/integration/components/contribution-list/component-test.js b/tests/integration/components/contribution-list/component-test.js index be94ef3..b790b37 100644 --- a/tests/integration/components/contribution-list/component-test.js +++ b/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) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); + test('it renders all contributions', async function(assert) { + this.set('fixtures', contributions); + 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'); }); });