refractor: accounting module (#300)

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

Fixes: #298

src/app/accounting/closing-entries/closing-entries.component.html

@@ -1,12 +1,14 @@
 <div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/closing-entries/create']">
-    <mat-icon>add</mat-icon>&nbsp;&nbsp;Create Closure
+  <button mat-raised-button color="primary" [routerLink]="['create']">
+    <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+    Create Closure
   </button>
 </div>
 
-<div class="container" fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+<div class="container" fxLayout="row">
   <mat-form-field fxFlex>
-    <input matInput placeholder="Office Name" [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
+    <mat-label>Office Name</mat-label>
+    <input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
   </mat-form-field>
 </div>
 
@@ -44,7 +46,7 @@
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['/accounting/closing-entries/view', row.id]"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="['view', row.id]"></tr>
 
     </table>
 

src/app/accounting/closing-entries/closing-entries.component.ts

@@ -1,10 +1,15 @@
+/** Angular Imports */
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { MatPaginator, MatSort, MatTableDataSource } from '@angular/material';
 import { FormControl } from '@angular/forms';
-import { startWith, map, tap } from 'rxjs/operators';
+import { ActivatedRoute } from '@angular/router';
 
-import { AccountingService } from '../accounting.service';
+/** rxjs Imports */
+import { startWith, map } from 'rxjs/operators';
 
+/**
+ * Closing entries component.
+ */
 @Component({
   selector: 'mifosx-closing-entries',
   templateUrl: './closing-entries.component.html',
@@ -12,52 +17,84 @@ import { AccountingService } from '../accounting.service';
 })
 export class ClosingEntriesComponent implements OnInit {
 
+  /** Columns to be displayed in closing entries table. */
   displayedColumns: string[] = ['officeName', 'closingDate', 'comments', 'createdByUsername'];
-  dataSource: any;
-
+  /** Data source for closing entries table. */
+  dataSource: MatTableDataSource<any>;
+  /** Office name filter form control. */
   officeName = new FormControl();
+  /** Office data. */
   officeData: any;
+  /** Filtered office data for autocomplete. */
   filteredOfficeData: any;
+  /** GL Account closure data. */
+  glAccountClosureData: any;
 
+  /** Paginator for closing entries table. */
   @ViewChild(MatPaginator) paginator: MatPaginator;
+  /** Sorter for closing entries table. */
   @ViewChild(MatSort) sort: MatSort;
 
-  constructor(private accountingService: AccountingService) { }
-
-  ngOnInit() {
-    this.getOffices();
-    this.applyFilter();
-    this.getAccountingClosures();
+  /**
+   * Retrieves the offices and gl account closures data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+  constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe((data: {
+      offices: any,
+      glAccountClosures: any
+    }) => {
+      this.officeData = data.offices;
+      this.glAccountClosureData = data.glAccountClosures;
+    });
   }
 
+  /**
+   * Sets the filter and closing entries table.
+   */
+  ngOnInit() {
+    this.applyFilter();
+    this.setFilteredOffices();
+    this.setAccountingClosures();
+  }
+
+  /**
+   * Filters data in closing entries table based on office name.
+   */
   applyFilter() {
     this.officeName.valueChanges.subscribe((filterValue: string) => {
       this.dataSource.filter = filterValue.trim().toLowerCase();
     });
   }
 
-  getAccountingClosures() {
-    this.accountingService.getAccountingClosures().subscribe((glAccountClosureData: any) => {
-      this.dataSource = new MatTableDataSource(glAccountClosureData);
-      this.dataSource.paginator = this.paginator;
-      this.dataSource.sort = this.sort;
-    });
+  /**
+   * Initializes the data source, paginator and sorter for closing entries table.
+   */
+  setAccountingClosures() {
+    this.dataSource = new MatTableDataSource(this.glAccountClosureData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
   }
 
-  getOffices() {
-    this.accountingService.getOffices().subscribe(officeData => {
-      this.officeData = officeData;
-      this.filteredOfficeData = this.officeName.valueChanges
-      .pipe(
-        startWith(''),
-        map((office: any) => typeof office === 'string' ? office : office.name),
-        map((officeName: string) => officeName ? this.filterOfficeAutocompleteData(this.officeData, officeName) : this.officeData)
-      );
-    });
+  /**
+   * Sets filtered offices for autocomplete.
+   */
+  setFilteredOffices() {
+    this.filteredOfficeData = this.officeName.valueChanges
+    .pipe(
+      startWith(''),
+      map((office: any) => typeof office === 'string' ? office : office.name),
+      map((officeName: string) => officeName ? this.filterOfficeAutocompleteData(officeName) : this.officeData)
+    );
   }
 
-  private filterOfficeAutocompleteData(officeData: any, officeName: string): any {
-    return officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
+  /**
+   * Filters offices.
+   * @param {string} officeName Office name to filter office by.
+   * @returns {any} Filtered offices.
+   */
+  private filterOfficeAutocompleteData(officeName: string): any {
+    return this.officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
   }
 
 }

src/app/accounting/closing-entries/closing-entries.resolver.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountingService } from '../accounting.service';
+
+/**
+ * Closing entries data resolver.
+ */
+@Injectable()
+export class ClosingEntriesResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the gl account closures data.
+   * @returns {Observable<any>}
+   */
+  resolve(): Observable<any> {
+    return this.accountingService.getAccountingClosures();
+  }
+
+}

src/app/accounting/closing-entries/closing-entry.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { AccountingService } from '../accounting.service';
+
+/**
+ * Closing entry data resolver.
+ */
+@Injectable()
+export class ClosingEntryResolver implements Resolve<Object> {
+
+  /**
+   * @param {AccountingService} accountingService Accounting service.
+   */
+  constructor(private accountingService: AccountingService) {}
+
+  /**
+   * Returns the gl account closure data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const glAccountClosureId = route.paramMap.get('id');
+    return this.accountingService.getAccountingClosure(glAccountClosureId);
+  }
+
+}

src/app/accounting/closing-entries/create-closure/create-closure.component.html

@@ -9,21 +9,30 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-select placeholder="Office" required formControlName="officeId">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
             </mat-select>
+            <mat-error *ngIf="accountingClosureForm.controls.officeId.hasError('required')">
+              Office is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" placeholder="Closing Date" required formControlName="closingDate">
+            <mat-label>Closing Date</mat-label>
+            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
+            <mat-error *ngIf="accountingClosureForm.controls.closingDate.hasError('required')">
+              Closing Date is <strong>required</strong>
+            </mat-error>
           </mat-form-field>
 
           <mat-form-field>
-            <textarea matInput placeholder="Comments" formControlName="comments"></textarea>
+            <mat-label>Comments</mat-label>
+            <textarea matInput formControlName="comments"></textarea>
           </mat-form-field>
 
         </div>
@@ -31,8 +40,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/closing-entries']">Cancel</button>
-        <button mat-raised-button color="primary">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!accountingClosureForm.valid">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/closing-entries/create-closure/create-closure.component.ts

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
-import { Router } from '@angular/router';
+import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * Create closure component.
+ */
 @Component({
   selector: 'mifosx-create-closure',
   templateUrl: './create-closure.component.html',
@@ -11,22 +16,41 @@ import { AccountingService } from '../../accounting.service';
 })
 export class CreateClosureComponent implements OnInit {
 
-  // TODO: Validations, Hints
-
+  /** Minimum closing date allowed. */
   minDate = new Date(2000, 0, 1);
+  /** Maximum closing date allowed. */
   maxDate = new Date();
+  /** Accounting closure form. */
   accountingClosureForm: FormGroup;
+  /** Office data. */
   officeData: any;
 
+  /**
+   * Retrieves the offices data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
   constructor(private formBuilder: FormBuilder,
               private accountingService: AccountingService,
-              private router: Router) { }
-
-  ngOnInit() {
-    this.createAccountingClosureForm();
-    this.getOffices();
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { offices: any }) => {
+      this.officeData = data.offices;
+    });
   }
 
+  /**
+   * Creates the accounting closure form.
+   */
+  ngOnInit() {
+    this.createAccountingClosureForm();
+  }
+
+  /**
+   * Creates the accounting closure form.
+   */
   createAccountingClosureForm() {
     this.accountingClosureForm = this.formBuilder.group({
       'officeId': ['', Validators.required],
@@ -35,20 +59,29 @@ export class CreateClosureComponent implements OnInit {
     });
   }
 
-  getOffices() {
-    this.accountingService.getOffices().subscribe(officeData => {
-      this.officeData = officeData;
-    });
-  }
-
+  /**
+   * Submits the accounting closure form and creates accounting closure,
+   * if successful redirects to view created closure.
+   */
   submit() {
     const accountingClosure = this.accountingClosureForm.value;
     // TODO: Update once language and date settings are setup
     accountingClosure.locale = 'en';
-    accountingClosure.dateFormat = 'dd MMMM yyyy';
-    accountingClosure.closingDate = '4 August 2018';
+    accountingClosure.dateFormat = 'yyyy-MM-dd';
+    if (accountingClosure.closingDate instanceof Date) {
+      let day = accountingClosure.closingDate.getDate();
+      let month = accountingClosure.closingDate.getMonth() + 1;
+      const year = accountingClosure.closingDate.getFullYear();
+      if (day < 10) {
+        day = `0${day}`;
+      }
+      if (month < 10) {
+        month = `0${month}`;
+      }
+      accountingClosure.closingDate = `${year}-${month}-${day}`;
+    }
     this.accountingService.createAccountingClosure(accountingClosure).subscribe((response: any) => {
-      this.router.navigate(['/accounting/closing-entries/view', response.resourceId]);
+      this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
     });
   }
 

src/app/accounting/closing-entries/edit-closure/edit-closure.component.html

@@ -9,7 +9,8 @@
         <div fxLayout="column">
 
           <mat-form-field>
-            <mat-select placeholder="Office" required formControlName="officeId">
+            <mat-label>Office</mat-label>
+            <mat-select required formControlName="officeId">
               <mat-option *ngFor="let office of officeData" [value]="office.id">
                 {{ office.name }}
               </mat-option>
@@ -17,13 +18,15 @@
           </mat-form-field>
 
           <mat-form-field>
-            <input matInput [matDatepicker]="closingDatePicker" placeholder="Closing Date" required formControlName="closingDate">
+            <mat-label>Closing Date</mat-label>
+            <input matInput [matDatepicker]="closingDatePicker" required formControlName="closingDate">
             <mat-datepicker-toggle matSuffix [for]="closingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closingDatePicker></mat-datepicker>
           </mat-form-field>
 
           <mat-form-field>
-            <textarea matInput placeholder="Comments" formControlName="comments"></textarea>
+            <mat-label>Comments</mat-label>
+            <textarea matInput formControlName="comments"></textarea>
           </mat-form-field>
 
         </div>
@@ -31,8 +34,8 @@
       </mat-card-content>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['/accounting/closing-entries/view', accountingClosure?.id]">Cancel</button>
-        <button mat-raised-button color="primary">Submit</button>
+        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="accountingClosureForm.pristine">Submit</button>
       </mat-card-actions>
 
     </form>

src/app/accounting/closing-entries/edit-closure/edit-closure.component.ts

@@ -1,9 +1,14 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
 
+/**
+ * Edit closure component.
+ */
 @Component({
   selector: 'mifosx-edit-closure',
   templateUrl: './edit-closure.component.html',
@@ -11,35 +16,40 @@ import { AccountingService } from '../../accounting.service';
 })
 export class EditClosureComponent implements OnInit {
 
-  // TODO: Update once language and date settings are setup
-
+  /** Accounting closure form. */
   accountingClosureForm: FormGroup;
-  accountingClosureId: number;
-  accountingClosure: any;
+  /** GL Account closure. */
+  glAccountClosure: any;
+  /** Office data. */
   officeData: any;
 
+  /**
+   * Retrieves the gl account closure data from `resolve`.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {AccountingService} accountingService Accounting Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   */
   constructor(private formBuilder: FormBuilder,
               private accountingService: AccountingService,
-              private router: Router,
-              private route: ActivatedRoute) { }
+              private route: ActivatedRoute,
+              private router: Router) {
+    this.route.data.subscribe((data: { glAccountClosure: any }) => {
+      this.glAccountClosure = data.glAccountClosure;
+    });
+  }
 
+  /**
+   * Creates and sets accounting closure form.
+   */
   ngOnInit() {
-    this.accountingClosureId = Number(this.route.snapshot.paramMap.get('id'));
     this.createAccountingClosureForm();
-    this.getAccountingClosure();
-    this.getOffices();
-  }
-
-  getAccountingClosure() {
-    this.accountingService.getAccountingClosure(this.accountingClosureId)
-      .subscribe((accountingClosure: any) => {
-        this.accountingClosure = accountingClosure;
-        this.accountingClosureForm.get('officeId').setValue(this.accountingClosure.officeId);
-        this.accountingClosureForm.get('closingDate').setValue(new Date());
-        this.accountingClosureForm.get('comments').setValue(this.accountingClosure.comments);
-      });
+    this.setAccountingClosure();
   }
 
+  /**
+   * Creates accounting closure form.
+   */
   createAccountingClosureForm() {
     this.accountingClosureForm = this.formBuilder.group({
       'officeId': [{ value: '', disabled: true }, Validators.required],
@@ -48,16 +58,26 @@ export class EditClosureComponent implements OnInit {
     });
   }
 
-  getOffices() {
-    this.accountingService.getOffices().subscribe(officeData => {
-      this.officeData = officeData;
-    });
+  /**
+   * Sets accounting closure form.
+   */
+  setAccountingClosure() {
+    this.officeData = [{ id: this.glAccountClosure.officeId, name: this.glAccountClosure.officeName }];
+    this.accountingClosureForm.get('officeId').setValue(this.glAccountClosure.officeId);
+    this.accountingClosureForm.get('closingDate').setValue(new Date(this.glAccountClosure.closingDate));
+    this.accountingClosureForm.get('comments').setValue(this.glAccountClosure.comments);
   }
 
+
+  /**
+   * Submits the accounting closure form and updates accounting closure,
+   * if successful redirects to view updated closure.
+   */
   submit() {
-    this.accountingService.updateAccountingClosure(this.accountingClosureId, { comments: this.accountingClosureForm.value.comments })
+    this.accountingService.updateAccountingClosure(this.glAccountClosure.id,
+      { comments: this.accountingClosureForm.value.comments })
       .subscribe((response: any) => {
-        this.router.navigate(['/accounting/closing-entries/view', response.resourceId]);
+        this.router.navigate(['../../', response.resourceId], { relativeTo: this.route });
       });
   }
 

src/app/accounting/closing-entries/view-closure/view-closure.component.html

@@ -1,13 +1,15 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" [routerLink]="['/accounting/closing-entries/view', accountingClosure?.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" (click)="deleteAccountingClosure()">
-    <mat-icon>delete</mat-icon>&nbsp;&nbsp;Delete
+    <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+    Delete
   </button>
 </div>
 
-<div class="container" *ngIf="accountingClosure">
+<div class="container" *ngIf="glAccountClosure">
 
   <mat-card>
 
@@ -20,7 +22,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.officeName }}
+          {{ glAccountClosure.officeName }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -28,7 +30,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.closingDate }}
+          {{ glAccountClosure.closingDate }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -36,7 +38,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.createdByUsername }}
+          {{ glAccountClosure.createdByUsername }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -44,7 +46,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.lastUpdatedByUsername }}
+          {{ glAccountClosure.lastUpdatedByUsername }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -52,7 +54,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.lastUpdatedDate }}
+          {{ glAccountClosure.lastUpdatedDate }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -60,7 +62,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.createdDate }}
+          {{ glAccountClosure.createdDate }}
         </div>
 
         <div fxFlex="50%" class="header">
@@ -68,7 +70,7 @@
         </div>
 
         <div fxFlex="50%">
-          {{ accountingClosure.comments }}
+          {{ glAccountClosure.comments }}
         </div>
 
       </div>

src/app/accounting/closing-entries/view-closure/view-closure.component.scss

@@ -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;
+      }
+    }
   }
 }

src/app/accounting/closing-entries/view-closure/view-closure.component.ts

@@ -1,10 +1,17 @@
+/** Angular Imports */
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { MatDialog } from '@angular/material';
 
+/** Custom Services */
 import { AccountingService } from '../../accounting.service';
+
+/** Custom Components */
 import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
 
+/**
+ * View closure component.
+ */
 @Component({
   selector: 'mifosx-view-closure',
   templateUrl: './view-closure.component.html',
@@ -12,33 +19,38 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
 })
 export class ViewClosureComponent implements OnInit {
 
-  accountingClosureId: number;
-  accountingClosure: any;
+  /** GL Account closure. */
+  glAccountClosure: any;
 
+  /**
+   * Retrieves the gl account closure 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) { }
+              public dialog: MatDialog) {
+    this.route.data.subscribe((data: { glAccountClosure: any }) => {
+      this.glAccountClosure = data.glAccountClosure;
+    });
+  }
 
   ngOnInit() {
-    this.accountingClosureId = Number(this.route.snapshot.paramMap.get('id'));
-    this.getAccountingClosure();
-  }
-
-  getAccountingClosure() {
-    this.accountingService.getAccountingClosure(this.accountingClosureId)
-      .subscribe((accountingClosure: any) => {
-        this.accountingClosure = accountingClosure;
-      });
   }
 
+  /**
+   * Deletes the gl account closure and redirects to closing entries.
+   */
   deleteAccountingClosure() {
     const deleteAccountingClosureDialogRef = this.dialog.open(DeleteDialogComponent, {
-      data: { deleteContext: `accounting closure ${this.accountingClosureId}` }
+      data: { deleteContext: `accounting closure ${this.glAccountClosure.id}` }
     });
     deleteAccountingClosureDialogRef.afterClosed().subscribe((response: any) => {
       if (response.delete) {
-        this.accountingService.deleteAccountingClosure(this.accountingClosureId)
+        this.accountingService.deleteAccountingClosure(this.glAccountClosure.id)
           .subscribe(() => {
             this.router.navigate(['/accounting/closing-entries']);
           });