From bb93ac6bb52e42c922974f3eaa837bbbb2aeb443 Mon Sep 17 00:00:00 2001
From: Alok Menghrajani <441307+alokmenghrajani@users.noreply.github.com>
Date: Thu, 21 Sep 2023 02:04:15 +0200
Subject: [PATCH 1/2] Add currency when calling currencyFormat

---
 src/app/dashboard/dashboard.html  |  6 +++---
 src/app/reports/balancesheet.html | 24 ++++++++++++------------
 src/app/reports/income.html       | 10 +++++-----
 3 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/src/app/dashboard/dashboard.html b/src/app/dashboard/dashboard.html
index 26eb95a..5c92a3e 100644
--- a/src/app/dashboard/dashboard.html
+++ b/src/app/dashboard/dashboard.html
@@ -20,7 +20,7 @@
           <h5>Current spending</h5>
         </div>
         <div class="col-4 amount">
-          <h5>{{expenseAmount | currencyFormat:org.precision}}</h5>
+          <h5>{{expenseAmount | currencyFormat:org.precision:org.currency}}</h5>
         </div>
       </div>
       <div class="row" *ngFor="let expense of expenseAccounts" [routerLink]="'/accounts/'+expense.id+'/transactions'" [ngClass]="{hidden: hiddenExpenses[expense.id]}">
@@ -28,7 +28,7 @@
           {{expense.fullName | accountName:2}}
         </div>
         <div class="col-4 amount">
-          {{expense.nativeBalanceCost | currencyFormat:org.precision}}
+          {{expense.nativeBalanceCost | currencyFormat:org.precision:org.currency}}
         </div>
       </div>
       <div class="row">
@@ -62,7 +62,7 @@
           {{recentTx.tx.description}}
         </div>
         <div class="col-4 col-md-4 amount" [ngClass]="{'negative': recentTx.split.amount > 0}">
-          {{-recentTx.split.amount | currencyFormat:recentTx.account.precision}}
+          {{-recentTx.split.amount | currencyFormat:recentTx.account.precision:recentTx.account.currency}}
         </div>
       </div>
       <div class="row">
diff --git a/src/app/reports/balancesheet.html b/src/app/reports/balancesheet.html
index 9d052b6..f0bd0c5 100644
--- a/src/app/reports/balancesheet.html
+++ b/src/app/reports/balancesheet.html
@@ -29,8 +29,8 @@
         <h4>Assets</h4>
       </div>
       <div class="col-4 amount">
-        <h4 *ngIf="priceSource === 'price'">{{+assetAccount.totalNativeBalancePrice | currencyFormat:org.precision}}</h4>
-        <h4 *ngIf="priceSource === 'cost'">{{+assetAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4>
+        <h4 *ngIf="priceSource === 'price'">{{+assetAccount.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}</h4>
+        <h4 *ngIf="priceSource === 'cost'">{{+assetAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
       </div>
     </div>
     <div class="row" *ngFor="let account of assetAccounts" [attr.depth]="account.depth">
@@ -39,10 +39,10 @@
         <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
       </div>
       <div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice">
-        {{+account.totalNativeBalancePrice | currencyFormat:org.precision}}
+        {{+account.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}
       </div>
       <div class="col-4 amount" *ngIf="priceSource === 'cost' && account.totalNativeBalanceCost">
-        {{+account.totalNativeBalanceCost | currencyFormat:org.precision}}
+        {{+account.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}
       </div>
     </div>
     <div class="row">
@@ -55,8 +55,8 @@
         <h4>Liabilities</h4>
       </div>
       <div class="col-4 amount">
-        <h4 *ngIf="priceSource === 'price'">{{-liabilityAccount.totalNativeBalancePrice | currencyFormat:org.precision}}</h4>
-        <h4 *ngIf="priceSource === 'cost'">{{-liabilityAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4>
+        <h4 *ngIf="priceSource === 'price'">{{-liabilityAccount.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}</h4>
+        <h4 *ngIf="priceSource === 'cost'">{{-liabilityAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
       </div>
     </div>
     <div class="row" *ngFor="let account of liabilityAccounts" [attr.depth]="account.depth">
@@ -65,10 +65,10 @@
         <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
       </div>
       <div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice">
-        {{-account.totalNativeBalancePrice | currencyFormat:org.precision}}
+        {{-account.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}
       </div>
       <div class="col-4 amount" *ngIf="priceSource === 'cost' && account.totalNativeBalanceCost">
-        {{-account.totalNativeBalanceCost | currencyFormat:org.precision}}
+        {{-account.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}
       </div>
     </div>
     <div class="row" depth="1">
@@ -76,8 +76,8 @@
         <h4>Equity</h4>
       </div>
       <div class="col-4 amount">
-        <h4 *ngIf="priceSource === 'price'">{{-equityAccount.totalNativeBalancePrice | currencyFormat:org.precision}}</h4>
-        <h4 *ngIf="priceSource === 'cost'">{{-equityAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4>
+        <h4 *ngIf="priceSource === 'price'">{{-equityAccount.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}</h4>
+        <h4 *ngIf="priceSource === 'cost'">{{-equityAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
       </div>
     </div>
     <div class="row" *ngFor="let account of equityAccounts" [attr.depth]="account.depth">
@@ -86,10 +86,10 @@
         <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
       </div>
       <div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice">
-        {{-account.totalNativeBalancePrice | currencyFormat:org.precision}}
+        {{-account.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}
       </div>
       <div class="col-4 amount" *ngIf="priceSource === 'cost' && account.totalNativeBalanceCost">
-        {{-account.totalNativeBalanceCost | currencyFormat:org.precision}}
+        {{-account.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}
       </div>
     </div>
   </div>
diff --git a/src/app/reports/income.html b/src/app/reports/income.html
index 198c887..7f83edb 100644
--- a/src/app/reports/income.html
+++ b/src/app/reports/income.html
@@ -24,7 +24,7 @@
         <h4>Income</h4>
       </div>
       <div class="col-4 amount">
-        <h4>{{-incomeAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4>
+        <h4>{{-incomeAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
       </div>
     </div>
     <div class="row" *ngFor="let account of incomeAccounts" [attr.depth]="account.depth">
@@ -33,7 +33,7 @@
         <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
       </div>
       <div class="col-4 amount" *ngIf="account.totalNativeBalanceCost">
-        {{-account.totalNativeBalanceCost | currencyFormat:org.precision}}
+        {{-account.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}
       </div>
     </div>
     <div class="row" depth="1">
@@ -41,7 +41,7 @@
         <h4>Expenses</h4>
       </div>
       <div class="col-4 amount">
-        <h4>{{expenseAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4>
+        <h4>{{expenseAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
       </div>
     </div>
     <div class="row" *ngFor="let account of expenseAccounts" [attr.depth]="account.depth">
@@ -50,7 +50,7 @@
         <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
       </div>
       <div class="col-4 amount" *ngIf="account.totalNativeBalanceCost">
-        {{account.totalNativeBalanceCost | currencyFormat:org.precision}}
+        {{account.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}
       </div>
     </div>
     <div class="row" depth="1">
@@ -58,7 +58,7 @@
         <h4>Net Income</h4>
       </div>
       <div class="col-4 amount">
-        <h4>{{-incomeAccount.totalNativeBalanceCost - expenseAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4>
+        <h4>{{-incomeAccount.totalNativeBalanceCost - expenseAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
       </div>
     </div>
   </div>

From 7cf5c4a39278e00de1acf098c246d5f0f82df0db Mon Sep 17 00:00:00 2001
From: Alok Menghrajani <441307+alokmenghrajani@users.noreply.github.com>
Date: Thu, 21 Sep 2023 02:09:40 +0200
Subject: [PATCH 2/2] Tweak currencyFormat to display currency when it's not
 USD

---
 src/app/shared/currency-format.pipe.ts | 30 +++++++++++++++-----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/src/app/shared/currency-format.pipe.ts b/src/app/shared/currency-format.pipe.ts
index 345b379..edbd758 100644
--- a/src/app/shared/currency-format.pipe.ts
+++ b/src/app/shared/currency-format.pipe.ts
@@ -1,7 +1,16 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { DecimalPipe } from '@angular/common';
 
-@Pipe({name: 'currencyFormat'})
+// Format the currency according to the user's browser locale.
+//
+// Some currencies share the same symbol (e.g. $ is used for USD and CAN).
+// Ideally, the user experience should not be confusing if different accounts
+// have conflicting symbols. One solution might be to always show the ISO
+// currency code for accounts with mixes currencies. Another solution would be
+// to let the user configure how the currency is displayed on a per-currency
+// or per-account basis.
+
+@Pipe({ name: 'currencyFormat' })
 export class CurrencyFormatPipe implements PipeTransform {
   constructor(private decimalPipe: DecimalPipe) {
   }
@@ -11,17 +20,12 @@ export class CurrencyFormatPipe implements PipeTransform {
       return '';
     }
 
-    let prefix = amount < 0 ? '-' : '';
-
-    if(currency === 'USD') {
-      prefix += '$';
-    }
-
-    let minDigits = Math.min(2, precision);
-    
-    return prefix + 
-      this.decimalPipe.transform(
-        Math.abs(amount) / Math.pow(10, precision),
-        '1.' + minDigits + '-' + precision);
+    // note: we can drop the cast to any if we change the ts target from es5 to es2020 or newer.
+    return Intl.NumberFormat(navigator.language, {
+      style: "currency",
+      currency,
+      minimumFractionDigits: precision,
+      signDisplay: "negative",
+    } as any).format(amount / Math.pow(10, precision));
   }
 }
\ No newline at end of file