From faa6af569425ffd7c429a9931290619efeeb16e9 Mon Sep 17 00:00:00 2001
From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com>
Date: Mon, 22 Jul 2024 19:35:25 +0200
Subject: [PATCH] Feature/improve handling of numerical precision in value
 component (#3595)

* Improve handling of numerical precision in value component

* Update changelog
---
 CHANGELOG.md                                  |  1 +
 .../admin-overview/admin-overview.html        |  7 +----
 libs/ui/src/lib/value/value.component.ts      | 29 +++++++++++++------
 3 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7466312c4..0bcb87a7a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Changed
 
+- Improved the handling of the numerical precision in the value component
 - Upgraded `angular` from version `18.0.4` to `18.1.1`
 - Upgraded `Nx` from version `19.4.3` to `19.5.1`
 
diff --git a/apps/client/src/app/components/admin-overview/admin-overview.html b/apps/client/src/app/components/admin-overview/admin-overview.html
index 5c052f21f..a1bce7616 100644
--- a/apps/client/src/app/components/admin-overview/admin-overview.html
+++ b/apps/client/src/app/components/admin-overview/admin-overview.html
@@ -12,11 +12,7 @@
           <div class="d-flex my-3">
             <div class="w-50" i18n>User Count</div>
             <div class="w-50">
-              <gf-value
-                [locale]="user?.settings?.locale"
-                [precision]="0"
-                [value]="userCount"
-              />
+              <gf-value [locale]="user?.settings?.locale" [value]="userCount" />
             </div>
           </div>
           <div class="d-flex my-3">
@@ -24,7 +20,6 @@
             <div class="w-50">
               <gf-value
                 [locale]="user?.settings?.locale"
-                [precision]="0"
                 [value]="transactionCount"
               />
               @if (transactionCount && userCount) {
diff --git a/libs/ui/src/lib/value/value.component.ts b/libs/ui/src/lib/value/value.component.ts
index 71bdfc7c3..47730d466 100644
--- a/libs/ui/src/lib/value/value.component.ts
+++ b/libs/ui/src/lib/value/value.component.ts
@@ -58,8 +58,10 @@ export class GfValueComponent implements OnChanges {
               this.formattedValue = this.absoluteValue.toLocaleString(
                 this.locale,
                 {
-                  maximumFractionDigits: this.precision,
-                  minimumFractionDigits: this.precision
+                  maximumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2,
+                  minimumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2
                 }
               );
             } catch {}
@@ -68,8 +70,10 @@ export class GfValueComponent implements OnChanges {
               this.formattedValue = (this.absoluteValue * 100).toLocaleString(
                 this.locale,
                 {
-                  maximumFractionDigits: this.precision,
-                  minimumFractionDigits: this.precision
+                  maximumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2,
+                  minimumFractionDigits:
+                    this.precision >= 0 ? this.precision : 2
                 }
               );
             } catch {}
@@ -77,8 +81,8 @@ export class GfValueComponent implements OnChanges {
         } else if (this.isCurrency) {
           try {
             this.formattedValue = this.value?.toLocaleString(this.locale, {
-              maximumFractionDigits: this.precision,
-              minimumFractionDigits: this.precision
+              maximumFractionDigits: this.precision >= 0 ? this.precision : 2,
+              minimumFractionDigits: this.precision >= 0 ? this.precision : 2
             });
           } catch {}
         } else if (this.isPercent) {
@@ -86,11 +90,18 @@ export class GfValueComponent implements OnChanges {
             this.formattedValue = (this.value * 100).toLocaleString(
               this.locale,
               {
-                maximumFractionDigits: this.precision,
-                minimumFractionDigits: this.precision
+                maximumFractionDigits: this.precision >= 0 ? this.precision : 2,
+                minimumFractionDigits: this.precision >= 0 ? this.precision : 2
               }
             );
           } catch {}
+        } else if (this.precision >= 0) {
+          try {
+            this.formattedValue = this.value?.toLocaleString(this.locale, {
+              maximumFractionDigits: this.precision,
+              minimumFractionDigits: this.precision
+            });
+          } catch {}
         } else {
           this.formattedValue = this.value?.toLocaleString(this.locale);
         }
@@ -129,7 +140,7 @@ export class GfValueComponent implements OnChanges {
     this.isNumber = false;
     this.isString = false;
     this.locale = this.locale || getLocale();
-    this.precision = this.precision >= 0 ? this.precision : 2;
+    this.precision = this.precision >= 0 ? this.precision : undefined;
     this.useAbsoluteValue = false;
   }
 }