make easier to understand labels for debits and credits

src/app/shared/debit-credit.pipe.ts

@@ -0,0 +1,40 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { Account } from './account';
+
+@Pipe({name: 'debitCredit'})
+export class DebitCreditPipe implements PipeTransform {
+  debitNames: any;
+  creditNames: any;
+
+
+  constructor() {
+    this.debitNames = {
+      'Assets': 'Deposit',
+      'Liabilities': 'Payment',
+      'Equity': 'Decrease',
+      'Income': 'Deduction',
+      'Expenses': 'Expense'
+    };
+
+    this.creditNames = {
+      'Assets': 'Withdrawal',
+      'Liabilities': 'Charge',
+      'Equity': 'Increase',
+      'Income': 'Income',
+      'Expenses': 'Refund'
+    };
+  }
+
+  transform(account: Account, type: string): string {
+    if(!account) {
+      return type === 'credit' ? 'Credit' : 'Debit';
+    }
+
+    let parent = account.fullName.split(':')[0];
+    if(type === 'credit') {
+      return this.creditNames[parent];
+    } else {
+      return this.debitNames[parent];
+    }
+  }
+}

src/app/shared/shared.module.ts

@@ -4,11 +4,12 @@ import { CurrencyFormatPipe } from './currency-format.pipe';
 import { AccountNamePipe } from './account-name.pipe';
 import { AccountBalancePipe } from './account-balance.pipe';
 import { DateTzPipe } from './datetz.pipe';
+import { DebitCreditPipe } from './debit-credit.pipe';
 
 @NgModule({
   imports: [],
-  declarations: [CurrencyFormatPipe, AccountNamePipe, AccountBalancePipe, DateTzPipe],
-  exports: [CurrencyFormatPipe, AccountNamePipe, AccountBalancePipe, DateTzPipe],
+  declarations: [CurrencyFormatPipe, AccountNamePipe, AccountBalancePipe, DateTzPipe, DebitCreditPipe],
+  exports: [CurrencyFormatPipe, AccountNamePipe, AccountBalancePipe, DateTzPipe, DebitCreditPipe],
   providers: [DecimalPipe, CurrencyFormatPipe]
 })
 export class SharedModule { }

src/app/transaction/list.html

@@ -19,10 +19,10 @@
             <span>Transfer</span>
           </div>
           <div class="col custom-3">
-            <span>Debit</span>
+            <span>{{account | debitCredit:'debit'}}</span>
           </div>
           <div class="col custom-3">
-            <span>Credit</span>
+            <span>{{account | debitCredit:'credit'}}</span>
           </div>
           <div class="col custom-3">
             <span>Balance</span>