shivaansh0610-LUFFY opened a new pull request, #640:
URL: https://github.com/apache/fineract-backoffice-ui/pull/640
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<!-- Commits must be signed to merge — see CONTRIBUTING.md#commit-signing if
you haven't set this up. -->
## What and why
Fixes two problems on **Organization → Currencies**
(`/organization/currencies`), which lists all ~164 currencies the platform
knows.
**1. Doubled arrows on the transfer buttons.** The translation strings
already contained an arrow (`"Add →"`, `"← Remove"`) and the template added a
second one, so the buttons rendered as `Add → →` and `← ← Remove`. The arrows
are now removed from the strings (`"Add"`, `"Remove"`) and kept in the
template, so translators get a clean word and the direction stays
presentational.
**2. The screen did not scale to the number of options.** There was no way
to find a currency in an unfiltered alphabetical list of 164, and Save sat at
the bottom of a page thousands of pixels tall.
- Adds a filter box above **Available Currencies**. It matches the label or
the currency code, case-insensitively (`fra` leaves the Franc currencies), and
shows "No currencies match your filter." when nothing matches. It uses
`ion-searchbar`, as the group-members dialog already does.
- **Add** only moves currencies that are currently visible. A currency
ticked and then filtered out of view is not added behind the user's back, and
stays ticked for when it comes back into view.
- Each list now scrolls inside its own box (`50vh`, `35vh` at narrow
widths), so the transfer buttons and Save stay on screen instead of being
pushed past the list. Below 768px the panes stack vertically. The inline styles
moved into component CSS to do this.
- Not changed: the issue suggests swapping native checkboxes for the shared
control, but on current `main` the lists already use `ion-checkbox`, so there
was nothing to swap. Only the Available list gets a filter, as the issue asks.
Also moves this component from `@ngx-translate/core` to the `appTranslate`
pipe / `I18N` adapter, which lets the new unit test avoid a restricted import
and removes this file's `no-restricted-imports` entry from
`eslint-suppressions.json`.
Closes #579
## Verification
- Exercised the real page against a local `apache/fineract` (docker) at
1440×900: 164 currencies loaded, the buttons read `Add →` / `← Remove`,
filtering on `fra` narrowed the list to the Franc currencies, adding one moved
it across, and Save stayed visible without scrolling the page. The Save request
was intercepted in the recording so the local tenant's enabled currencies were
not changed; the success toast is the real UI flow.
- Added `currencies.component.test.ts` (9 tests): initial split of the two
lists, the arrows being absent from the translated labels, filtering by label
and by code, clearing/`null` from the searchbar, the Selected list being
unaffected, Add moving ticked items, Add ignoring ticked-but-hidden items, and
Save sending everything on the right including items added while filtered. All
pass.
- `eslint src --suppressions-location eslint-suppressions.json` and
`prettier --check` are clean.
- Not verified: narrow-width (stacked) layout was not recorded, and no
Playwright spec was added.
## Screenshots
### Before
Doubled arrows (`Add → →`, `← ← Remove`) and an unfiltered list with no
search box:
<img width="1440" height="900" alt="before-1-currencies-top"
src="https://github.com/user-attachments/assets/da07eb92-6415-4532-8713-96c44ed53563";
/>
Save is only reachable after scrolling the whole list:
<img width="1440" height="900" alt="before-2-save-far-below"
src="https://github.com/user-attachments/assets/03c744ac-894f-44b3-88c8-5d5585710caa";
/>
Recording:
https://github.com/user-attachments/assets/d5ae1917-0957-4b76-aff8-bbe328723f59
### After
Single arrows, a filter box, and a bounded list with Save in view:
<img width="1440" height="900" alt="after-1-currencies-top"
src="https://github.com/user-attachments/assets/aa3a5ab1-793b-4900-8555-373e6b09a19e";
/>
Filtering on `fra`:
<img width="1440" height="900" alt="after-2-filtered-fra"
src="https://github.com/user-attachments/assets/24bc5f9c-3014-4a18-a7b9-e48d2fcd406b";
/>
After adding a currency:
<img width="1440" height="900" alt="after-3-added"
src="https://github.com/user-attachments/assets/885d48c1-573d-4ae1-93b7-cecd588c1f6b";
/>
After saving:
<img width="1440" height="900" alt="after-4-saved"
src="https://github.com/user-attachments/assets/87e8045e-7d05-4ede-8ea4-9b48817bfac4";
/>
Recording:
https://github.com/user-attachments/assets/78f90217-04ab-47b6-a241-1196054c0213
## AI assistance (optional)
<!-- If generative AI materially assisted this contribution, optionally
state the tool or model and
the harness or workflow used. The contributor remains responsible for the
submitted change. -->
- Tool / model:
- Harness / workflow:
## Checklist
<!-- Check each item, or explain why it does not apply. -->
- [x] I did not hand-edit generated files under `src/app/api/`.
- [x] New component or service code uses the adapter boundary in
`src/app/core/adapters/` instead of direct browser globals or imperative
third-party APIs.
- [x] User-facing strings use translation keys.
- [x] I added or updated tests appropriate to this change, or explained why
tests were not needed.
- [ ] UI workflow changes include suitable e2e coverage, including
real-backend testing where relevant. <!-- No Playwright spec added; exercised
manually against a real backend as described above. -->
- [ ] Commits are signed — see [Commit
Signing](CONTRIBUTING.md#commit-signing) in CONTRIBUTING.md.
- [ ] I followed the [AI-assisted contributions
guidance](CONTRIBUTING.md#ai-assisted-contributions).
--
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]
