Aman-Mittal opened a new pull request, #849:
URL: https://github.com/apache/fineract-backoffice-ui/pull/849
Finishes the component set #287 sketched, and answers #684's thesis directly
— the card and form primitives only pay off together, because a form is a card
with fields in it. UI only: no adapter, API or payload changes.
## `app-date-field`
The `ion-datetime-button` + `ion-modal` + `ion-datetime` triad, written by
hand in **59 components**, and the most error-prone block of the set. Three
hazards live in it:
- **The button resolves its picker by id in `componentWillLoad`**, so it
must not mount before the picker exists (#544, #548). This composes the
existing `app-deferred-datetime-button`, which already solves that per instance
rather than per page — no re-solving, and the fix keeps living in one place.
- **An unset picker renders *today* on its button**, which reads as a value
the operator chose. Three forms hand-roll a placeholder to fix it; here it is
the default whenever there is no value.
- **Nothing names the control.** Unlike a text field there is no `label`
property to slot into — the focusable element is a button whose accessible name
would otherwise be whatever date it shows — so the label is referenced with
`aria-labelledby`. Proven in a browser, not assumed: `getByLabel('Opening
Date')` resolves the button.
**Unlike `app-form-field`, this one owns its value.** Three elements that
must know each other's ids cannot be projected, so it is a
`ControlValueAccessor`: `name` and `[(ngModel)]` work on it exactly as they did
on the `ion-datetime` inside. Its spec pins the part that would break silently
— that `required` still registers in the form, because a wrapper that swallowed
the `name` would drop the field from validity and leave
`[disabled]="form.invalid"` never enabling.
## `app-card`
ADR 0005 closes the Ionic boundary to new code, so a new screen either
reaches past it or hand-rolls its own panel markup. #847 did the latter for
want of this, and said so at the time.
Its heading input is `heading`, not `title`: a `title` input also lands on
the host element, where browsers render it as a hover tooltip over the whole
card. There is a test for that, because it is the kind of thing that gets
"tidied" back.
## Converted, specs untouched
- **The office form's opening date**, completing the form #287 nominated. It
removed the last seven Ionic imports the feature had, so that component now
names no vendor element at all — which is the clearest measure I can offer that
the primitives cover the ground.
- **The working-capital overview's panels**, which go back to being cards
rather than the `<section>` markup #847 had to settle for.
Both specs pass with no edits, which is #287's own standard for a faithful
refactor.
## Two things measured on the way
A placeholder passed in from outside **does not reach the slot**: a selected
`ng-content` does not match a node declared inside an `@if`, so a conditional
placeholder projected by the caller never arrives — the button kept showing
today's date. The button now renders its own placeholder from an input. Noted
in the code, since it is a trap for anyone extending these.
My first e2e assertion here was wrong, not the component: I asserted the
office create form shows "Not set", but that form deliberately defaults its
opening date to the tenant's today (`platformDate.today()`), so a date is the
correct thing on the button. The placeholder path is covered where it actually
applies, in the component's spec.
## Still hand-written, deliberately
The other 58 date triads, the remaining ~150 forms, and the 92
`.form-container` copies. Each is mechanical and each would swamp the review of
the primitive; #287 is explicit about landing the components and stopping.
## Checks
- unit suite 329 files / 2821 tests; 12 new cases across the two primitives;
the two converted components' specs unchanged
- mocked e2e 4/4, including the `getByLabel` proof for both the text and
date fields
- `lint` silent, `tsc` app + e2e clean, `i18n:check` clean, `format:check`
clean
- `check:ui-primitives`, `check:a11y-names`, `check:template-text`,
`check:responsive`, `check:theme-contrast`, `check:icons` all pass
- STYLE.md documents both and no longer points at the hand-written shapes
--
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]
