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

Improve reimbursement lists #222

Merged
raucao merged 8 commits from feature/reimbursement-lists into master 2024-03-20 13:50:33 +00:00
Conversation 3 Commits 8 Files Changed 8
+55 -48
4 changed files with 55 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 53f13e4a63 - Show all commits
app/components/reimbursement-item/component.js
+19
View File
@@ -0,0 +1,19 @@
import Component from '@glimmer/component';
galfert commented 2024-03-20 12:38:52 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

✂️

✂️
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);
});
}
}
app/components/reimbursement-item/template.hbs
+34
View File
@@ -0,0 +1,34 @@
<li data-reimbursement-id={{@reimbursement.id}}
galfert commented 2024-03-20 12:36:11 +00:00 (Migrated from github.com)
Review
Copy Link
Copy Source

I'm guessing this is the offender why you had to disable the linter rule no-invalid-interactive.

Adding a role="button" to the list element should fix that.

<li data-reimbursement-id={{@reimbursement.id}}
    class="{{item-status @reimbursement}}"
    role="button"
    {{on "click" this.toggleExpenseDetails}}>
I'm guessing this is the offender why you had to disable the linter rule `no-invalid-interactive`. Adding a `role="button"` to the list element should fix that. ```suggestion <li data-reimbursement-id={{@reimbursement.id}} class="{{item-status @reimbursement}}" role="button" {{on "click" this.toggleExpenseDetails}}> ```
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>
app/components/reimbursement-list/component.js
-13
View File
@@ -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);
});
}
}
app/components/reimbursement-list/template.hbs
+2 -35
View File
@@ -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>