Add basics for contribution details

Route, controller, links, selected property/styles, etc.

app/components/contribution-list/component.js

@@ -6,9 +6,13 @@ import { inject as service } from '@ember/service';
 
 export default Component.extend({
 
+  router: service(),
+
   tagName: 'div',
   classNames: ['contributions'],
 
+  selectedContribution: null,
+
   showQuickFilter: false,
   hideSmallContributions: false,
   contributorId: null,
@@ -57,6 +61,10 @@ export default Component.extend({
       } else {
         window.alert('Only members can veto contributions. Please ask someone to set you up.');
       }
+    },
+
+    openContributionDetails(contribution) {
+      this.router.transitionTo('dashboard.contributions.show', contribution);
     }
 
   }

app/components/contribution-list/template.hbs

@@ -31,17 +31,13 @@
 
 <ul class="contribution-list">
   {{#each contributionsFiltered as |contribution|}}
-    <li data-contribution-id={{contribution.id}} class="{{contribution-status contribution}} {{if contribution.vetoed "vetoed"}}">
+    <li role="button" {{action "openContributionDetails" contribution}}
+        data-contribution-id={{contribution.id}}
+        class="{{contribution-status contribution}}{{if contribution.vetoed " vetoed"}}{{if (eq contribution.id selectedContributionId) " selected"}}">
       <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" title={{contribution.description}}>{{contribution.description}}</a>
-          {{else}}
-            {{contribution.description}}
-          {{/if}}
-        </span>
+        <span class="title">{{contribution.description}}</span>
       </p>
       <p class="kredits-amount">
         <span class="amount">{{contribution.amount}}</span><span class="symbol">₭S</span>

app/components/contributor-list/component.js

@@ -7,6 +7,7 @@ export default Component.extend({
 
   tagName: 'table',
   classNames: 'contributor-list',
+
   selectedContributorId: null,
 
   actions: {

app/components/contributor-list/template.hbs

@@ -1,8 +1,7 @@
 <tbody>
   {{#each contributorList as |c|}}
-    <tr role="button"
-        class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id selectedContributorId) "selected"}}"
-        {{action "openContributorDetails" c.contributor}}>
+    <tr role="button" {{action "openContributorDetails" c.contributor}}
+        class="{{if (is-current-user c.contributor) "current-user"}} {{if (eq c.contributor.id selectedContributorId) "selected"}}">
       <td class="person">
         {{user-avatar contributor=c.contributor}} {{c.contributor.name}}
       </td>

app/controllers/dashboard.js

@@ -8,6 +8,7 @@ export default Controller.extend({
 
   showDetailsPane: false,
   selectedContributorId: null,
+  selectedContributionId: null,
 
   currentBlock: alias('kredits.currentBlock'),
 

app/router.js

@@ -11,6 +11,10 @@ Router.map(function() {
     this.route('contributors', function() {
       this.route('show', { path: ':id' });
     });
+
+    this.route('contributions', function() {
+      this.route('show', { path: ':id' });
+    });
   });
   this.route('proposals', function() {
     this.route('new');

app/routes/dashboard/contributions/show.js

@@ -0,0 +1,32 @@
+import { inject as service } from '@ember/service';
+import Route from '@ember/routing/route';
+import { alias } from '@ember/object/computed';
+
+export default Route.extend({
+
+  kredits: service(),
+  contributions: alias('kredits.contributions'),
+
+  model (params) {
+    return this.contributions.findBy('id', parseInt(params.id));
+  },
+
+  setupController (controller, model) {
+    this._super(controller, model);
+
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: true,
+          selectedContributionId: model.id
+        });
+  },
+
+  deactivate () {
+    this.controllerFor('dashboard')
+        .setProperties({
+          showDetailsPane: false,
+          selectedContributionId: null
+        });
+  }
+
+});

app/styles/components/_contribution-list.scss

@@ -37,6 +37,7 @@ ul.contribution-list {
     background-color: rgba(255,255,255,0.1);
     font-size: 1.2rem;
     border-bottom: 1px solid rgba(255,255,255,0.2);
+    cursor: pointer;
 
     &:first-of-type {
       border-top: 1px solid rgba(255,255,255,0.2);
@@ -52,6 +53,10 @@ ul.contribution-list {
       opacity: 0.6;
     }
 
+    &.selected {
+      background-color: rgba(255,255,255,0.2);
+    }
+
     p {
       align-self: center;
       margin: 0;

app/templates/dashboard.hbs

@@ -53,6 +53,7 @@
           {{contribution-list contributions=contributionsUnconfirmedSorted
                               vetoContribution=(action "vetoContribution")
                               contractInteractionEnabled=kredits.hasAccounts
+                              selectedContributionId=selectedContributionId
                               showQuickFilter=showQuickFilterUnconfirmed}}
         </div>
       </section>
@@ -68,6 +69,7 @@
       <div class="content">
         {{contribution-list contributions=contributionsConfirmedSorted
                             vetoContribution=(action "vetoContribution")
+                            selectedContributionId=selectedContributionId
                             showQuickFilter=showQuickFilterConfirmed}}
       </div>
     </section>

app/templates/dashboard/contributions/show.hbs

@@ -0,0 +1,16 @@
+<section id="contribution-details">
+  <header>
+    <h2>Details</h2>
+  </header>
+
+  <div class="content">
+    <h3>{{model.description}}</h3>
+    <a href={{model.url}}
+       title={{model.description}}
+       class="button"
+       target="_blank"
+       rel="noopener">
+      Open URL
+    </a>
+  </div>
+</section>