fix for thousand seperator & slider value

GEOLYTIX · Sep 27, 2024 · 59966fe · 59966fe
1 parent 982f4ef
commit 59966fe
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 12 deletions.
diff --git a/lib/ui/elements/numericInput.mjs b/lib/ui/elements/numericInput.mjs
@@ -55,7 +55,7 @@ function oninput(e, params) {
   params.stringValue = e.target.value
 
   // Assign numeric newValue.
-  params.newValue = mapp.utils.unformatStringValue(params)
+  params.newValue = params.onRangeInput ? params.stringValue : mapp.utils.unformatStringValue(params);
 
   if (params.numericChecks(params.newValue, params)) {
 
@@ -81,13 +81,15 @@ function oninput(e, params) {
   }
 
   // The invalid input should not be formatted.
-  if (params.invalid) return;  
+  if (params.invalid) return;
 
   // Pass valid newValue to callback method.
   params.callback(params.newValue)
 
   // Re-format the params numeric value (newValue || value) and set as input string value.
   e.target.value = mapp.utils.formatNumericValue(params)
+  //Mark the onRangeInput to false is the origin of the input call could come from either a slider or input
+  params.onRangeInput = false;
 }
 
 /**

diff --git a/lib/ui/elements/slider.mjs b/lib/ui/elements/slider.mjs
@@ -66,7 +66,7 @@ export default function slider(params) {
         max=${params.max}
         step=${params.step}
         value=${params.value}
-        oninput=${onRangeInput}>`
+        oninput=${e => onRangeInput(e, params)}>`
 
   return params.sliderElement
 
@@ -80,11 +80,13 @@ export default function slider(params) {
 
   @param {Object} e oninput event from range type input.
   */
-  function onRangeInput(e) {
+  function onRangeInput(e, params) {
 
     // Range type input return a string target.value.
     const val = Number(e.target.value)
 
+    params.onRangeInput = true;
+
     numericInput.value = val
 
     // Trigger formatting and numeric checks.

diff --git a/lib/utils/numericFormatter.mjs b/lib/utils/numericFormatter.mjs
@@ -120,13 +120,19 @@ export function unformatStringValue(params) {
     const numberFormatter = new Intl.NumberFormat(params.formatterParams.locale);
 
     // Get the parts of a formatted number (1.1 is used as an example)
-    const parts = numberFormatter.formatToParts(1.1);
+    const parts = numberFormatter.formatToParts(10000.1);
 
     // Find the decimal separator used in this locale
     const decimalSeperator = parts.find(part => part.type === 'decimal')?.value;
 
+    //Find the thousand seperator used in the locale
+    const thousandSeperator = parts.find(part => part.type === 'group')?.value;
+
+    // Replace the locale-specific decimal separator with a standard period
+    let normalisedValue = stringValue.replaceAll(thousandSeperator, '');
+
     // Replace the locale-specific decimal separator with a standard period
-    const normalisedValue = stringValue.replace(decimalSeperator, '.');
+    normalisedValue = normalisedValue.replace(decimalSeperator, '.');
 
     // Remove any non-numeric characters, except for period and minus sign
     const cleanedValue = normalisedValue.replace(/[^\d.-]/g, '');

diff --git a/tests/lib/utils/numericFormatter.test.mjs b/tests/lib/utils/numericFormatter.test.mjs
@@ -10,21 +10,22 @@ export async function numericFormatterTest() {
 
     await codi.describe('Utils: numericFormatter Test', async () => {
         const params = {
-            stringValue: '654321.987',
+            value: 654321.987,
             prefix: '$',
             formatterParams: {
-                locale: 'UK'
+                locale: 'en-UK'
             }
         };
 
-        const expected_value = 654321.987
+        const expected_value = 654321.99
         /**
          * ### Should unformat UK locale string
          * This test is used to check if a localised string to UK returns the correct string.
          * @function it
          */
         await codi.it('Should unformat UK locale strings', async () => {
 
+            mapp.utils.formatNumericValue(params);
             const unformattedString = mapp.utils.unformatStringValue(params)
             codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`)
         });
@@ -35,23 +36,26 @@ export async function numericFormatterTest() {
          */
         await codi.it('Should unformat DE locale strings', async () => {
             //Settings the locale to 'DE'
-            params.formatterParams.locale = 'DE'
+            params.formatterParams.locale = 'de-AT';
 
+            mapp.utils.formatNumericValue(params);
             const unformattedString = mapp.utils.unformatStringValue(params)
             codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`)
         });
 
         await codi.it('Should unformat PL locale strings', async () => {
             //Settings the locale to 'PL'
-            params.formatterParams.locale = 'PL'
+            params.formatterParams.locale = 'PL';
+            mapp.utils.formatNumericValue(params);
 
             const unformattedString = mapp.utils.unformatStringValue(params)
             codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`)
         });
 
         await codi.it('Should unformat RUB locale strings', async () => {
             //Settings the locale to 'RUB'
-            params.formatterParams.locale = 'RUB'
+            params.formatterParams.locale = 'RUB';
+            mapp.utils.formatNumericValue(params);
 
             const unformattedString = mapp.utils.unformatStringValue(params)
             codi.assertEqual(unformattedString, expected_value, `We expect the value to equal ${expected_value}, we received ${unformattedString}`)