Aman-Mittal opened a new issue, #250:
URL: https://github.com/apache/fineract-backoffice-ui/issues/250
## Business value
Back-office work is multi-tab work. An officer keeps a client open in one
tab, a loan account in another and the chart of accounts in a third, and
switches between them all day.
Today every one of those tabs is labelled `Fineract Backoffice UI`, because
that is the static `<title>` in `src/index.html:23` and nothing ever replaces
it. The tab strip carries no information at all, so finding the right tab means
clicking through them. Browser history is equally useless: every entry has the
same name, and so does every bookmark the user makes.
It also matters for screen-reader users. The document title is announced on
navigation and is the primary way a non-visual user learns that the page
changed. In a single-page application that never updates it, navigation is
silent.
Angular has first-class support for this and the application simply does not
use it: `Route.title` is applied by the router's built-in `TitleStrategy` with
no wiring at all.
## Reproducing it
```
grep -h "path: '" src/app/app.routes.ts src/app/features/*/*.routes.ts | wc
-l # 322
grep -c 'title:' src/app/app.routes.ts src/app/features/*/*.routes.ts
# 0 in every file
```
Then open the app and watch the tab while navigating from the dashboard to a
client to a loan. It never changes.
## Describing the change
Add a `title` to each route. Routes are already split per feature —
`src/app/features/<feature>/<feature>.routes.ts`, 23 files — so this is
naturally one small pull request per feature, and **a first contribution should
take a single feature file rather than all of them.**
```ts
{
path: 'view/:id',
title: 'GROUPS.GROUP_DETAILS',
loadComponent: () => import('./group-view.component').then((m) =>
m.GroupViewComponent),
},
```
Two things to decide while doing it, and either is a reasonable first PR:
1. **Translation.** A raw English string in `title` would be the only
user-visible text in the app that cannot be translated. The tidy answer is a
custom `TitleStrategy` that resolves the route's `title` as a translation key
through the `I18N` adapter (`src/app/core/adapters`) and appends a suffix, so
tabs read `Groups · Fineract`. Whoever takes the first feature is welcome to
add that strategy in the same PR — or to add plain keys first and leave the
strategy to a follow-up, provided the keys are real entries in
`src/assets/i18n/en.json`.
2. **Detail routes.** `/clients/view/:id` cannot name the client from a
static string. Start with the entity name (`CLIENTS.CLIENT_DETAILS`); resolving
the record's own name into the title is a separate, larger piece of work and is
explicitly out of scope here.
## Scope
In scope: a `title` on the routes of one or more feature route files, the
matching keys in `en.json`, and optionally the `TitleStrategy` that translates
them.
Out of scope: putting record names (client name, loan account number) into
titles, and any change to `index.html`.
## Getting started
- Routes live in `src/app/features/<feature>/<feature>.routes.ts`.
- Translation keys go in `src/assets/i18n/en.json`, under the feature's
existing section.
- `DOCS/ADAPTERS.md` covers the `I18N` adapter, which is how this codebase
reaches translation.
- `npm run build` and `npm run lint` must pass. If you add a
`TitleStrategy`, a unit spec for it is welcome.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
