Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve reimbursement lists #222

Merged
merged 8 commits into from
Mar 20, 2024
Merged
Next Next commit
Move reimbursement items to separate component
raucao committed Mar 14, 2024
commit 53f13e4a6366eb56acebe6d672b06ec063fd5881
19 changes: 19 additions & 0 deletions app/components/reimbursement-item/component.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import Component from '@glimmer/component';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import config from 'kredits-web/config/environment';

export default class ReimbursementItemComponent extends Component {
@service kredits;

get ipfsGatewayUrl () {
return config.ipfs.gatewayUrl;
}

@action
veto (id) {
this.kredits.vetoReimbursement(id).then(transaction => {
console.debug('[controllers:budget] Veto submitted to chain: '+transaction.hash);
});
}
}
34 changes: 34 additions & 0 deletions app/components/reimbursement-item/template.hbs
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<li data-reimbursement-id={{@reimbursement.id}}
class="{{item-status @reimbursement}}">
<p class="meta">
<span class="recipient">
<UserAvatar @contributor={{@reimbursement.contributor}} />
</span>
<span class="title">
Expenses covered by {{@reimbursement.contributor.name}}
</span>
</p>
<p class="token-amount">
<span class="amount">
{{sats-to-btc @reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
</p>

<ExpenseList @expenses={{@reimbursement.expenses}} />

<div class="meta">
<p class="confirmation-eta">
<ConfirmedIn @confirmedAtBlock={{@reimbursement.confirmedAt}} />
</p>
<p class="actions">
<a href="{{this.ipfsGatewayUrl}}/{{@reimbursement.ipfsHash}}"
class="button small" target="_blank" rel="noopener noreferrer">
Inspect IPFS data
</a>
{{#if this.kredits.currentUserIsCore}}
<button {{on "click" (fn this.veto @reimbursement.id)}}
disabled={{@reimbursement.vetoed}}
class="button small danger" type="button">veto</button>
{{/if}}
</p>
</div>
</li>
13 changes: 0 additions & 13 deletions app/components/reimbursement-list/component.js
Original file line number Diff line number Diff line change
@@ -1,23 +1,10 @@
import Component from '@glimmer/component';
import { sort } from '@ember/object/computed';
import { action } from '@ember/object';
import { inject as service } from '@ember/service';
import config from 'kredits-web/config/environment';

export default class ReimbursementListComponent extends Component {
@service kredits;

itemSorting = Object.freeze(['pendingStatus:asc', 'id:desc']);
@sort('args.items', 'itemSorting') itemsSorted;

get ipfsGatewayUrl () {
return config.ipfs.gatewayUrl;
}

@action
veto (id) {
this.kredits.vetoReimbursement(id).then(transaction => {
console.debug('[controllers:budget] Veto submitted to chain: '+transaction.hash);
});
}
}
37 changes: 2 additions & 35 deletions app/components/reimbursement-list/template.hbs
Original file line number Diff line number Diff line change
@@ -1,38 +1,5 @@
<ul class="item-list spaced reimbursement-list {{if @loading 'loading'}}">
{{#each this.itemsSorted as |reimbursement|}}
<li data-reimbursement-id={{reimbursement.id}}
class="{{item-status reimbursement}}">
<p class="meta">
<span class="recipient">
<UserAvatar @contributor={{reimbursement.contributor}} />
</span>
<span class="title">
Expenses covered by {{reimbursement.contributor.name}}
</span>
</p>
<p class="token-amount">
<span class="amount">
{{sats-to-btc reimbursement.amount}}</span>&#8239;<span class="symbol">BTC</span>
</p>

<ExpenseList @expenses={{reimbursement.expenses}} />

<div class="meta">
<p class="confirmation-eta">
<ConfirmedIn @confirmedAtBlock={{reimbursement.confirmedAt}} />
</p>
<p class="actions">
<a href="{{this.ipfsGatewayUrl}}/{{reimbursement.ipfsHash}}"
class="button small" target="_blank" rel="noopener noreferrer">
Inspect IPFS data
</a>
{{#if this.kredits.currentUserIsCore}}
<button {{on "click" (fn this.veto reimbursement.id)}}
disabled={{reimbursement.vetoed}}
class="button small danger" type="button">veto</button>
{{/if}}
</p>
</div>
</li>
{{#each this.itemsSorted as |item|}}
<ReimbursementItem @reimbursement={{item}} />
{{/each}}
</ul>