Merge pull request #227 from 67P/feature/contributor-list_improvements

Contributor list improvements

app/components/contributor-list/component.js

@@ -1,18 +1,43 @@
-import Component from '@ember/component';
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
 import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
 
-export default Component.extend({
+export default class ContributorComponent extends Component {
-  tagName: '',
+  @service router;
 
-  router: service(),
+  @tracked selectedContributorId = null;
-
+  @tracked showToplistOnly = true;
-  selectedContributorId: null,
-
-  actions: {
-
-    openContributorDetails(contributor) {
-      this.router.transitionTo('dashboard.contributors.show', contributor);
-    }
 
+  get contributorList () {
+    return this.args.contributorList;
   }
-});
+
+  get contributorTop10 () {
+    return this.contributorList ?
+      this.contributorList.slice(0, 10) : [];
+  }
+
+  get contributors () {
+    return this.showToplistOnly ?
+      this.contributorTop10 : this.contributorList;
+  }
+
+  get hiddenContributorsAmount () {
+    return this.contributorList.length - 10;
+  }
+
+  get showAllButtonText () {
+    return `Show ${this.hiddenContributorsAmount} more contributors`;
+  }
+
+  @action
+  openContributorDetails (contributor) {
+    this.router.transitionTo('dashboard.contributors.show', contributor);
+  }
+
+  @action
+  showAllContributors () {
+    this.showToplistOnly = false;
+  }
+}

app/components/contributor-list/template.hbs

@@ -2,7 +2,7 @@
   <thead>
   </thead>
   <tbody>
-    {{#each @contributorList as |c|}}
+    {{#each this.contributors as |c|}}
       <tr role="button"
           onclick={{action "openContributorDetails" c.contributor}}
           class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id @selectedContributorId) "selected"}}">
@@ -21,5 +21,12 @@
         </td>
       </tr>
     {{/each}}
+    {{#if this.showToplistOnly}}
+      <tr role="button" onclick={{action "showAllContributors"}}>
+        <td colspan="2">
+          {{this.showAllButtonText}}
+        </td>
+      </tr>
+    {{/if}}
   </tbody>
 </table>

app/controllers/dashboard.js

@@ -25,7 +25,10 @@ export default Controller.extend({
   kreditsToplistSorting: computed('showUnconfirmedKredits', function(){
     return this.showUnconfirmedKredits ? ['amountTotal:desc'] : ['amountConfirmed:desc'];
   }),
-  kreditsToplist: sort('kreditsByContributor', 'kreditsToplistSorting'),
+  kreditsToplist: computed('kreditsByContributor', function(){
+    return this.kreditsByContributor.filter(c => c.amountTotal > 0);
+  }),
+  kreditsToplistSorted: sort('kreditsToplist', 'kreditsToplistSorting'),
 
   showUnconfirmedKredits: true,
   hideUnconfirmedKredits: not('showUnconfirmedKredits'),

app/templates/dashboard.hbs

@@ -11,7 +11,7 @@
         {{/if}}
       </header>
       <div class="content">
-        <ContributorList @contributorList={{this.kreditsToplist}}
+        <ContributorList @contributorList={{this.kreditsToplistSorted}}
                          @showUnconfirmedKredits={{this.showUnconfirmedKredits}}
                          @selectedContributorId={{this.selectedContributorId}}
                          @loading={{this.kredits.syncContributors.isRunning}} />

tests/unit/controllers/dashboard-test.js

@@ -1,29 +1,31 @@
-// import { isEmpty, isPresent } from '@ember/utils';
+import { isEmpty } from '@ember/utils';
-// import { module, test } from 'qunit';
+import { module, test } from 'qunit';
-// import { setupTest } from 'ember-qunit';
+import { setupTest } from 'ember-qunit';
-// import Contributor from 'kredits-web/models/contributor';
+import Contributor from 'kredits-web/models/contributor';
-//
+
-// module('Unit | Controller | index', function(hooks) {
+module('Unit | Controller | Dashboard', function(hooks) {
-//   setupTest(hooks);
+  setupTest(hooks);
-//
+
-//   let addFixtures = function(controller) {
+  let addFixtures = function(controller) {
-//     [
+    [
-//       { github_username: "neo", github_uid: "318", totalKreditsEarned: 10000 },
+      { github_username: "neo", github_uid: "318", totalKreditsEarned: 10000 },
-//       { github_username: "morpheus", github_uid: "843", totalKreditsEarned: 15000 },
+      { github_username: "morpheus", github_uid: "843", totalKreditsEarned: 15000 },
-//       { github_username: "trinity", github_uid: "123", totalKreditsEarned: 5000 },
+      { github_username: "trinity", github_uid: "123", totalKreditsEarned: 5000 },
-//       { github_username: "mouse", github_uid: "696", totalKreditsEarned: 0 }
+      { github_username: "mouse", github_uid: "696", totalKreditsEarned: 0 }
-//     ].forEach(fixture => {
+    ].forEach(fixture => {
-//       controller.get('kredits.contributors').push(Contributor.create(fixture));
+      controller.get('kredits.contributors').push(Contributor.create(fixture));
-//     });
+    });
-//   };
+  };
-//
+
-//   test('doesn\'t contain people with 0 balance', function(assert) {
+  test('kreditsToplistSorted()', function(assert) {
-//     let controller = this.owner.lookup('controller:index');
+    const controller = this.owner.lookup('controller:dashboard');
-//     addFixtures(controller);
+    addFixtures(controller);
-//
+
-//     let contributorsSorted = controller.get('contributorsSorted');
+    const kreditsToplistSorted = controller.get('kreditsToplistSorted');
-//
+
-//     assert.ok(isPresent(contributorsSorted.findBy('github_username', 'neo')));
+    assert.equal(kreditsToplistSorted.length, 3,
-//     assert.ok(isEmpty(contributorsSorted.findBy('github_username', 'mouse')));
+      'contains all contributors with kredits');
-//   });
+    assert.ok(isEmpty(kreditsToplistSorted.findBy('github_username', 'mouse')),
-// });
+      'does not contain contributors with 0 kredits');
+  });
+});