kredits/kredits-web
9
0
Fork 0
Code Issues 22 Pull Requests 1 Actions Releases 18 Activity

WIP Basic reimbursement lists

Browse Source
This commit is contained in:
Basti
2020-07-09 15:14:09 +02:00
parent 95743330e4
commit eaac245f4e
11 changed files with 212 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components/reimbursement-list/component.js
+7
View File
@@ -0,0 +1,7 @@
import Component from '@glimmer/component';
import { sort } from '@ember/object/computed';
export default class ReimbursementListComponent extends Component {
itemSorting = Object.freeze(['id:desc']);
@sort('args.items', 'itemSorting') itemsSorted;
}
app/components/reimbursement-list/template.hbs
+14
View File
@@ -0,0 +1,14 @@
<ul class="item-list">
{{#each this.itemsSorted as |reimbursement|}}
<li>
{{reimbursement.id}}<br>
{{reimbursement.amount}} WBTC<br>
vetoed: {{reimbursement.vetoed}}<br>
pay out to: {{reimbursement.contributor.name}}<br>
{{#each reimbursement.expenses as |expense|}}
{{expense.date}}: {{expense.title}}
{{/each}}
</li>
{{/each}}
</ul>
app/controllers/budget.js
+10
View File
@@ -0,0 +1,10 @@
import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { alias } from '@ember/object/computed';
export default class BudgetController extends Controller {
@service kredits;
@alias('kredits.reimbursementsUnconfirmed') reimbursementsUnconfirmed;
@alias('kredits.reimbursementsConfirmed') reimbursementsConfirmed;
}
app/styles/_layout.scss
+16
View File
@@ -14,6 +14,15 @@ main {
"contributions";
}
&#budget {
width: 100%;
display: grid;
grid-row-gap: 2rem;
grid-template-areas:
"aside"
"content";
}
&.center-column {
display: flex;
flex-direction: column;
@@ -111,6 +120,13 @@ main {
"stats contributions details";
}
}
&#budget {
grid-column-gap: 3rem;
grid-template-columns: 2fr 4fr 2fr;
grid-template-areas:
"aside content empty";
}
}
}
app/templates/budget.hbs
+66 -48
View File
@@ -1,55 +1,73 @@
<main id="budget">
<section id="main-nav">
<header>
<h2>Budget</h2>
</header>
<div class="content">
<ul>
<li>
<LinkTo @route="budget.expenses">Expenses</LinkTo>
</li>
<li>
<a href="#">Rewards</a>
</li>
</ul>
</div>
</section>
<div id="aside">
<section id="main-nav">
<header>
<h2>Budget</h2>
</header>
<div class="content">
<ul>
<li>
<LinkTo @route="budget.expenses">Expenses</LinkTo>
</li>
<li>
<a href="#">Rewards</a>
</li>
</ul>
</div>
</section>
<section id="funds">
<header>
<h2>Community funds</h2>
</header>
<div class="content">
<table>
<thead>
<tr>
<td>Token</td>
<td>Amount</td>
<td>Fiat value</td>
</tr>
</thead>
<tbody>
<tr>
<td>WBTC</td>
<td>1.17215</td>
<td>11031.15 USD</td>
</tr>
<tr>
<td>ETH</td>
<td>0.5</td>
<td>115.60 USD</td>
</tr>
</tbody>
</table>
</div>
</section>
<section id="funds">
<header>
<h2>Community funds</h2>
</header>
<div class="content">
<table>
<thead>
<tr>
<td>Token</td>
<td>Amount</td>
<td>Fiat value</td>
</tr>
</thead>
<tbody>
<tr>
<td>WBTC</td>
<td>1.17215</td>
<td>11031.15 USD</td>
</tr>
<tr>
<td>ETH</td>
<td>0.5</td>
<td>115.60 USD</td>
</tr>
</tbody>
</table>
</div>
</section>
</div>
{{!-- TODO #if sub-route (i.e. filtered list) --}}
{{!-- {{outlet}} --}}
{{!-- {{else}} --}}
<div id="content">
<section id="expenses-unconfirmed">
<header>
<h2>Proposed Reimbursements</h2>
</header>
<div class="content">
<ReimbursementList @items={{this.reimbursementsUnconfirmed}} />
</div>
</section>
<section id="expenses">
</section>
<section id="expenses-confirmed">
<header>
<h2>Confirmed Expenses</h2>
</header>
<div class="content">
<ReimbursementList @items={{this.reimbursementsConfirmed}} />
</div>
</section>
</div>
<div id="empty">
</div>
</main>
app/utils/process-reimbursement-data.js
+4 -2
View File
@@ -1,5 +1,7 @@
export default function processReimbursementData(data) {
const processed = {}
const processed = {
amount: data.amount.toNumber()
}
if (data.confirmedAtBlock && (typeof data.confirmedAtBlock.toNumber === 'function')) {
processed.confirmedAt = data.confirmedAtBlock.toNumber();
@@ -8,7 +10,7 @@ export default function processReimbursementData(data) {
}
const otherProperties = [
'id', 'contributorId', 'token', 'amount', 'vetoed', 'ipfsHash',
'id', 'contributorId', 'token', 'vetoed', 'ipfsHash',
'expenses', 'pendingTx'
];