Merge pull request #140 from 67P/feature/contribution_details

Contribution details
67P · Jul 17, 2019 · 9c18593 · 9c18593
2 parents fd1ae0a + 52fe7ff
commit 9c18593
Show file tree

Hide file tree

Showing 17 changed files with 433 additions and 27 deletions.
diff --git a/.template-lintrc.js b/.template-lintrc.js
@@ -4,6 +4,7 @@ module.exports = {
   extends: 'recommended',
 
   rules: {
-    'simple-unless': false
+    'simple-unless': false,
+    'no-nested-interactive': false
   }
 };
diff --git a/app/components/contribution-list/component.js b/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);
     }
 
   }

diff --git a/app/components/contribution-list/template.hbs b/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>

diff --git a/app/components/contributor-list/component.js b/app/components/contributor-list/component.js
@@ -7,6 +7,7 @@ export default Component.extend({
 
   tagName: 'table',
   classNames: 'contributor-list',
+
   selectedContributorId: null,
 
   actions: {

diff --git a/app/components/contributor-list/template.hbs b/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>

diff --git a/app/controllers/dashboard.js b/app/controllers/dashboard.js
@@ -8,6 +8,7 @@ export default Controller.extend({
 
   showDetailsPane: false,
   selectedContributorId: null,
+  selectedContributionId: null,
 
   currentBlock: alias('kredits.currentBlock'),
 

diff --git a/app/models/contribution.js b/app/models/contribution.js
@@ -1,4 +1,4 @@
-import EmberObject from '@ember/object';
+import EmberObject, { computed } from '@ember/object';
 import bignumber from 'kredits-web/utils/cps/bignumber';
 
 export default EmberObject.extend({
@@ -18,11 +18,17 @@ export default EmberObject.extend({
   description: null,
   details: null,
   url: null,
+  date: null,
+  time: null,
   ipfsData: '',
 
   init () {
     this._super(...arguments);
     this.set('details', {});
-  }
+  },
+
+  iso8601Date: computed('date', 'time', function() {
+    return this.time ? `${this.date}T${this.time}` : this.date;
+  })
 
 });
diff --git a/app/router.js b/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');

diff --git a/app/routes/dashboard/contributions/show.js b/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
+        });
+  }
+
+});
diff --git a/app/styles/app.scss b/app/styles/app.scss
@@ -99,6 +99,7 @@ section {
 @import "forms";
 
 @import "components/contribution-list";
+@import "components/contribution-details";
 @import "components/contributor-list";
 @import "components/contributor-profile";
 @import "components/external-account-link";

diff --git a/app/styles/components/_contribution-details.scss b/app/styles/components/_contribution-details.scss
@@ -0,0 +1,59 @@
+section#contribution-details {
+  header {
+    nav {
+      .amount {
+        font-size: 1.5rem;
+      }
+
+      .symbol {
+        padding-left: 0.2rem;
+      }
+    }
+  }
+
+  .content {
+    width: 100%;
+    margin: 0 0 1.5rem;
+    padding: 2rem 2rem;
+
+    border-top: 1px solid rgba(255,255,255,0.2);
+    border-bottom: 1px solid rgba(255,255,255,0.2);
+    background-color: rgba(255,255,255,0.1);
+
+    h3 {
+      font-size: 1.5rem;
+      margin-bottom: 2rem;
+    }
+
+    p {
+      margin-bottom: 2rem;
+
+      span {
+        font-size: inherit;
+      }
+
+      &.who-what-when {
+        font-size: 1.2rem;
+        margin-bottom: 1.2rem;
+      }
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+
+    a {
+      color: $primary-color;
+      text-decoration: none;
+      font-size: inherit;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .actions {
+    text-align: center;
+  }
+}
diff --git a/app/styles/components/_contribution-list.scss b/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;

diff --git a/app/templates/dashboard.hbs b/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>

diff --git a/app/templates/dashboard/contributions/show.hbs b/app/templates/dashboard/contributions/show.hbs
@@ -0,0 +1,47 @@
+<section id="contribution-details">
+  <header class="with-nav">
+    <h2>Contribution #{{model.id}}</h2>
+    <nav>
+      <span class="amount">{{model.amount}}</span>&nbsp;
+      <span class="symbol">₭S</span>
+    </nav>
+  </header>
+
+  <div class="content">
+    <p class="who-what-when">
+      <span class="contributor">
+        {{user-avatar contributor=model.contributor}}
+        {{link-to model.contributor.name "dashboard.contributors.show" model.contributor}}
+      </span>
+      contributed
+      <span class="date" title={{model.iso8601Date}}>{{moment-from model.iso8601Date}}</span>:
+    </p>
+    <h3>{{model.description}}</h3>
+    <p>
+      Kind: {{model.kind}}
+      <br>Status: {{contribution-status model}}
+    </p>
+    {{#if model.url}}
+      <p>
+        <a href={{model.url}}
+           title={{model.description}}
+           class="button"
+           target="_blank"
+           rel="noopener">
+          Open URL
+        </a>
+      </p>
+    {{/if}}
+  </div>
+
+  <div class="actions">
+    <p>
+      {{#if model.ipfsHash}}
+        <a href="https://ipfs.io/ipfs/{{model.ipfsHash}}"
+           class="button small" target="_blank" rel="noopener">
+          Inspect IPFS data
+        </a>
+      {{/if}}
+    </p>
+  </div>
+</section>