Improve reimbursement lists #222

2024-03-07T16:06:08Z

raucao commented

2024-03-07 16:06:08 +00:00

(Migrated from github.com)

Hide veto button for confirmed reimbursements
Show confirmation block for confirmed reimbursements (when details visible)
Hide expense line items by default for confirmed reimbursements, show/hide on click/tap (with hover indicator to discover)
Show date range of line items while collapsed

* Hide veto button for confirmed reimbursements * Show confirmation block for confirmed reimbursements (when details visible) * Hide expense line items by default for confirmed reimbursements, show/hide on click/tap (with hover indicator to discover) * Show date range of line items while collapsed ![Screenshot from 2024-03-16 14-42-11](https://github.com/67P/kredits-web/assets/842/325f024c-8f94-405d-b82c-5e9547d128ce) refs #221

bumi (Migrated from github.com) reviewed 2024-03-07 16:06:08 +00:00

silverbucket (Migrated from github.com) reviewed 2024-03-07 16:06:08 +00:00

galfert (Migrated from github.com) approved these changes 2024-03-20 12:40:07 +00:00

app/components/reimbursement-item/component.js

						
				@@ -0,0 +1,68 @@

				import Component from '@glimmer/component';

galfert (Migrated from github.com) commented

2024-03-20 12:38:52 +00:00

✂️

app/components/reimbursement-item/template.hbs

						
				@@ -0,0 +1,41 @@

				<li data-reimbursement-id={{@reimbursement.id}}

galfert (Migrated from github.com) commented

2024-03-20 12:36:11 +00:00

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}}> ```

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: kredits/kredits-web#222

				`@@ -0,0 +1,68 @@`
				`import Component from '@glimmer/component';`

				`@@ -0,0 +1,41 @@`
				`<li data-reimbursement-id={{@reimbursement.id}}`