apache / apache/fineract-backoffice-ui

Seven list screens hand-roll their table, so they have no search, paging or retry

Open Beginner friendly
#222 0 comments 0 reactions 0 assignees View on GitHub
angular good first issue javascript typescript ux
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.