refactor: Loans Module (#1150)

Fixes: #1149

src/app/clients/clients-view/general-tab/general-tab.component.html

@@ -129,7 +129,7 @@
     <ng-container matColumnDef="Type">
       <th mat-header-cell *matHeaderCellDef> Type </th>
       <td mat-cell *matCellDef="let element">
-        <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"></i>
+        <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'" matTooltip=" {{ element.loanType.value }}" matTooltipPosition="above"></i>
       </td>
     </ng-container>
 
@@ -137,20 +137,30 @@
     <ng-container matColumnDef="Actions">
       <th mat-header-cell *matHeaderCellDef> Actions </th>
       <td mat-cell *matCellDef="let element">
-        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary">
+        <button *ngIf="element.status.active" class="account-action-button" mat-raised-button color="primary" matTooltip="Make Repayment" matTooltipPosition="above"
+        (click)="routeEdit($event)" [routerLink]="['../','loans', element.id, 'actions', 'make-repayment']">
           <i class="fa fa-dollar"></i>
         </button>
-        <button *ngIf="element.status.pendingApproval" class="account-action-button" mat-raised-button color="primary">
+        <span *ngIf="element.status.pendingApproval">
-          <i class="fa fa-check"></i>
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Approve"
-        </button>
+            matTooltipPosition="above" *mifosxHasPermission="'APPROVE_LOAN'" (click)="routeEdit($event)"
-        <button *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid"
+            [routerLink]="['../','loans', element.id, 'actions', 'approve']">
-          class="account-action-button" mat-raised-button color="primary">
+            <i class="fa fa-check"></i>
-          <i class="fa fa-flag"></i>
+          </button>
-        </button>
+        </span>
-        <button *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid"
+        <span *ngIf="!element.status.pendingApproval && !element.status.active && !element.status.overpaid">
-          class="account-action-button" mat-raised-button color="primary">
+          <button class="account-action-button" mat-raised-button color="primary" matTooltip="Disburse" 
+            matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'" 
+            (click)="routeEdit($event)" [routerLink]="['../','loans', element.id, 'actions', 'disburse']">
+            <i class="fa fa-flag"></i>
+          </button>
+        </span>
+        <span *ngIf="!element.status.pendingApproval && !element.status.active && element.status.overpaid">
+        <button class="account-action-button" mat-raised-button color="primary" matTooltip="Transfer Funds"
+          matTooltipPosition="above" *mifosxHasPermission="'DISBURSE_LOAN'">
           <i class="fa fa-exchange"></i>
         </button>
+        </span>
       </td>
     </ng-container>
 
@@ -193,11 +203,10 @@
     <ng-container matColumnDef="Type">
       <th mat-header-cell *matHeaderCellDef> Type </th>
       <td mat-cell *matCellDef="let element">
-        <i class="fa fa-large" [ngClass]="(element.loanType.value=== 'Individual')?'fa-user':'fa-group'"></i>
+        <i class="fa fa-large" [ngClass]="(element.loanType.value === 'Individual')?'fa-user':'fa-group'" matTooltip=" {{ element.loanType.value }}" matTooltipPosition="above"></i>
       </td>
     </ng-container>
 
-
     <ng-container matColumnDef="Closed Date">
       <th mat-header-cell *matHeaderCellDef> Closed Date </th>
       <td mat-cell *matCellDef="let element">{{element.timeline.closedOnDate | date}}</td>

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-account-view.component.ts

@@ -99,7 +99,7 @@ export class RecurringDepositsAccountViewComponent implements OnInit {
       }
 
       if (!this.isprematureAllowed) {
-        this.buttonConfig.addOption({
+        this.buttonConfig.addButton({
           name: 'Close',
           icon: 'fa fa-arrow-right'
         });

src/app/deposits/recurring-deposits/recurring-deposits-account-view/recurring-deposits-buttons.config.ts

@@ -133,4 +133,8 @@ export class RecurringDepositsButtonsConfiguration {
     this.optionArray.push(option);
   }
 
+  addButton(option: { name: string, icon: string, taskPermissionName?: string }) {
+    this.buttonsArray.push(option);
+  }
+
 }

src/app/loans/add-loan-charge/add-loan-charge.component.html

@@ -1,62 +0,0 @@
-<div class="container">
-
-  <mat-card>
-
-    <form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
-
-      <mat-card-content>
-
-        <div fxLayout="column">
-          <mat-form-field>
-            <mat-label>Charge</mat-label>
-            <mat-select required formControlName="chargeId">
-              <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
-                  {{ loanCharge.name + ' (' + loanCharge.currency.name + ')' }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
-              Charge is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Amount</mat-label>
-            <input type=number required matInput formControlName="amount" />
-            <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
-              Amount is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Charge Calculation</mat-label>
-            <input matInput formControlName="chargeCalculation" />
-          </mat-form-field>
-
-          <mat-form-field>
-            <mat-label>Charge Time</mat-label>
-            <input matInput formControlName="chargeTime" />
-          </mat-form-field>
-
-          <mat-form-field *ngIf="loanChargeForm.controls['dueDate']">
-            <mat-label>Due On</mat-label>
-            <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required formControlName="dueDate">
-            <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
-            <mat-datepicker #dueDatePicker></mat-datepicker>
-            <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
-              Due Date is <strong>required</strong>
-            </mat-error>
-          </mat-form-field>
-
-        </div>
-
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid">Submit</button>
-        </mat-card-actions>
-
-      </mat-card-content>
-    </form>
-
-  </mat-card>
-  
-</div>

src/app/loans/add-loan-charge/add-loan-charge.component.scss

@@ -1,3 +0,0 @@
-.container{
-    width: 37rem;
-}

src/app/loans/common-resolvers/loan-action-button.resolver.ts

@@ -58,6 +58,8 @@ export class LoanActionButtonResolver implements Resolve<Object> {
             return this.loansService.getLoanScreenReportsData();
         } else if (loanActionButton === 'approve') {
             return this.loansService.getLoanApprovalTemplate(loanId);
+        } else if (loanActionButton === 'add-loan-charge') {
+            return this.loansService.getLoanChargeTemplateResource(loanId);
         } else {
             return undefined;
         }

src/app/loans/common-resolvers/loan-charge-template.resolver.ts

@@ -1,31 +0,0 @@
-/** Angular Imports */
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot  } from '@angular/router';
-
-/** rxjs Imports */
-import { Observable } from 'rxjs';
-
-/** Custom Services */
-import { LoansService } from '../loans.service';
-
-/**
- * Loan Charge Template data resolver.
- */
-@Injectable()
-export class LoanChargeTemplateResolver implements Resolve<Object> {
-
-  /**
-   * @param {LoansService} LoansService loans service.
-   */
-  constructor(private loansService: LoansService) {}
-
-  /**
-   * Returns the Loan Charge Template.
-   * @returns {Observable<any>}
-   */
-  resolve(route: ActivatedRouteSnapshot): Observable<any> {
-    const loanId = route.paramMap.get('loanId');
-    return this.loansService.getLoanChargeTemplateResource(loanId);
-  }
-
-}

src/app/loans/common-resolvers/loan-details-general.resolver.ts

@@ -1,31 +0,0 @@
-/** Angular Imports */
-import { Injectable } from '@angular/core';
-import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
-
-/** rxjs Imports */
-import { Observable } from 'rxjs';
-
-/** Custom Services */
-import { LoansService } from '../loans.service';
-
-/**
- * Clients data resolver.
- */
-@Injectable()
-export class LoanDetailsGeneralResolver implements Resolve<Object> {
-
-    /**
-     * @param {LoansService} LoansService Loans service.
-     */
-    constructor(private loansService: LoansService) { }
-
-    /**
-     * Returns the Loans data.
-     * @returns {Observable<any>}
-     */
-    resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const loanId = route.parent.paramMap.get('loanId');
-        return this.loansService.getLoanAccountDetails(loanId);
-    }
-
-}

src/app/loans/common-resolvers/loan-details.resolver.ts

@@ -24,7 +24,7 @@ export class LoanDetailsResolver implements Resolve<Object> {
      * @returns {Observable<any>}
      */
     resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const loanId = route.paramMap.get('loanId');
+        const loanId = route.paramMap.get('loanId') || route.parent.paramMap.get('loanId');
         return this.loansService.getLoanAccountAssociationDetails(loanId);
     }
 

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

@@ -6,7 +6,6 @@ import { Routes, RouterModule } from '@angular/router';
 import { extract } from '../core/i18n/i18n.service';
 
 /** Custom Components */
-import { AddLoanChargeComponent } from './add-loan-charge/add-loan-charge.component';
 import { LoansViewComponent } from './loans-view/loans-view.component';
 import { GeneralTabComponent } from './loans-view/general-tab/general-tab.component';
 import { AccountDetailsComponent } from './loans-view/account-details/account-details.component';
@@ -27,9 +26,7 @@ import { StandingInstructionsTabComponent } from 'app/loans/loans-view/standing-
 import { EditLoansAccountComponent } from './edit-loans-account/edit-loans-account.component';
 
 /** Custom Resolvers */
-import { LoanChargeTemplateResolver } from './common-resolvers/loan-charge-template.resolver';
 import { LoanDetailsResolver } from './common-resolvers/loan-details.resolver';
-import { LoanDetailsGeneralResolver } from './common-resolvers/loan-details-general.resolver';
 import { LoanNotesResolver } from './common-resolvers/loan-notes.resolver';
 import { LoanDetailsChargesResolver } from './common-resolvers/loan-details-charges.resolver';
 import { LoanDatatablesResolver } from './common-resolvers/loan-datatables.resolver';
@@ -69,18 +66,12 @@ const routes: Routes = [
             {
               path: 'general',
               component: GeneralTabComponent,
-              data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false },
+              data: { title: extract('General'), breadcrumb: 'General', routeParamBreadcrumb: false }
-              resolve: {
-                loanDetailsData: LoanDetailsGeneralResolver
-              }
             },
             {
               path: 'accountdetail',
               component: AccountDetailsComponent,
-              data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false },
+              data: { title: extract('Account Detail'), breadcrumb: 'Account Detail', routeParamBreadcrumb: false }
-              resolve: {
-                loanDetailsData: LoanDetailsGeneralResolver
-              }
             },
             {
               path: 'original-schedule',
@@ -125,10 +116,7 @@ const routes: Routes = [
             {
               path: 'overdue-charges',
               component: OverdueChargesTabComponent,
-              data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false },
+              data: { title: extract('Overdue Charges'), breadcrumb: 'Overdue Charges', routeParamBreadcrumb: false }
-              resolve: {
-                loanDetailsData: LoanDetailsGeneralResolver
-              }
             },
             {
               path: 'floating-interest-rates',
@@ -152,7 +140,7 @@ const routes: Routes = [
               data: { title: extract('Loan Documents'), breadcrumb: 'Loan Documents', routeParamBreadcrumb: false },
               resolve: {
                 loanDocuments: LoanDocumentsResolver,
-                loanDetailsData: LoanDetailsGeneralResolver
+                loanDetailsData: LoanDetailsResolver
               },
             },
             {
@@ -166,10 +154,7 @@ const routes: Routes = [
             {
               path: 'standing-instruction',
               component: StandingInstructionsTabComponent,
-              data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false },
+              data: { title: extract('Standing Instructions'), breadcrumb: 'Standing Instructions', routeParamBreadcrumb: false }
-              resolve: {
-                loanDetailsData: LoanDetailsGeneralResolver
-              },
             },
             {
               path: 'datatables',
@@ -182,14 +167,6 @@ const routes: Routes = [
                 }
               }]
             },
-            {
-              path: 'add-loan-charge',
-              component: AddLoanChargeComponent,
-              data: { title: extract('Add Loan Charge'), breadcrumb: 'Add Loan Charge', routeParamBreadcrumb: false },
-              resolve: {
-                loanChargeTemplate: LoanChargeTemplateResolver
-              }
-            },
             {
               path: 'actions/:action',
               component: LoanAccountActionsComponent,
@@ -217,8 +194,6 @@ const routes: Routes = [
   exports: [RouterModule],
   declarations: [],
   providers: [
-    LoanChargeTemplateResolver,
-    LoanDetailsGeneralResolver,
     LoanDetailsResolver,
     LoanNotesResolver,
     LoanDetailsChargesResolver,

src/app/loans/loans-view/account-details/account-details.component.ts

@@ -15,7 +15,7 @@ export class AccountDetailsComponent implements OnInit {
   }[];
 
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { loanDetailsData: any, }) => {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any, }) => {
       this.loanDetails = data.loanDetailsData;
     });
   }

src/app/loans/loans-view/button-config.ts

@@ -1,173 +0,0 @@
-export const ButtonConfig = {
-  'Submitted and pending approval': {
-    singlebuttons: [
-      {
-        name: 'Add Loan Charge',
-        icon: 'fa fa-plus',
-        taskPermissionName: 'CREATE_LOANCHARGE',
-      },
-      {
-        name: 'Approve',
-        icon: 'fa fa-check',
-        taskPermissionName: 'APPROVE_LOAN',
-      },
-      {
-        name: 'Modify Application',
-        icon: 'fa fa-pincel-square-o',
-        taskPermissionName: 'UPDATE_LOAN',
-      },
-      {
-        name: 'Reject',
-        icon: 'fa fa-times',
-        taskPermissionName: 'REJECT_LOAN',
-      },
-    ],
-    options: [
-      {
-        name: 'Withdrawn by client',
-        taskPermissionName: 'WITHDRAW_LOAN',
-      },
-      {
-        name: 'Delete',
-        taskPermissionName: 'DELETE_LOAN',
-      },
-      {
-        name: 'Add Collateral',
-        taskPermissionName: 'CREATE_COLLATERAL',
-      },
-      {
-        name: 'View Guarantors',
-        taskPermissionName: 'READ_GUARANTOR',
-      },
-      {
-        name: 'Create Guarantor',
-        taskPermissionName: 'CREATE_GUARANTOR',
-      },
-      {
-        name: 'Loan Screen Reports',
-        taskPermissionName: 'READ_LOAN',
-      },
-    ],
-  },
-
-  Approved: {
-    singlebuttons: [
-      {
-        name: 'Disburse',
-        icon: 'fa fa-flag',
-        taskPermissionName: 'DISBURSE_LOAN',
-      },
-      {
-        name: 'Disburse to Savings',
-        icon: 'fa fa-flag',
-        taskPermissionName: 'DISBURSETOSAVINGS_LOAN',
-      },
-      {
-        name: 'Undo Approval',
-        icon: 'fa fa-undo',
-        taskPermissionName: 'APPROVALUNDO_LOAN',
-      },
-    ],
-    options: [
-      {
-        name: 'Add Loan Charge',
-        taskPermissionName: 'CREATE_LOANCHARGE',
-      },
-      {
-        name: 'View Guarantors',
-        taskPermissionName: 'READ_GUARANTOR',
-      },
-      {
-        name: 'Create Guarantor',
-        taskPermissionName: 'CREATE_GUARANTOR',
-      },
-      {
-        name: 'Loan Screen Report',
-        taskPermissionName: 'READ_LOAN',
-      },
-    ],
-  },
-
-  Active: {
-    singlebuttons: [
-      {
-        name: 'Add Loan Charge',
-        icon: 'fa fa-plus',
-        taskPermissionName: 'CREATE_LOANCHARGE',
-      },
-      {
-        name: 'Foreclosure',
-        icon: 'icon-dollar',
-        taskPermissionName: 'FORECLOSURE_LOAN',
-      },
-      {
-        name: 'Make Repayment',
-        icon: 'fa fa-dollar',
-        taskPermissionName: 'REPAYMENT_LOAN',
-      },
-      {
-        name: 'Undo Disbursal',
-        icon: 'fa fa-undo',
-        taskPermissionName: 'DISBURSALUNDO_LOAN',
-      },
-    ],
-    options: [
-      {
-        name: 'Waive Interest',
-        taskPermissionName: 'WAIVEINTERESTPORTION_LOAN',
-      },
-      {
-        name: 'Reschedule',
-        taskPermissionName: 'CREATE_RESCHEDULELOAN',
-      },
-      {
-        name: 'Write Off',
-        taskPermissionName: 'WRITEOFF_LOAN',
-      },
-      {
-        name: 'Close (as Rescheduled)',
-        taskPermissionName: 'CLOSEASRESCHEDULED_LOAN',
-      },
-      {
-        name: 'Close',
-        taskPermissionName: 'CLOSE_LOAN',
-      },
-      {
-        name: 'Loan Screen Report',
-        taskPermissionName: 'READ_LOAN',
-      },
-      {
-        name: 'View Guarantors',
-        taskPermissionName: 'READ_GUARANTOR',
-      },
-      {
-        name: 'Create Guarantor',
-        taskPermissionName: 'CREATE_GUARANTOR',
-      },
-      {
-        name: 'Recover From Guarantor',
-        taskPermissionName: 'RECOVERGUARANTEES_LOAN',
-      },
-    ],
-  },
-
-  Overpaid: {
-    singlebuttons: [
-      {
-        name: 'Transfer Funds',
-        icon: 'fa fa-exchange',
-        taskPermissionName: 'CREATE_ACCOUNTTRANSFER',
-      },
-    ],
-  },
-
-  ClosedWrittenOff: {
-    singlebuttons: [
-      {
-        name: 'Recovery Payment',
-        icon: 'fa fa-briefcase',
-        taskPermissionName: 'RECOVERYPAYMENT_LOAN',
-      },
-    ],
-  },
-};

src/app/loans/loans-view/general-tab/general-tab.component.ts

@@ -32,7 +32,7 @@ export class GeneralTabComponent implements OnInit {
   detailsDataSource: MatTableDataSource<any>;
 
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe((data: { loanDetailsData: any, }) => {
+    this.route.parent.data.subscribe((data: { loanDetailsData: any, }) => {
       this.loanDetails = data.loanDetailsData;
     });
   }

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.html

@@ -33,7 +33,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!collateralForm.valid" *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/add-collateral/add-collateral.component.ts

@@ -62,7 +62,7 @@ export class AddCollateralComponent implements OnInit {
     const collateralForm = this.collateralForm.value;
     collateralForm.locale = 'en';
     this.loanService.createLoanCollateral(loanId, collateralForm).subscribe((response: any) => {
-      this.router.navigate(['../general'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.html

@@ -0,0 +1,55 @@
+<form [formGroup]="loanChargeForm" (ngSubmit)="submit()">
+
+  <mat-card-content>
+
+    <div fxLayout="column">
+      <mat-form-field>
+        <mat-label>Charge</mat-label>
+        <mat-select required formControlName="chargeId">
+          <mat-option *ngFor="let loanCharge of loanChargeOptions" [value]="loanCharge.id">
+            {{ loanCharge.name + ' (' + loanCharge?.currency.name + ')' }}
+          </mat-option>
+        </mat-select>
+        <mat-error *ngIf="loanChargeForm.controls.chargeId.hasError('required')">
+          Charge is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Amount</mat-label>
+        <input type=number required matInput formControlName="amount" />
+        <mat-error *ngIf="loanChargeForm.controls.amount.hasError('required')">
+          Amount is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Charge Calculation</mat-label>
+        <input matInput formControlName="chargeCalculation" />
+      </mat-form-field>
+
+      <mat-form-field>
+        <mat-label>Charge Time</mat-label>
+        <input matInput formControlName="chargeTime" />
+      </mat-form-field>
+
+      <mat-form-field *ngIf="loanChargeForm.controls['dueDate']">
+        <mat-label>Due On</mat-label>
+        <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="dueDatePicker" required
+          formControlName="dueDate">
+        <mat-datepicker-toggle matSuffix [for]="dueDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #dueDatePicker></mat-datepicker>
+        <mat-error *ngIf="loanChargeForm.controls.dueDate.hasError('required')">
+          Due Date is <strong>required</strong>
+        </mat-error>
+      </mat-form-field>
+
+    </div>
+
+    <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+      <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid">Submit</button>
+    </mat-card-actions>
+
+  </mat-card-content>
+</form>

src/app/loans/loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component.ts

@@ -5,13 +5,13 @@ import { Router, ActivatedRoute } from '@angular/router';
 import { DatePipe } from '@angular/common';
 
 /** Custom Services */
-import { LoansService } from '../loans.service';
+import { LoansService } from '../../../loans.service';
 
 /**
  * Create Add Loan Charge component.
  */
 @Component({
-  selector: 'mifosx-addloancharge',
+  selector: 'mifosx-add-loan-charge',
   templateUrl: './add-loan-charge.component.html',
   styleUrls: ['./add-loan-charge.component.scss']
 })
@@ -28,6 +28,9 @@ export class AddLoanChargeComponent implements OnInit {
     id: number;
     name: string;
     amount: number;
+    currency: {
+      name: string;
+    };
     chargeCalculationType: {
       value: any;
     };
@@ -51,10 +54,10 @@ export class AddLoanChargeComponent implements OnInit {
               private router: Router,
               private datePipe: DatePipe,
               private loansService: LoansService) {
-    this.route.data.subscribe((data: { loanChargeTemplate: any }) => {
+    this.route.data.subscribe((data: { actionButtonData: any }) => {
-      this.loanChargeOptions = data.loanChargeTemplate.chargeOptions;
+      this.loanChargeOptions = data.actionButtonData.chargeOptions;
     });
-    this.loanId = this.route.snapshot.params['loanId'];
+    this.loanId = this.route.parent.snapshot.params['loanId'];
   }
 
   /**
@@ -102,7 +105,7 @@ export class AddLoanChargeComponent implements OnInit {
     loanCharge.locale = 'en';
     loanCharge.dateFormat = dateFormat;
     this.loansService.createLoanCharge(this.loanId, 'charges', loanCharge).subscribe(res => {
-      this.router.navigate(['../'], { relativeTo: this.route });
+      this.router.navigate(['../../'], { relativeTo: this.route });
     });
   }
 }

src/app/loans/loans-view/loan-account-actions/assign-loan-officer/assign-loan-officer.component.html

@@ -31,7 +31,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!assignOfficerForm.valid" *mifosxHasPermission="'BULKREASSIGN_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/close-as-rescheduled/close-as-rescheduled.component.ts

@@ -68,7 +68,7 @@ export class CloseAsRescheduledComponent implements OnInit {
     closeForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, closeForm, 'close-rescheduled')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 }

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.html

@@ -5,32 +5,67 @@
 
       <div fxLayout="column">
 
-          <mat-checkbox labelPosition="before" formControlName="existingClient">
+        <mat-checkbox labelPosition="before" formControlName="existingClient">
-            Existing Client
+          Existing Client
-          </mat-checkbox>
+        </mat-checkbox>
 
         <ng-container *ngIf="!showClientDetailsForm">
 
-          <mat-form-field>
+          <mat-form-field fxFlex="30%">
             <mat-label>Name</mat-label>
-            <input matInput required formControlName="name" required>
+            <input matInput formControlName="name" [matAutocomplete]="clientsAutocomplete">
             <mat-error *ngIf="newGuarantorForm.controls.name.hasError('required')">
               Name <strong>is required</strong>
             </mat-error>
           </mat-form-field>
 
+          <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient"
+            (optionSelected)='clientSelected($event.option.value)'>
+            <mat-option *ngFor="let client of clientsData" [value]="client">
+              {{ client.displayName }}
+            </mat-option>
+          </mat-autocomplete>
+
+          <mat-form-field>
+            <mat-label>Relationship</mat-label>
+            <mat-select formControlName="clientRelationshipTypeId">
+              <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
+                {{ relationType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
+          <ng-container *ngIf="accountOptions.length > 0">
+
+            <mat-form-field>
+              <mat-label>Account</mat-label>
+              <mat-select formControlName="savingsId">
+                <mat-option *ngFor="let accountOption of accountOptions" [value]="accountOption.id">
+                  {{ accountOption.productName }} - {{ accountOption.accountNo }}
+                </mat-option>
+              </mat-select>
+            </mat-form-field>
+
+            <mat-form-field>
+              <mat-label>Amount</mat-label>
+              <input type="number" matInput required formControlName="amount" required>
+            </mat-form-field>
+
+          </ng-container>
+
         </ng-container>
 
-        <mat-form-field>
-          <mat-label>Relationship</mat-label>
-          <mat-select formControlName="clientRelationshipTypeId">
-            <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
-              {{ relationType.name }}
-            </mat-option>
-          </mat-select>
-        </mat-form-field>
-
         <ng-container *ngIf="showClientDetailsForm">
+
+          <mat-form-field>
+            <mat-label>Relationship</mat-label>
+            <mat-select formControlName="clientRelationshipTypeId">
+              <mat-option *ngFor="let relationType of relationTypes" [value]="relationType.id">
+                {{ relationType.name }}
+              </mat-option>
+            </mat-select>
+          </mat-form-field>
+
           <mat-form-field>
             <mat-label>First Name</mat-label>
             <input matInput required formControlName="firstname" required>
@@ -89,7 +124,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!newGuarantorForm.valid"
           *mifosxHasPermission="'CREATE_GUARANTOR'">Submit</button>
       </mat-card-actions>
@@ -97,4 +132,25 @@
     </mat-card-content>
 
   </form>
-</div>
+
+  <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">
+    <div class="mat-table">
+      <div class="mat-header-row">
+        <div class="mat-header-cell">Client Details</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Name</div>
+        <div class="mat-cell">{{newGuarantorForm.controls.name.value.displayName}}</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Id</div>
+        <div class="mat-cell">{{newGuarantorForm.controls.name.value.id}}</div>
+      </div>
+      <div class="mat-row">
+        <div class="mat-cell">Office</div>
+        <div class="mat-cell">{{newGuarantorForm.controls.name.value.officeName}}</div>
+      </div>
+    </div>
+  </ng-container>
+
+</div>

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.scss

@@ -0,0 +1,31 @@
+.container {
+
+  .mat-table {
+    display: block;
+    font-family: Tahoma, Verdana;
+    width: 100%;
+  }
+  
+  .mat-row,
+  .mat-header-row {
+    display: flex;
+    border-bottom-width: 1px;
+    border-bottom-style: solid;
+    align-items: center;
+    min-height: 48px;
+    padding: 0 24px;
+  }
+  
+  .mat-cell,
+  .mat-header-cell {
+    flex: 1;
+    overflow: hidden;
+    word-wrap: break-word;
+  }
+  
+  h3 {
+    padding-left: 0;
+    margin-bottom: 0;
+  }
+
+}

src/app/loans/loans-view/loan-account-actions/create-guarantor/create-guarantor.component.ts

@@ -1,11 +1,12 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
+import { Component, OnInit, Input, AfterViewInit } from '@angular/core';
 import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 
 /** Custom Services */
 import { LoansService } from 'app/loans/loans.service';
 import { DatePipe } from '@angular/common';
+import { ClientsService } from 'app/clients/clients.service';
 
 /**
  * Create Guarantor Action
@@ -15,7 +16,7 @@ import { DatePipe } from '@angular/common';
   templateUrl: './create-guarantor.component.html',
   styleUrls: ['./create-guarantor.component.scss']
 })
-export class CreateGuarantorComponent implements OnInit {
+export class CreateGuarantorComponent implements OnInit, AfterViewInit {
 
   @Input() dataObject: any;
   /** New Guarantor Form */
@@ -30,6 +31,10 @@ export class CreateGuarantorComponent implements OnInit {
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
   maxDate = new Date();
+  /** Client data. */
+  clientsData: any = [];
+  /** Account Options */
+  accountOptions: any = [];
 
   /**
    * @param {FormBuilder} formBuilder Form Builder.
@@ -42,7 +47,8 @@ export class CreateGuarantorComponent implements OnInit {
     private loanService: LoansService,
     private route: ActivatedRoute,
     private router: Router,
-    private datePipe: DatePipe) {
+    private datePipe: DatePipe,
+    private clientsService: ClientsService) {
     this.loanId = this.route.parent.snapshot.params['loanId'];
   }
 
@@ -57,7 +63,9 @@ export class CreateGuarantorComponent implements OnInit {
     this.newGuarantorForm = this.formBuilder.group({
       'existingClient': [''],
       'name': ['', Validators.required],
-      'clientRelationshipTypeId': ['']
+      'clientRelationshipTypeId': [''],
+      'savingsId': [''],
+      'amount': ['']
     });
   }
 
@@ -86,8 +94,12 @@ export class CreateGuarantorComponent implements OnInit {
         this.newGuarantorForm.addControl('mobileNumber', new FormControl(''));
         this.newGuarantorForm.addControl('housePhoneNumber', new FormControl(''));
         this.newGuarantorForm.removeControl('name');
+        this.newGuarantorForm.removeControl('savingsId');
+        this.newGuarantorForm.removeControl('amount');
       } else {
         this.newGuarantorForm.addControl('name', new FormControl(''));
+        this.newGuarantorForm.addControl('savingsId', new FormControl(''));
+        this.newGuarantorForm.addControl('amount', new FormControl(''));
         this.newGuarantorForm.removeControl('firstname');
         this.newGuarantorForm.removeControl('lastname');
         this.newGuarantorForm.removeControl('dob');
@@ -101,6 +113,39 @@ export class CreateGuarantorComponent implements OnInit {
     });
   }
 
+  /**
+   * Subscribes to Clients search filter:
+   */
+  ngAfterViewInit() {
+    if (this.newGuarantorForm.value.existingClient) {
+      this.newGuarantorForm.get('name').valueChanges.subscribe((value: string) => {
+        if (value.length >= 2) {
+          this.clientsService.getFilteredClients('displayName', 'ASC', true, value)
+            .subscribe((data: any) => {
+              this.clientsData = data.pageItems;
+            });
+        }
+      });
+    }
+  }
+
+  clientSelected(clientDetails: any){
+    console.log(clientDetails);
+    this.accountOptions = [];
+    this.loanService.guarantorAccountResource(this.loanId, clientDetails.id).subscribe((response: any) => {
+      this.accountOptions = response.accountLinkingOptions;
+    })
+  }
+
+  /**
+   * Displays Client name in form control input.
+   * @param {any} client Client data.
+   * @returns {string} Client name if valid otherwise undefined.
+   */
+  displayClient(client: any): string | undefined {
+    return client ? client.displayName : undefined;
+  }
+
   /** Submits the new guarantor details form */
   submit() {
     const prevdob: Date = this.newGuarantorForm.value.dob;
@@ -108,17 +153,25 @@ export class CreateGuarantorComponent implements OnInit {
     // TODO: Update once language and date settings are setup
     const dateFormat = 'dd-MM-yyyy';
     const locale = 'en';
-    const newGuarantorData = {
+    let newGuarantorData = {
       ... this.newGuarantorForm.value,
-      dob: this.datePipe.transform(prevdob, dateFormat),
       locale,
-      dateFormat,
       guarantorTypeId
     };
+
+    if(this.newGuarantorForm.value.existingClient) {
+      newGuarantorData['entityId'] = this.newGuarantorForm.controls.name.value.id;
+    } else {
+      newGuarantorData['dob'] = this.datePipe.transform(prevdob, dateFormat),
+      newGuarantorData['dateFormat'] = dateFormat
+    }
+
     delete newGuarantorData.existingClient;
+    delete newGuarantorData.name;
+
     this.loanService.createNewGuarantor(this.loanId, newGuarantorData)
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component.html

@@ -40,7 +40,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid" *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/disburse-loan-account/disburse-loan-account.component.ts

@@ -72,7 +72,7 @@ export class DisburseLoanAccountComponent implements OnInit {
     disbursementForm.locale = 'en';
     disbursementForm.dateFormat = dateFormat;
     this.loanService.loanActionButtons(loanId, 'disbursetosavings', disbursementForm).subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../general'], {relativeTo: this.route});
     });
   }
 

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.html

@@ -80,7 +80,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid" *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/disburse/disburse.component.ts

@@ -109,7 +109,7 @@ export class DisburseComponent implements OnInit {
     disbursementLoanData.dateFormat = dateFormat;
     this.loanService.loanActionButtons(this.loanId, 'disburse', disbursementLoanData )
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.html

@@ -49,7 +49,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid" *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/foreclosure/foreclosure.component.ts

@@ -117,7 +117,7 @@ export class ForeclosureComponent implements OnInit {
 
     this.loanService.loanForclosureData(this.loanId, formData)
       .subscribe((response: any) => {
-        this.router.navigate([`../general`], { relativeTo: this.route });
+        this.router.navigate([`../../general`], { relativeTo: this.route });
       });
     }
 

src/app/loans/loans-view/loan-account-actions/loan-account-actions.component.ts

@@ -33,7 +33,8 @@ export class LoanAccountActionsComponent {
             withdrawn_by_client: boolean,
             undo_disbursal: boolean,
             loan_screen_reports: boolean,
-            approve: boolean } = {
+            approve: boolean,
+            add_loan_charge: boolean } = {
               close: false,
               undo_approval: false,
               write_off: false,
@@ -54,7 +55,8 @@ export class LoanAccountActionsComponent {
               withdrawn_by_client: false,
               undo_disbursal: false,
               loan_screen_reports: false,
-              approve: false };
+              approve: false,
+              add_loan_charge: false };
 
   actionButtonData: any;
   actionName: any;
@@ -74,6 +76,9 @@ export class LoanAccountActionsComponent {
       if (this.actionName === 'change-loan-officer') {
         this.actionName = 'assign-loan-officer';
       }
+      for (const key of Object.keys(this.actions)) {
+        this.actions[key] = false;
+      }
       this.actions[this.actionName.replace(/-/g, '_')] = true;
     });
   }

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.html

@@ -88,7 +88,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!rescheduleLoanForm.valid" *mifosxHasPermission="'APPROVE_RESCHEDULELOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/loan-reschedule/loan-reschedule.component.ts

@@ -81,7 +81,7 @@ export class LoanRescheduleComponent implements OnInit {
       // TODO: needs to be updated
       // mentioned in Community App:
       // location.path('/loans/' + scope.loanId + '/viewreschedulerequest/'+ data.resourceId);
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/loan-screen-reports/loan-screen-reports.component.ts

@@ -52,7 +52,6 @@ export class LoanScreenReportsComponent implements OnInit {
   ngOnInit() {
     this.templatesData = this.dataObject;
     this.createLoanScreenReportForm();
-    console.log('templateData: ', this.templatesData);
   }
 
   /**

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid" *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/loans-account-close/loans-account-close.component.ts

@@ -69,7 +69,7 @@ export class LoansAccountCloseComponent implements OnInit {
     closeForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, closeForm, 'close')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.html

@@ -80,7 +80,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/make-repayment/make-repayment.component.ts

@@ -108,7 +108,7 @@ export class MakeRepaymentComponent implements OnInit {
     repaymentLoanData.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, repaymentLoanData, 'repayment')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.html

@@ -93,7 +93,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid" *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/prepay-loan/prepay-loan.component.ts

@@ -120,7 +120,7 @@ export class PrepayLoanComponent implements OnInit {
     prepayLoanData.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, prepayLoanData, 'repayment')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.html

@@ -81,7 +81,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
           *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
       </mat-card-actions>

src/app/loans/loans-view/loan-account-actions/recovery-repayment/recovery-repayment.component.ts

@@ -109,7 +109,7 @@ export class RecoveryRepaymentComponent implements OnInit {
     recoveryRepaymentLoanData.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(this.loanId, recoveryRepaymentLoanData, 'recoverypayment')
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid" *mifosxHasPermission="'REJECT_LOAN'" >Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/reject-loan/reject-loan.component.ts

@@ -68,7 +68,7 @@ export class RejectLoanComponent implements OnInit {
     rejectForm.locale = 'en';
     rejectForm.dateFormat = dateFormat;
     this.loanService.loanActionButtons(this.loanId, 'reject', rejectForm).subscribe((response: any) => {
-      this.router.navigate(['../general'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.html

@@ -8,7 +8,7 @@
     </mat-form-field>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
     </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/undo-approval/undo-approval.component.ts

@@ -38,7 +38,7 @@ export class UndoApprovalComponent implements OnInit {
   submit() {
     const loanId = this.route.parent.snapshot.params['loanId'];
     this.loanService.loanActionButtons(loanId, 'undoapproval', { 'note': this.note.value }).subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../general'], {relativeTo: this.route});
     });
   }
 

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.html

@@ -8,7 +8,7 @@
     </mat-form-field>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'DISBURSALUNDO_LOAN'">Submit</button>
     </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/undo-disbursal/undo-disbursal.component.ts

@@ -45,8 +45,8 @@ export class UndoDisbursalComponent implements OnInit {
    * Submits the undo disbursal form.
    */
   submit() {
-    this.loansService.loanActionButtons(this.loanId, 'undoDisbursal', {'note': this.note.value}).subscribe((response: any) => {
+    this.loansService.loanActionButtons(this.loanId, 'undodisbursal', {'note': this.note.value}).subscribe((response: any) => {
-      this.router.navigate(['../general'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.html

@@ -32,7 +32,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid" *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/waive-interest/waive-interest.component.ts

@@ -71,7 +71,7 @@ export class WaiveInterestComponent implements OnInit {
     loanInterestForm.locale = 'en';
     loanInterestForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(loanId, loanInterestForm, 'waiveinterest').subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../general'], {relativeTo: this.route});
     });
   }
 

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.html

@@ -24,7 +24,7 @@
       </div>
 
       <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../general']">Cancel</button>
+        <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
         <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid" *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
       </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/withdrawn-by-client/withdrawn-by-client.component.ts

@@ -73,7 +73,7 @@ export class WithdrawnByClientComponent implements OnInit {
     WithdrawnByClientLoanData.dateFormat = dateFormat;
     this.loanService.loanActionButtons(this.loanId, 'withdrawnByApplicant', WithdrawnByClientLoanData)
       .subscribe((response: any) => {
-        this.router.navigate(['../general'], { relativeTo: this.route });
+        this.router.navigate(['../../../general'], { relativeTo: this.route });
       });
   }
 

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.html

@@ -31,7 +31,7 @@
     </form>
 
     <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-      <button type="button" mat-raised-button [routerLink]="['../']">Cancel</button>
+      <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
       <button mat-raised-button color="primary" (click)="submit()" *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
     </mat-card-actions>
 

src/app/loans/loans-view/loan-account-actions/write-off-page/write-off-page.component.ts

@@ -70,7 +70,7 @@ export class WriteOffPageComponent implements OnInit {
     writeOffForm.locale = 'en';
     writeOffForm.dateFormat = dateFormat;
     this.loanService.submitLoanActionButton(loanId, writeOffForm, 'writeoff').subscribe((response: any) => {
-      this.router.navigate(['../general'], {relativeTo: this.route});
+      this.router.navigate(['../../../general'], {relativeTo: this.route});
     });
   }
 

src/app/loans/loans-view/loan-accounts-button-config.ts

@@ -0,0 +1,223 @@
+/** Recurring Deposits Account Buttons Configuration */
+export class LoansAccountButtonConfiguration {
+
+    optionArray: {
+        name: string,
+        taskPermissionName?: string,
+    }[];
+
+    buttonsArray: {
+        name: string,
+        icon: string,
+        taskPermissionName?: string,
+    }[];
+
+    constructor(status: string) {
+        this.setOptions(status);
+        this.setButtons(status);
+    }
+
+    get singleButtons() {
+        return this.buttonsArray;
+    }
+
+    get options() {
+        return this.optionArray;
+    }
+
+    setButtons(status: string) {
+        switch (status) {
+            case 'Active':
+                this.buttonsArray = [
+                    {
+                        name: 'Add Loan Charge',
+                        icon: 'fa fa-plus',
+                        taskPermissionName: 'CREATE_LOANCHARGE',
+                    },
+                    {
+                        name: 'Foreclosure',
+                        icon: 'icon-dollar',
+                        taskPermissionName: 'FORECLOSURE_LOAN',
+                    },
+                    {
+                        name: 'Make Repayment',
+                        icon: 'fa fa-dollar',
+                        taskPermissionName: 'REPAYMENT_LOAN',
+                    },
+                    {
+                        name: 'Undo Disbursal',
+                        icon: 'fa fa-undo',
+                        taskPermissionName: 'DISBURSALUNDO_LOAN',
+                    },
+                ];
+                break;
+            case 'Submitted and pending approval':
+                this.buttonsArray = [
+                    {
+                        name: 'Add Loan Charge',
+                        icon: 'fa fa-plus',
+                        taskPermissionName: 'CREATE_LOANCHARGE',
+                    },
+                    {
+                        name: 'Approve',
+                        icon: 'fa fa-check',
+                        taskPermissionName: 'APPROVE_LOAN',
+                    },
+                    {
+                        name: 'Modify Application',
+                        icon: 'fa fa-pincel-square-o',
+                        taskPermissionName: 'UPDATE_LOAN',
+                    },
+                    {
+                        name: 'Reject',
+                        icon: 'fa fa-times',
+                        taskPermissionName: 'REJECT_LOAN',
+                    },
+                ];
+                break;
+            case 'Approved':
+                this.buttonsArray = [
+                    {
+                        name: 'Disburse',
+                        icon: 'fa fa-flag',
+                        taskPermissionName: 'DISBURSE_LOAN',
+                    },
+                    {
+                        name: 'Disburse to Savings',
+                        icon: 'fa fa-flag',
+                        taskPermissionName: 'DISBURSETOSAVINGS_LOAN',
+                    },
+                    {
+                        name: 'Undo Approval',
+                        icon: 'fa fa-undo',
+                        taskPermissionName: 'APPROVALUNDO_LOAN',
+                    },
+                ];
+                break;
+            case 'Overpaid':
+                this.buttonsArray = [
+                    {
+                        name: 'Transfer Funds',
+                        icon: 'fa fa-exchange',
+                        taskPermissionName: 'CREATE_ACCOUNTTRANSFER',
+                    },
+                ];
+                break;
+            case 'Closed (written off)':
+                this.buttonsArray = [
+                    {
+                        name: 'Recovery Payment',
+                        icon: 'fa fa-briefcase',
+                        taskPermissionName: 'RECOVERYPAYMENT_LOAN',
+                    },
+                ];
+                break;
+            default:
+                this.buttonsArray = [];
+        }
+    }
+
+    setOptions(status: string) {
+        switch (status) {
+            case 'Active':
+                this.optionArray = [
+                    {
+                        name: 'Waive Interest',
+                        taskPermissionName: 'WAIVEINTERESTPORTION_LOAN',
+                    },
+                    {
+                        name: 'Reschedule',
+                        taskPermissionName: 'CREATE_RESCHEDULELOAN',
+                    },
+                    {
+                        name: 'Write Off',
+                        taskPermissionName: 'WRITEOFF_LOAN',
+                    },
+                    {
+                        name: 'Close (as Rescheduled)',
+                        taskPermissionName: 'CLOSEASRESCHEDULED_LOAN',
+                    },
+                    {
+                        name: 'Close',
+                        taskPermissionName: 'CLOSE_LOAN',
+                    },
+                    {
+                        name: 'Loan Screen Report',
+                        taskPermissionName: 'READ_LOAN',
+                    },
+                    {
+                        name: 'View Guarantors',
+                        taskPermissionName: 'READ_GUARANTOR',
+                    },
+                    {
+                        name: 'Create Guarantor',
+                        taskPermissionName: 'CREATE_GUARANTOR',
+                    },
+                    {
+                        name: 'Recover From Guarantor',
+                        taskPermissionName: 'RECOVERGUARANTEES_LOAN',
+                    },
+                ];
+                break;
+            case 'Submitted and pending approval':
+                this.optionArray = [
+                    {
+                        name: 'Withdrawn by client',
+                        taskPermissionName: 'WITHDRAW_LOAN',
+                    },
+                    {
+                        name: 'Delete',
+                        taskPermissionName: 'DELETE_LOAN',
+                    },
+                    {
+                        name: 'Add Collateral',
+                        taskPermissionName: 'CREATE_COLLATERAL',
+                    },
+                    {
+                        name: 'View Guarantors',
+                        taskPermissionName: 'READ_GUARANTOR',
+                    },
+                    {
+                        name: 'Create Guarantor',
+                        taskPermissionName: 'CREATE_GUARANTOR',
+                    },
+                    {
+                        name: 'Loan Screen Reports',
+                        taskPermissionName: 'READ_LOAN',
+                    },
+                ];
+                break;
+            case 'Approved':
+                this.optionArray = [
+                    {
+                        name: 'Add Loan Charge',
+                        taskPermissionName: 'CREATE_LOANCHARGE',
+                    },
+                    {
+                        name: 'View Guarantors',
+                        taskPermissionName: 'READ_GUARANTOR',
+                    },
+                    {
+                        name: 'Create Guarantor',
+                        taskPermissionName: 'CREATE_GUARANTOR',
+                    },
+                    {
+                        name: 'Loan Screen Report',
+                        taskPermissionName: 'READ_LOAN',
+                    },
+                ];
+                break;
+            default:
+                this.optionArray = [];
+        }
+    }
+
+    addOption(option: { name: string, icon?: string, taskPermissionName?: string }) {
+        this.optionArray.push(option);
+    }
+
+    addButton(option: { name: string, icon: string, taskPermissionName?: string }) {
+        this.buttonsArray.push(option);
+    }
+
+}

src/app/loans/loans-view/loans-view.component.html

@@ -3,6 +3,14 @@
   <mat-card-header fxLayout="column" class="header">
 
 	<mat-card-title-group class="header-title-group">
+
+	<div class="profile-image-container">
+		<div>
+			<img mat-card-md-image class="profile-image" matTooltip="Recurring Deposits Account"
+				[src]="'assets/images/loans.png'">
+		</div>
+	</div>
+
 	  <div class="mat-typography loan-card-title">
 	    <mat-card-title>
 		  <div fxLayout="row" fxLayout.lt-md="column">
@@ -32,15 +40,15 @@
 
 	<mat-card-actions class="loan-actions">
 
-	  <ng-container *ngFor="let item of buttons.singlebuttons" class="loan-span">
+	  <ng-container *ngFor="let item of buttonConfig.singleButtons" class="loan-span">
 		<button mat-raised-button *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">
 		  <i class="{{item.icon}}"></i> {{item.name}} </button>
 	  </ng-container>
 
-	  <ng-container *ngIf="!(buttons.options === undefined)" class="loan-span">
+	  <ng-container *ngIf="buttonConfig.options.length" class="loan-span">
 		<button mat-raised-button [matMenuTriggerFor]="More">More</button>
 		  <mat-menu #More="matMenu">
-			<span *ngFor="let item of buttons.options">
+			<span *ngFor="let item of buttonConfig.options">
 			  <button mat-menu-item *mifosxHasPermission="item.taskPermissionName" (click)="loanAction(item.name)">{{item.name}}</button>
 			</span>
 		  </mat-menu>

src/app/loans/loans-view/loans-view.component.scss

@@ -14,6 +14,13 @@
         }
       }
     }
+    .profile-image-container {
+      margin: 1%;
+      .profile-image {
+        object-fit: cover;
+        border-radius: 20px;
+      }
+    }
     .loan-actions {
       align-self: flex-end;
       margin: 0 1%;

src/app/loans/loans-view/loans-view.component.ts

@@ -7,10 +7,10 @@ import { MatDialog } from '@angular/material';
 import { LoansService } from '../loans.service';
 
 /** Custom Buttons Configuration */
-import { ButtonConfig } from './button-config';
+import { LoansAccountButtonConfiguration } from './loan-accounts-button-config';
 
 /** Dialog Components */
-import { LoansConfirmationDialogBoxComponent } from '../custom-dialog/loans-confirmation-dialog-box/loans-confirmation-dialog-box.component';
+import { ConfirmationDialogComponent } from '../../shared/confirmation-dialog/confirmation-dialog.component';
 import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component';
 
 @Component({
@@ -20,23 +20,20 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co
 })
 export class LoansViewComponent implements OnInit {
 
+  /** Loan Details Data */
   loanDetailsData: any;
+  /** Loan Datatables */
   loanDatatables: any;
+  /** Recalculate Interest */
   recalculateInterest: any;
+  /** Status */
   status: string;
-  buttons: {
+  /** Loan Id */
-    singlebuttons: {
-      name: string,
-      icon: string,
-      taskPermissionName: string,
-    }[],
-    options?: {
-      name: string,
-      taskPermissionName: string
-    }[]
-  };
   loanId: number;
+  /** Client Id */
   clientId: any;
+  /** Button Configuration */
+  buttonConfig: LoansAccountButtonConfiguration;
 
   constructor(private route: ActivatedRoute,
               private router: Router,
@@ -54,72 +51,69 @@ export class LoansViewComponent implements OnInit {
 
     this.recalculateInterest = this.loanDetailsData.recalculateInterest || true;
     this.status = this.loanDetailsData.status.value;
+    this.setConditionalButtons();
+  }
+
+  // Defines the buttons based on the status of the loan account
+  setConditionalButtons() {
+    this.buttonConfig = new LoansAccountButtonConfiguration(this.status);
 
-    // Defines the buttons based on the status of the loan account
     if (this.status === 'Submitted and pending approval') {
-      this.buttons = ButtonConfig['Submitted and pending approval'];
 
-      this.buttons.options.splice(1, 0, {
+      this.buttonConfig.addOption({
-        name: (this.loanDetailsData.loanOfficerName ? 'Change Loan Officer' : 'Assign Loan Officer' ),
+        name: (this.loanDetailsData.loanOfficerName ? 'Change Loan Officer' : 'Assign Loan Officer'),
         taskPermissionName: 'DISBURSE_LOAN'
       });
 
       if (this.loanDetailsData.isVariableInstallmentsAllowed) {
-        this.buttons.options.push({
+        this.buttonConfig.addOption({
-            name: 'Edit Repayment Schedule',
+          name: 'Edit Repayment Schedule',
-            taskPermissionName: 'ADJUST_REPAYMENT_SCHEDULE'
+          taskPermissionName: 'ADJUST_REPAYMENT_SCHEDULE'
-        }) ;
+        });
-    }
+      }
 
     } else if (this.status === 'Approved') {
-      this.buttons = ButtonConfig['Approved'];
 
-      this.buttons.singlebuttons.splice(1, 0, {
+      this.buttonConfig.addButton({
-        name: (this.loanDetailsData.loanOfficerName ? 'Change Loan Officer' : 'Assign Loan Officer' ),
+        name: (this.loanDetailsData.loanOfficerName ? 'Change Loan Officer' : 'Assign Loan Officer'),
         icon: 'fa fa-user',
         taskPermissionName: 'DISBURSE_LOAN'
       });
 
     } else if (this.status === 'Active') {
-      this.buttons = ButtonConfig['Active'];
 
       if (this.loanDetailsData.canDisburse) {
-        this.buttons.singlebuttons.splice(1, 0, {
+        this.buttonConfig.addButton({
-            name: 'Disburse',
+          name: 'Disburse',
-            icon: 'fa fa-flag',
+          icon: 'fa fa-flag',
-            taskPermissionName: 'DISBURSE_LOAN'
+          taskPermissionName: 'DISBURSE_LOAN'
         });
-        this.buttons.singlebuttons.splice(1, 0, {
+        this.buttonConfig.addButton({
-            name: 'Disburse To Savings',
+          name: 'Disburse To Savings',
-            icon: 'fa fa-flag',
+          icon: 'fa fa-flag',
-            taskPermissionName: 'DISBURSETOSAVINGS_LOAN'
+          taskPermissionName: 'DISBURSETOSAVINGS_LOAN'
         });
       }
 
       // loan officer not assigned to loan, below logic
       // helps to display otherwise not
       if (!this.loanDetailsData.loanOfficerName) {
-        this.buttons.singlebuttons.splice(1, 0, {
+        this.buttonConfig.addButton({
-            name: 'Assign Loan Officer',
+          name: 'Assign Loan Officer',
-            icon: 'fa fa-user',
+          icon: 'fa fa-user',
-            taskPermissionName: 'UPDATELOANOFFICER_LOAN'
+          taskPermissionName: 'UPDATELOANOFFICER_LOAN'
         });
       }
 
       if (this.recalculateInterest) {
-          this.buttons.singlebuttons.splice(1, 0, {
+        this.buttonConfig.addButton({
-              name: 'Prepay Loan',
+          name: 'Prepay Loan',
-              icon: 'fa fa-money',
+          icon: 'fa fa-money',
-              taskPermissionName: 'REPAYMENT_LOAN'
+          taskPermissionName: 'REPAYMENT_LOAN'
-          });
+        });
       }
 
-    } else if (this.status === 'Overpaid') {
-      this.buttons = ButtonConfig['Overpaid'];
-    } else if (this.status === 'Closed (written off)') {
-      this.buttons = ButtonConfig['ClosedWrittenOff'];
     }
-
   }
 
   loanAction(button: string) {
@@ -146,8 +140,8 @@ export class LoansViewComponent implements OnInit {
    * Recover from guarantor action
    */
   private recoverFromGuarantor() {
-    const recoverFromGuarantorDialogRef = this.dialog.open(LoansConfirmationDialogBoxComponent, {
+    const recoverFromGuarantorDialogRef = this.dialog.open(ConfirmationDialogComponent, {
-      data: { heading: 'Recover from Guarantor', dialogContext: 'Are you sure you want recover from Guarantor ?' }
+      data: { heading: 'Recover from Guarantor', dialogContext: 'Are you sure you want recover from Guarantor ?', type: 'Mild' }
     });
     recoverFromGuarantorDialogRef.afterClosed().subscribe((response: any) => {
       if (response.confirm) {
@@ -158,6 +152,9 @@ export class LoansViewComponent implements OnInit {
     });
   }
 
+  /**
+   * Delete loan Account
+   */
   private deleteLoanAccount() {
     const deleteGuarantorDialogRef = this.dialog.open(DeleteDialogComponent, {
       data: { deleteContext: `with loan id: ${this.loanId}` }

src/app/loans/loans-view/overdue-charges-tab/overdue-charges-tab.component.ts

@@ -33,7 +33,7 @@ export class OverdueChargesTabComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route.
    */
   constructor(private route: ActivatedRoute) {
-    this.route.data.subscribe(( data: { loanDetailsData: any }) => {
+    this.route.parent.data.subscribe(( data: { loanDetailsData: any }) => {
       this.loanDetails = data.loanDetailsData;
     });
   }

src/app/loans/loans.module.ts

@@ -9,7 +9,7 @@ import { SharedModule } from 'app/shared/shared.module';
 import { PipesModule } from '../pipes/pipes.module';
 
 /** Custom Components */
-import { AddLoanChargeComponent } from './add-loan-charge/add-loan-charge.component';
+import { AddLoanChargeComponent } from './loans-view/loan-account-actions/add-loan-charge/add-loan-charge.component';
 import { LoansViewComponent } from './loans-view/loans-view.component';
 import { GeneralTabComponent } from './loans-view/general-tab/general-tab.component';
 import { AccountDetailsComponent } from './loans-view/account-details/account-details.component';

src/app/loans/loans.service.ts

@@ -358,4 +358,10 @@ export class LoansService {
     return this.http.get(`/loans/${loanId}/template`, { params: httpParams });
   }
 
+  guarantorAccountResource(loanId: string, clientId: any): Observable<any> {
+    const httpParams = new HttpParams()
+      .set('clientId', clientId);
+    return this.http.get(`/loans/${loanId}/guarantors/accounts/template`, { params: httpParams });
+  }
+
 }

src/app/shared/confirmation-dialog/confirmation-dialog.component.html

@@ -4,5 +4,5 @@
 </div>
 <mat-dialog-actions align="end">
   <button mat-raised-button mat-dialog-close>Cancel</button>
-  <button mat-raised-button color="warn" [mat-dialog-close]="{ confirm: true }">Confirm</button>
+  <button mat-raised-button color={{color}} [mat-dialog-close]="{ confirm: true }">Confirm</button>
 </mat-dialog-actions>

src/app/shared/confirmation-dialog/confirmation-dialog.component.ts

@@ -12,6 +12,7 @@ import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
 })
 export class ConfirmationDialogComponent implements OnInit {
 
+  color: string;
   /**
    * @param {MatDialogRef} dialogRef Component reference to dialog.
    * @param {any} data Provides a deleteContext.
@@ -20,6 +21,24 @@ export class ConfirmationDialogComponent implements OnInit {
               @Inject(MAT_DIALOG_DATA) public data: any) { }
 
   ngOnInit() {
+    this.setColor();
   }
 
+  setColor() {
+    switch (this.data.type) {
+      case 'Basic':
+        this.color = 'primary';
+        break;
+      case 'Mild':
+        this.color = 'accent';
+        break;
+      case 'Strong':
+        this.color = 'warn';
+        break;
+      default:
+        this.color = 'warn';
+    }
+  }
+
+
 }