Merge pull request #65 from alokmenghrajani/alok/fix_form_group_bug

Fixes <label> for attribute

package.json

@@ -37,7 +37,7 @@
     "zone.js": "~0.8.26"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.8.0",
+    "@angular-devkit/build-angular": "^0.13.10",
     "@angular/cli": "~6.2.5",
     "@angular/compiler-cli": "^6.1.0",
     "@angular/language-service": "^6.1.0",

src/app/app.component.html

@@ -71,7 +71,7 @@
   </div>
 </div>
 <div class="footer">
-  <p>Copyright &copy; 2019 Open Accounting, LLC<br>
+  <p>Copyright &copy; 2020 Open Accounting, LLC<br>
   <a href="/tou">Terms of Use</a> | <a href="/privacy-policy">Privacy Policy</a></p>
 </div>
 

src/app/core/account.service.ts

@@ -23,6 +23,7 @@ import 'rxjs/add/operator/filter';
 import 'rxjs/add/operator/debounceTime';
 import 'rxjs/add/operator/take';
 import { Util } from '../shared/util';
+import { businessAccounts } from '../fixtures/businessAccounts';
 import { personalAccounts } from '../fixtures/personalAccounts';
 import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
 
@@ -62,7 +63,7 @@ export class AccountService {
 
         if(options.createDefaultAccounts) {
           this.getAccountTree().take(1).switchMap(tree => {
-            return this.createDefaultAccounts(tree);
+            return this.createDefaultAccounts(tree, options.createDefaultAccounts);
           }).subscribe(accounts => {
             log.debug('Created default accounts');
             log.debug(accounts);
@@ -590,7 +591,7 @@ export class AccountService {
     return this.apiService.deleteAccount(id);
   }
 
-  createDefaultAccounts(tree: AccountTree): Observable<any> {
+  createDefaultAccounts(tree: AccountTree, type: string): Observable<any> {
     let assetAccount = tree.getAccountByName('Assets', 1);
     let equityAccount = tree.getAccountByName('Equity', 1);
     let liabilityAccount = tree.getAccountByName('Liabilities', 1);
@@ -608,10 +609,10 @@ export class AccountService {
       'Expenses': [expenseAccount.id, true]
     };
 
-    let newAccounts;
+    let newAccounts = type === 'business' ? businessAccounts : personalAccounts;
 
     try {
-      newAccounts = personalAccounts.map(data => {
+      newAccounts = newAccounts.map(data => {
         let id = Util.newGuid();
         let [parentId, debitBalance] = accountNameMap[data.parent];
 

src/app/core/org.service.ts

@@ -37,7 +37,7 @@ export class OrgService {
     return this.apiService.getOrgs();
   }
 
-  newOrg(org: Org, createDefaultAccounts: boolean): Observable<Org> {
+  newOrg(org: Org, createDefaultAccounts: string): Observable<Org> {
     let sessionOptions = new SessionOptions({
       createDefaultAccounts: createDefaultAccounts
     });

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">
@@ -59,10 +59,11 @@
           {{recentTx.tx.date | datetz:"M/D":org.timezone}}
         </div>
         <div class="col-5 col-md-6 description">
-          {{recentTx.tx.description}}
+          <div class="primary">{{recentTx.tx.description}}</div>
+          <div class="additional">{{recentTx.account.fullName}}</div>
         </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">

src/app/dashboard/dashboard.scss

@@ -41,6 +41,19 @@
   .expanded .hidden {
     display: flex
   }
+  .row {
+    padding-bottom: 1em;
+    .description {
+      .primary:empty::after {
+        content: ".";
+        visibility: hidden;
+      }
+      .additional {
+        font-size: small;
+        color: $black;
+      }
+    }
+  }
 }
 
 @media (max-width: 767px) {

src/app/fixtures/businessAccounts.ts

@@ -0,0 +1,123 @@
+export const businessAccounts: any =
+[
+  {
+    "name": "Checking",
+    "parent": "Assets"
+  },
+  {
+    "name": "Petty Cash",
+    "parent": "Assets"
+  },
+  {
+    "name": "Accounting",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Accounts Receivable",
+    "parent": "Assets"
+  },
+  {
+    "name": "Capital",
+    "parent": "Equity"
+  },
+  {
+    "name": "Drawing",
+    "parent": "Equity"
+  },
+  {
+    "name": "Accounts Payable",
+    "parent": "Liabilities"
+  },
+  {
+    "name": "Credit Card",
+    "parent": "Liabilities"
+  },
+  {
+    "name": "Auto",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Bank Fees",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Computer Equipment",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Cost of Goods Sold",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Dining / Entertainment",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Internet",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Legal",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Licenses / Fees",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Marketing",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Miscellaneous",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Office Furniture",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Office Rent",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Office Supplies",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Payment Processing",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Payroll",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Phone",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Shipping",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Software",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Tax Preparation",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Travel",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Web Domains / Hosting",
+    "parent": "Expenses"
+  },
+  {
+    "name": "Sales",
+    "parent": "Income"
+  }
+];

src/app/org/neworg.html

@@ -41,9 +41,20 @@
             </option>
           </select>
       </div>
+    <p>Create default accounts (can be customized later)</p>
     <div class="form-group">
-      <label for="createDefaultAccounts">Create default accounts<br>(can be customized later)</label>
+      <div class="form-check">
-      <input formControlName="createDefaultAccounts" id="createDefaultAccounts" type="checkbox" class="form-control" />
+        <input formControlName="createDefaultAccounts" id="createDefaultAccounts1" type="radio" class="form-check-input" value="" />
+        <label for="createDefaultAccounts1" class="form-check-label">None</label>
+      </div>
+      <div class="form-check">
+        <input formControlName="createDefaultAccounts" id="createDefaultAccounts2" type="radio" class="form-check-input" value="business" />
+        <label for="createDefaultAccounts2" class="form-check-label">Business accounts</label>
+      </div>
+      <div class="form-check">
+        <input formControlName="createDefaultAccounts" id="createDefaultAccounts3" type="radio" class="form-check-input" value="personal" />
+        <label for="createDefaultAccounts3" class="form-check-label">Personal accounts</label>
+      </div>
     </div>
     <p *ngIf="error" class="error">
       {{error.message}}

src/app/org/neworg.ts

@@ -39,7 +39,7 @@ export class NewOrgPage {
       'currency': ['USD', Validators.required],
       'precision': [2, Validators.required],
       'timezone': [this.defaultTz, Validators.required],
-      'createDefaultAccounts': [true, Validators.required]
+      'createDefaultAccounts': ['business']
     });
 
     this.joinOrgForm = fb.group({

src/app/org/org.html

@@ -148,10 +148,19 @@
         </select>
       </div>
     </div>
-    <div class="form-group row">
+    <p>Create default accounts (can be customized later)</p>
-      <label for="createDefaultAccounts" class="col-sm-3 col-form-label">Create default accounts<br>(can be customized later)</label>
+    <div class="form-group">
-      <div class="col-sm-9">
+      <div class="form-check">
-        <input formControlName="createDefaultAccounts" id="createDefaultAccounts" type="checkbox" class="form-control" />
+        <input formControlName="createDefaultAccounts" id="createDefaultAccounts1" type="radio" class="form-check-input" value="" />
+        <label for="createDefaultAccounts1" class="form-check-label">None</label>
+      </div>
+      <div class="form-check">
+        <input formControlName="createDefaultAccounts" id="createDefaultAccounts2" type="radio" class="form-check-input" value="business" />
+        <label for="createDefaultAccounts2" class="form-check-label">Business accounts</label>
+      </div>
+      <div class="form-check">
+        <input formControlName="createDefaultAccounts" id="createDefaultAccounts3" type="radio" class="form-check-input" value="personal" />
+        <label for="createDefaultAccounts3" class="form-check-label">Personal accounts</label>
       </div>
     </div>
     <p *ngIf="newOrgError" class="error">{{newOrgError.message}}</p>

src/app/org/org.ts

@@ -72,7 +72,7 @@ export class OrgPage {
       'currency': ['', Validators.required],
       'precision': [null, Validators.required],
       'timezone': [this.defaultTz, Validators.required],
-      'createDefaultAccounts': [true, Validators.required]
+      'createDefaultAccounts': ['']
     });
   }
 
@@ -95,7 +95,7 @@ export class OrgPage {
         currency: this.currentOrg.currency,
         precision: this.currentOrg.precision,
         timezone: this.defaultTz,
-        createDefaultAccounts: true
+        createDefaultAccounts: ''
       }
     );
 

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 === '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 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 === '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 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 === '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 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>

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>

src/app/shared/currency-format.pipe.ts

@@ -1,6 +1,15 @@
 import { Pipe, PipeTransform } from '@angular/core';
 import { DecimalPipe } from '@angular/common';
 
+// 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 ? '-' : '';
+    // 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);
   }
 }

src/app/shared/session-options.ts

@@ -1,5 +1,5 @@
 export class SessionOptions {
-  createDefaultAccounts: boolean;
+  createDefaultAccounts: string;
   constructor(options: any = {}) {
     this.createDefaultAccounts = options.createDefaultAccounts;
   }

src/app/shared/transaction.ts

@@ -11,8 +11,8 @@ export class Transaction {
   splits: Split[];
   constructor(options: any = {}) {
     this.id = options.id;
-    this.orgId = options.id;
+    this.orgId = options.orgId;
-    this.userId = options.id;
+    this.userId = options.userId;
     this.date = options.date ? new Date(options.date) : null;
     this.inserted = options.inserted ? new Date(options.inserted) : null;
     this.updated = options.updated ? new Date(options.updated) : null;