search

icefoganalytics / elcc-data-management

Data Management application for Education's Early Learning Child Centre
Apache License 2.0
0 stars 0 forks source link

ELCC-39: Fix UI Glitch Where Currency Type Is Appearing in Currency Input Fields #63

Closed klondikemarlen closed 10 months ago

klondikemarlen commented 10 months ago

Fixes https://yg-hpw.atlassian.net/browse/ELCC-39

Context

On the child care center detail view Employees tab http://localhost:8080/child-care-centres/1/2023-24/employees/april the currency type is showing up in the currency input fields on some systems. This might be cause by an individual user’s locale settings.

Example of broken UI image

Bug exists in web/src/components/CurrencyInput.vue -> vue-currency-input which is using Intl.NumberFormat

It says "US" in the code, setting it to CAD might fix the issue.

Implementation

Harmonize all Intl currency formatters to use CAD and en-CA. Tried setting a couple of locales, but could not re-produce locally, opting for a guess and check approach.

Screenshots

What UI Should Look Like (no currency type displayed at all) image

Testing Instructions

  1. Boot the app via dev up
  2. Check that the app complies, and that you can log in at http://localhost:8080.
  3. From the /dashboard page, click on the “Education is Currently Funding” card.
  4. Click on a child care centre from the list to open the details panel on the right hand side of the page.
  5. Click the “view details” button in the bottom right hand corner of the page.
  6. From the detailed child care centre view, select the Employees tab.
  7. Enter some data in the Employee Benefits section and click Save.

    I haven’t been able to recreate the bug locally. But this is probably related to the end user’s locale/language settings in their browser.