guisea/openaccounting-web
0
0
Fork 0
forked from cybercinch/openaccounting-web
Code Pull Requests Activity

Merge pull request #63 from alokmenghrajani/main

Browse Source 
Add currency when calling currencyFormat
This commit is contained in:
Patrick Nagurny
2023-09-28 08:57:22 -06:00
committed by GitHub
parent ef36779afc 7cf5c4a392
commit 9a6eef2fcc
4 changed files with 37 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/dashboard/dashboard.html
View File

@@ -20,7 +20,7 @@
<h5>Current spending</h5> <h5>Current spending</h5>
</div> </div>
<div class="col-4 amount"> <div class="col-4 amount">
<h5>{{expenseAmount | currencyFormat:org.precision}}</h5> <h5>{{expenseAmount | currencyFormat:org.precision:org.currency}}</h5>
</div> </div>
</div> </div>
<div class="row" *ngFor="let expense of expenseAccounts" [routerLink]="'/accounts/'+expense.id+'/transactions'" [ngClass]="{hidden: hiddenExpenses[expense.id]}"> <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}} {{expense.fullName | accountName:2}}
</div> </div>
<div class="col-4 amount"> <div class="col-4 amount">
{{expense.nativeBalanceCost | currencyFormat:org.precision}} {{expense.nativeBalanceCost | currencyFormat:org.precision:org.currency}}
</div> </div>
</div> </div>
<div class="row"> <div class="row">
@@ -62,7 +62,7 @@
{{recentTx.tx.description}} {{recentTx.tx.description}}
</div> </div>
<div class="col-4 col-md-4 amount" [ngClass]="{'negative': recentTx.split.amount > 0}"> <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> </div>
<div class="row"> <div class="row">

24
src/app/reports/balancesheet.html
View File

@@ -29,8 +29,8 @@
<h4>Assets</h4> <h4>Assets</h4>
</div> </div>
<div class="col-4 amount"> <div class="col-4 amount">
<h4 *ngIf="priceSource === 'price'">{{+assetAccount.totalNativeBalancePrice | 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}}</h4> <h4 *ngIf="priceSource === 'cost'">{{+assetAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
</div> </div>
</div> </div>
<div class="row" *ngFor="let account of assetAccounts" [attr.depth]="account.depth"> <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> <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
</div> </div>
<div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice"> <div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice">
{{+account.totalNativeBalancePrice | currencyFormat:org.precision}} {{+account.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}
</div> </div>
<div class="col-4 amount" *ngIf="priceSource === 'cost' && account.totalNativeBalanceCost"> <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> </div>
<div class="row"> <div class="row">
@@ -55,8 +55,8 @@
<h4>Liabilities</h4> <h4>Liabilities</h4>
</div> </div>
<div class="col-4 amount"> <div class="col-4 amount">
<h4 *ngIf="priceSource === 'price'">{{-liabilityAccount.totalNativeBalancePrice | 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}}</h4> <h4 *ngIf="priceSource === 'cost'">{{-liabilityAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
</div> </div>
</div> </div>
<div class="row" *ngFor="let account of liabilityAccounts" [attr.depth]="account.depth"> <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> <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
</div> </div>
<div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice"> <div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice">
{{-account.totalNativeBalancePrice | currencyFormat:org.precision}} {{-account.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}
</div> </div>
<div class="col-4 amount" *ngIf="priceSource === 'cost' && account.totalNativeBalanceCost"> <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> </div>
<div class="row" depth="1"> <div class="row" depth="1">
@@ -76,8 +76,8 @@
<h4>Equity</h4> <h4>Equity</h4>
</div> </div>
<div class="col-4 amount"> <div class="col-4 amount">
<h4 *ngIf="priceSource === 'price'">{{-equityAccount.totalNativeBalancePrice | 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}}</h4> <h4 *ngIf="priceSource === 'cost'">{{-equityAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
</div> </div>
</div> </div>
<div class="row" *ngFor="let account of equityAccounts" [attr.depth]="account.depth"> <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> <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
</div> </div>
<div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice"> <div class="col-4 amount" *ngIf="priceSource === 'price' && account.totalNativeBalancePrice">
{{-account.totalNativeBalancePrice | currencyFormat:org.precision}} {{-account.totalNativeBalancePrice | currencyFormat:org.precision:org.currency}}
</div> </div>
<div class="col-4 amount" *ngIf="priceSource === 'cost' && account.totalNativeBalanceCost"> <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> </div>
</div> </div>

10
src/app/reports/income.html
View File

@@ -24,7 +24,7 @@
<h4>Income</h4> <h4>Income</h4>
</div> </div>
<div class="col-4 amount"> <div class="col-4 amount">
<h4>{{-incomeAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4> <h4>{{-incomeAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
</div> </div>
</div> </div>
<div class="row" *ngFor="let account of incomeAccounts" [attr.depth]="account.depth"> <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> <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
</div> </div>
<div class="col-4 amount" *ngIf="account.totalNativeBalanceCost"> <div class="col-4 amount" *ngIf="account.totalNativeBalanceCost">
{{-account.totalNativeBalanceCost | currencyFormat:org.precision}} {{-account.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}
</div> </div>
</div> </div>
<div class="row" depth="1"> <div class="row" depth="1">
@@ -41,7 +41,7 @@
<h4>Expenses</h4> <h4>Expenses</h4>
</div> </div>
<div class="col-4 amount"> <div class="col-4 amount">
<h4>{{expenseAccount.totalNativeBalanceCost | currencyFormat:org.precision}}</h4> <h4>{{expenseAccount.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}</h4>
</div> </div>
</div> </div>
<div class="row" *ngFor="let account of expenseAccounts" [attr.depth]="account.depth"> <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> <span *ngIf="!account.children.length"><a [routerLink]="'/accounts/' + account.id + '/transactions'">{{account.name | slice:0:30}}</a></span>
</div> </div>
<div class="col-4 amount" *ngIf="account.totalNativeBalanceCost"> <div class="col-4 amount" *ngIf="account.totalNativeBalanceCost">
{{account.totalNativeBalanceCost | currencyFormat:org.precision}} {{account.totalNativeBalanceCost | currencyFormat:org.precision:org.currency}}
</div> </div>
</div> </div>
<div class="row" depth="1"> <div class="row" depth="1">
@@ -58,7 +58,7 @@
<h4>Net Income</h4> <h4>Net Income</h4>
</div> </div>
<div class="col-4 amount"> <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> </div>
</div> </div>

30
src/app/shared/currency-format.pipe.ts
View File

@@ -1,7 +1,16 @@
import { Pipe, PipeTransform } from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
import { DecimalPipe } from '@angular/common'; 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 { export class CurrencyFormatPipe implements PipeTransform {
constructor(private decimalPipe: DecimalPipe) { constructor(private decimalPipe: DecimalPipe) {
} }
@@ -11,17 +20,12 @@ export class CurrencyFormatPipe implements PipeTransform {
return ''; return '';
} }
let prefix = amount < 0 ? '-' : ''; // 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, {
if(currency === 'USD') { style: "currency",
prefix += '$'; currency,
} minimumFractionDigits: precision,
signDisplay: "negative",
let minDigits = Math.min(2, precision); } as any).format(amount / Math.pow(10, precision));
return prefix +
this.decimalPipe.transform(
Math.abs(amount) / Math.pow(10, precision),
'1.' + minDigits + '-' + precision);
} }
} }