apache / apache/fineract-backoffice-ui
Seven list screens hand-roll their table, so they have no search, paging or retry
- Dominant language
- TypeScript
- Stars
- 15
- Forks
- 60
- Avg merge
- 10h 15m
- Merged PRs (30d)
- 108
Description
## What is wrong
**78 of the 85 list screens** render through the shared ``, which gives them a
search box, paging, a consistent empty state and a retry affordance when loading fails. Seven
build their own table instead, so they have none of that:
| Screen | File |
|---|---|
| Manage Codes | `system/codes/codes-list.component.ts` |
| Code Values | `system/codes/code-values-list.component.ts` |
| Templates | `system/templates/templates-list.component.ts` |
| Notifications | `notifications/notifications-list.component.ts` |
| Email Campaigns | `campaigns/email-campaigns/email-campaigns-list.component.ts` |
| SMS Campaigns | `campaigns/sms-campaigns/sms-campaigns-list.component.ts` |
| Office Transactions | `organization/office-transactions/office-transactions-list.component.ts` |
Manage Codes is the sharpest example: a stock Fineract ships around forty codes, and the screen
offers no way to find one. Scrolling is the only option, on a screen whose entire purpose is
looking a specific code up.
## What to change
Convert one screen per pull request — this is deliberately seven small changes, not one large one.
Pick any row from the table above.
The pattern to copy is `src/app/features/products/loan-products-list.component.ts`:
```html
…
```
`[localLogic]="true"` filters and pages in the browser, which suits these endpoints since they
return the whole list in one response.
## How to check it
```bash
npm run build
npm run test -- --watch=false --browsers=ChromeHeadless --project=fineract-backoffice-ui
```
Then open the screen and confirm the search box filters, and that the columns still read the same
values as before.
## Why it is worth doing
Consistency here is not tidiness. A user who has learned that every list has a search box in the
same place is entitled to find one on the eighth screen too, and its absence reads as the screen
being broken rather than different.
Good first issue: one screen each, with 78 working examples in the codebase to copy from.
Contributor guide
Research direction
Choose one of the seven listed component files and compare it with src/app/features/products/loan-products-list.component.ts. Convert that screen to use app-data-table with local search, paging, error retry, and its existing columns and actions. Run npm run build and the specified ChromeHeadless test command, then verify the screen's search and unchanged column values.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- angular, typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Clearly specified
- Newbie friendliness
- 88/100