refractor: accounting module (#300)

* Refractor components.
* Add resolvers.
* Add relative router links.
* Replace mat-icons by font-awesome icons.
* Add comments.

Fixes: #298
This commit is contained in:
Abhay Chawla
2018-08-19 22:49:48 +05:30
committed by GitHub
parent 598f239251
commit 6e552d72eb
114 changed files with 3760 additions and 1432 deletions
@@ -1,18 +1,23 @@
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<button mat-raised-button color="primary" *ngIf="glAccount.usage.value === 'HEADER'" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/create']" [queryParams]="{ parent: glAccount.id, accountType: glAccount.type.id }">
<mat-icon>add</mat-icon>&nbsp;&nbsp;Subledger Account
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Subledger Account
</button>
<button mat-raised-button color="primary" [routerLink]="['/accounting/chart-of-accounts/gl-accounts/view', glAccount.id, 'edit']">
<mat-icon>edit</mat-icon>&nbsp;&nbsp;Edit
<button mat-raised-button color="primary" [routerLink]="['edit']">
<fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
Edit
</button>
<button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
<mat-icon>lock</mat-icon>&nbsp;&nbsp;Disable
<fa-icon icon="lock"></fa-icon>&nbsp;&nbsp;
Disable
</button>
<button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
<mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Enable
<fa-icon icon="lock-open"></fa-icon>&nbsp;&nbsp;
Enable
</button>
<button mat-raised-button color="warn" (click)="deleteGlAccount()">
<mat-icon>delete</mat-icon>&nbsp;&nbsp;Delete
<fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
Delete
</button>
</div>
@@ -29,7 +34,7 @@
</div>
<div fxFlex="50%">
{{ glAccount.type.value }}
{{ glAccount.type?.value }}
</div>
<div fxFlex="50%" class="header">
@@ -40,19 +45,19 @@
{{ glAccount.glCode }}
</div>
<div fxFlex="50%" class="header">
<div fxFlex="50%" class="header" *ngIf="glAccount.parent">
Parent Account Name
</div>
<div fxFlex="50%">
<div fxFlex="50%" *ngIf="glAccount.parent">
{{ glAccount.parent.name }}
</div>
<div fxFlex="50%" class="header">
<div fxFlex="50%" class="header" *ngIf="glAccount.tagId.id">
Tag
</div>
<div fxFlex="50%">
<div fxFlex="50%" *ngIf="glAccount.tagId.id">
{{ glAccount.tagId.name }}
</div>
@@ -61,7 +66,7 @@
</div>
<div fxFlex="50%">
{{ glAccount.usage.value }}
{{ glAccount.usage?.value }}
</div>
<div fxFlex="50%" class="header">
@@ -72,11 +77,11 @@
{{ glAccount.manualEntriesAllowed }}
</div>
<div fxFlex="50%" class="header">
<div fxFlex="50%" class="header" *ngIf="glAccount.description">
Description
</div>
<div fxFlex="50%">
<div fxFlex="50%" *ngIf="glAccount.description">
{{ glAccount.description }}
</div>
@@ -1,14 +1,14 @@
.container {
max-width: 37rem;
}
.content {
div {
margin: 1rem 0;
word-wrap: break-word;
}
.content {
div {
margin: 1rem 0;
word-wrap: break-word;
.header {
font-weight: 500;
&.header {
font-weight: 500;
}
}
}
}
@@ -1,10 +1,17 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material';
/** Custom Components */
import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
/** Custom Services */
import { AccountingService } from '../../accounting.service';
/**
* View gl account component.
*/
@Component({
selector: 'mifosx-view-gl-account',
templateUrl: './view-gl-account.component.html',
@@ -12,22 +19,32 @@ import { AccountingService } from '../../accounting.service';
})
export class ViewGlAccountComponent implements OnInit {
/** GL Account. */
glAccount: any;
constructor(private route: ActivatedRoute,
private accountingService: AccountingService,
/**
* Retrieves the gl account data from `resolve`.
* @param {AccountingService} accountingService Accounting Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {MatDialog} dialog Dialog reference.
*/
constructor(private accountingService: AccountingService,
private route: ActivatedRoute,
private router: Router,
public dialog: MatDialog) {
this.route.data.subscribe((data: { glAccount: any }) => {
this.glAccount = data.glAccount;
this.route.data.subscribe((data: { glAccountAndChartOfAccountsTemplate: any }) => {
this.glAccount = data.glAccountAndChartOfAccountsTemplate;
});
}
ngOnInit() {
}
/**
* Deletes the gl account and redirects to chart of accounts.
*/
deleteGlAccount() {
// TODO: (Validation) gl account cannot be deleted if it has transactions logged against it
const deleteGlAccountDialogRef = this.dialog.open(DeleteDialogComponent, {
data: { deleteContext: `gl account ${this.glAccount.id}` }
});
@@ -41,6 +58,9 @@ export class ViewGlAccountComponent implements OnInit {
});
}
/**
* Changes state of gl account. (enabled/disabled)
*/
changeGlAccountState() {
this.accountingService.updateGlAccount(this.glAccount.id, { disabled: !this.glAccount.disabled })
.subscribe((response: any) => {
@@ -1,38 +0,0 @@
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import { AccountingService } from '../../accounting.service';
@Injectable()
export class ViewGlAccountResolver implements Resolve<Object> {
constructor(private accountingService: AccountingService) {}
resolve(route: ActivatedRouteSnapshot): Observable<any> {
const id = route.paramMap.get('id');
return this.accountingService.getGlAccount(id, true).pipe(map((glAccountData: any) => {
let accountOptions = [];
switch (glAccountData.type.value) {
case 'ASSET': accountOptions = glAccountData.assetHeaderAccountOptions;
break;
case 'EQUITY': accountOptions = glAccountData.equityHeaderAccountOptions;
break;
case 'EXPENSE': accountOptions = glAccountData.expenseHeaderAccountOptions;
break;
case 'INCOME': accountOptions = glAccountData.incomeHeaderAccountOptions;
break;
case 'LIABILITY': accountOptions = glAccountData.liabilityHeaderAccountOptions;
break;
}
glAccountData.parent = accountOptions.find((accountOption: any) => {
return accountOption.id === glAccountData.parentId;
});
return glAccountData;
}));
}
}