feat: edit, delete and enable/disable GL Account

Chart of Accounts:
  * Edit GL Account Component
  * Delete GL Account
  * Enable/Disable GL Account

src/app/accounting/accounting-routing.module.ts

@@ -18,6 +18,7 @@ import { ChartOfAccountsResolver } from './chart-of-accounts/chart-of-accounts.r
 import { CreateGlAccountComponent } from './chart-of-accounts/create-gl-account/create-gl-account.component';
 import { ViewGlAccountComponent } from './chart-of-accounts/view-gl-account/view-gl-account.component';
 import { ViewGlAccountResolver } from './chart-of-accounts/view-gl-account/view-gl-account.resolver';
+import { EditGlAccountComponent } from './chart-of-accounts/edit-gl-account/edit-gl-account.component';
 
 const routes: Routes = [
   Route.withShell([
@@ -103,11 +104,22 @@ const routes: Routes = [
             },
             {
               path: 'gl-accounts/view/:id',
-              component: ViewGlAccountComponent,
               data: { title: extract('View GL Account'), routeResolveBreadcrumb: ['glAccount', 'name'] },
               resolve: {
                 glAccount: ViewGlAccountResolver
-              }
+              },
+              runGuardsAndResolvers: 'always',
+              children: [
+                {
+                  path: '',
+                  component: ViewGlAccountComponent
+                },
+                {
+                  path: 'edit',
+                  component: EditGlAccountComponent,
+                  data: { title: extract('Edit GL Account'), breadcrumb: 'Edit', routeResolveBreadcrumb: false }
+                }
+              ]
             }
           ]
         }

src/app/accounting/accounting.module.ts

@@ -18,6 +18,7 @@ import { EditFinancialActivityMappingComponent } from './financial-activity-mapp
 import { ChartOfAccountsComponent } from './chart-of-accounts/chart-of-accounts.component';
 import { CreateGlAccountComponent } from './chart-of-accounts/create-gl-account/create-gl-account.component';
 import { ViewGlAccountComponent } from './chart-of-accounts/view-gl-account/view-gl-account.component';
+import { EditGlAccountComponent } from './chart-of-accounts/edit-gl-account/edit-gl-account.component';
 
 @NgModule({
   imports: [
@@ -41,7 +42,8 @@ import { ViewGlAccountComponent } from './chart-of-accounts/view-gl-account/view
     EditFinancialActivityMappingComponent,
     ChartOfAccountsComponent,
     CreateGlAccountComponent,
-    ViewGlAccountComponent
+    ViewGlAccountComponent,
+    EditGlAccountComponent
   ],
   entryComponents: [
     RevertTransactionComponent,

src/app/accounting/accounting.service.ts

@@ -113,4 +113,12 @@ export class AccountingService {
     return this.http.get(`/glaccounts/${glAccountId}`, { params: httpParams });
   }
 
+  updateGlAccount(glAccountId: number, glAccount: any) {
+    return this.http.put(`/glaccounts/${glAccountId}`, glAccount);
+  }
+
+  deleteGlAccount(glAccountId: number) {
+    return this.http.delete(`/glaccounts/${glAccountId}`);
+  }
+
 }

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.html

@@ -0,0 +1,74 @@
+<div class="container">
+
+  <mat-card>
+
+    <form [formGroup]="glAccountForm" (ngSubmit)="submit()">
+
+      <mat-card-content>
+
+        <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+          <mat-form-field fxFlex="48%">
+            <mat-select placeholder="Account Type" required formControlName="type">
+              <mat-option *ngFor="let accountType of accountTypeData" [value]="accountType.id">
+                {{ accountType.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <input matInput placeholder="Account Name" required formControlName="name">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-select placeholder="Account Usage" required formControlName="usage">
+              <mat-option *ngFor="let accountUsage of accountUsageData" [value]="accountUsage.id">
+                {{ accountUsage.value }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <input matInput placeholder="GL Code" required formControlName="glCode">
+          </mat-form-field>
+
+          <mat-form-field fxFlex="48%">
+            <mat-select placeholder="Parent" formControlName="parentId">
+              <mat-option *ngFor="let parent of parentData" [value]="parent.id">
+                {{ parent.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <mat-form-field fxFlex="28%">
+            <mat-select placeholder="Tag" formControlName="tagId">
+              <mat-option *ngFor="let tag of tagData" [value]="tag.id">
+                {{ tag.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <div fxFlex="18%" class="manualEntriesAllowedWrapper">
+            <mat-checkbox labelPosition="before" required formControlName="manualEntriesAllowed" class="manualEntriesAllowed">
+              Manual Entries Allowed
+            </mat-checkbox>
+          </div>
+
+          <mat-form-field fxFlex="98%">
+            <textarea matInput placeholder="Description" formControlName="description"></textarea>
+          </mat-form-field>
+
+        </div>
+
+      </mat-card-content>
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['/accounting/chart-of-accounts']">Cancel</button>
+        <button mat-raised-button color="primary">Submit</button>
+      </mat-card-actions>
+
+    </form>
+
+  </mat-card>
+
+</div>

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EditGlAccountComponent } from './edit-gl-account.component';
+
+describe('EditGlAccountComponent', () => {
+  let component: EditGlAccountComponent;
+  let fixture: ComponentFixture<EditGlAccountComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EditGlAccountComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EditGlAccountComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/accounting/chart-of-accounts/edit-gl-account/edit-gl-account.component.ts

@@ -0,0 +1,80 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { FormGroup, FormBuilder, Validators } from '@angular/forms';
+
+import { AccountingService } from '../../accounting.service';
+
+@Component({
+  selector: 'mifosx-edit-gl-account',
+  templateUrl: './edit-gl-account.component.html',
+  styleUrls: ['./edit-gl-account.component.scss']
+})
+export class EditGlAccountComponent implements OnInit {
+
+  glAccountForm: FormGroup;
+  glAccount: any;
+  accountTypeData: any;
+  accountUsageData: any;
+  parentData: any;
+  tagData: any;
+
+  constructor(private route: ActivatedRoute,
+              private formBuilder: FormBuilder,
+              private accountingService: AccountingService,
+              private router: Router) {
+    this.route.data.subscribe((data: { glAccount: any }) => {
+      this.glAccount = data.glAccount;
+    });
+  }
+
+  ngOnInit() {
+    this.createGlAccountForm();
+    this.setGLAccountForm();
+  }
+
+  createGlAccountForm() {
+    this.glAccountForm = this.formBuilder.group({
+      'type': ['', Validators.required],
+      'name': [this.glAccount.name, Validators.required],
+      'usage': [this.glAccount.usage.id, Validators.required],
+      'glCode': [this.glAccount.glCode, Validators.required],
+      'parentId': [this.glAccount.parentId],
+      'tagId': [this.glAccount.tagId.id],
+      'manualEntriesAllowed': [this.glAccount.manualEntriesAllowed, Validators.required],
+      'description': [this.glAccount.description]
+    });
+  }
+
+  setGLAccountForm() {
+    this.accountTypeData = this.glAccount.accountTypeOptions;
+    this.accountUsageData = this.glAccount.usageOptions;
+    this.glAccountForm.get('type').valueChanges.subscribe(accountTypeId => {
+      switch (accountTypeId) {
+        case 1: this.parentData = this.glAccount.assetHeaderAccountOptions;
+                this.tagData = this.glAccount.allowedAssetsTagOptions;
+        break;
+        case 2: this.parentData = this.glAccount.liabilityHeaderAccountOptions;
+                this.tagData = this.glAccount.allowedLiabilitiesTagOptions;
+        break;
+        case 3: this.parentData = this.glAccount.equityHeaderAccountOptions;
+                this.tagData = this.glAccount.allowedEquityTagOptions;
+        break;
+        case 4: this.parentData = this.glAccount.incomeHeaderAccountOptions;
+                this.tagData = this.glAccount.allowedIncomeTagOptions;
+        break;
+        case 5: this.parentData = this.glAccount.expenseHeaderAccountOptions;
+                this.tagData = this.glAccount.allowedExpensesTagOptions;
+        break;
+      }
+    });
+    this.glAccountForm.get('type').setValue(this.glAccount.type.id);
+  }
+
+  submit() {
+    this.accountingService.updateGlAccount(this.glAccount.id, this.glAccountForm.value)
+      .subscribe((response: any) => {
+        this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/view', response.resourceId]);
+      });
+  }
+
+}

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.html

@@ -5,10 +5,10 @@
   <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>
-  <button mat-raised-button color="warn" *ngIf="!glAccount.disabled">
+  <button mat-raised-button color="warn" *ngIf="!glAccount.disabled" (click)="changeGlAccountState()">
     <mat-icon>lock</mat-icon>&nbsp;&nbsp;Disable
   </button>
-  <button mat-raised-button color="accent" *ngIf="glAccount.disabled">
+  <button mat-raised-button color="accent" *ngIf="glAccount.disabled" (click)="changeGlAccountState()">
     <mat-icon>lock_open</mat-icon>&nbsp;&nbsp;Enable
   </button>
   <button mat-raised-button color="warn" (click)="deleteGlAccount()">

src/app/accounting/chart-of-accounts/view-gl-account/view-gl-account.component.ts

@@ -1,5 +1,9 @@
 import { Component, OnInit } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material';
+
+import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+import { AccountingService } from '../../accounting.service';
 
 @Component({
   selector: 'mifosx-view-gl-account',
@@ -10,7 +14,10 @@ export class ViewGlAccountComponent implements OnInit {
 
   glAccount: any;
 
-  constructor(private route: ActivatedRoute) {
+  constructor(private route: ActivatedRoute,
+              private accountingService: AccountingService,
+              private router: Router,
+              public dialog: MatDialog) {
     this.route.data.subscribe((data: { glAccount: any }) => {
       this.glAccount = data.glAccount;
     });
@@ -19,4 +26,26 @@ export class ViewGlAccountComponent implements OnInit {
   ngOnInit() {
   }
 
+  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}` }
+    });
+    deleteGlAccountDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.accountingService.deleteGlAccount(this.glAccount.id)
+          .subscribe(() => {
+            this.router.navigate(['/accounting/chart-of-accounts']);
+          });
+      }
+    });
+  }
+
+  changeGlAccountState() {
+    this.accountingService.updateGlAccount(this.glAccount.id, { disabled: !this.glAccount.disabled })
+      .subscribe((response: any) => {
+        this.glAccount.disabled = response.changes.disabled;
+      });
+  }
+
 }