Fix issues in account actions (#1599)

Co-authored-by: Jose Alberto Hernandez <alberto@MacBook-Pro.local>

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

@@ -14,63 +14,63 @@ import { LoansService } from '../loans.service';
 @Injectable()
 export class LoanActionButtonResolver implements Resolve<Object> {
 
-    /**
-     * @param {LoansService} LoansService Loans service.
-     */
-    constructor(private loansService: LoansService) { }
+  /**
+   * @param {LoansService} LoansService Loans service.
+   */
+  constructor(private loansService: LoansService) { }
 
-    /**
-     * Returns the Loans Notes Data.
-     * @returns {Observable<any>}
-     */
-    resolve(route: ActivatedRouteSnapshot): Observable<any> {
-        const loanId = route.parent.paramMap.get('loanId');
-        const loanActionButton = route.paramMap.get('action');
-        if (loanActionButton === 'Assign Loan Officer' || loanActionButton === 'Change Loan Officer') {
-            return this.loansService.getLoanTemplate(loanId);
-        } else if (loanActionButton === 'Make Repayment') {
-            return this.loansService.getLoanActionTemplate(loanId, 'repayment');
-        } else if (loanActionButton === 'Goodwill Credit') {
-          return this.loansService.getLoanActionTemplate(loanId, 'goodwillCredit');
-        } else if (loanActionButton === 'Payout Refund') {
-          return this.loansService.getLoanActionTemplate(loanId, 'payoutRefund');
-        } else if (loanActionButton === 'Merchant Issued Refund') {
-          return this.loansService.getLoanActionTemplate(loanId, 'merchantIssuedRefund');
-        } else if (loanActionButton === 'Credit Balance Refund') {
-          return this.loansService.getLoanActionTemplate(loanId, 'creditBalanceRefund');
-        } else if (loanActionButton === 'Waive Interest') {
-          return this.loansService.getLoanActionTemplate(loanId, 'waiveinterest');
-        } else if (loanActionButton === 'Write Off') {
-            return this.loansService.getLoanActionTemplate(loanId, 'writeoff');
-        } else if (loanActionButton === 'Close') {
-            return this.loansService.getLoanActionTemplate(loanId, 'close');
-        } else if (loanActionButton === 'Close (as Rescheduled)') {
-            return this.loansService.getLoanActionTemplate(loanId, 'close-rescheduled');
-        } else if (loanActionButton === 'Reschedule') {
-            return this.loansService.rescheduleLoanTemplate();
-        } else if (loanActionButton === 'Prepay Loan') {
-            return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
-        } else if (loanActionButton === 'Add Collateral') {
-            return this.loansService.getLoanCollateralTemplate(loanId);
-        } else if (loanActionButton === 'Disburse to Savings') {
-            return this.loansService.getLoanActionTemplate(loanId, 'disburseToSavings');
-        } else if (loanActionButton === 'Recovery Payment') {
-            return this.loansService.getLoanActionTemplate(loanId, 'recoverypayment');
-        } else if (loanActionButton === 'View Guarantors') {
-            return this.loansService.getLoanAccountResource(loanId, 'guarantors');
-        } else if (loanActionButton === 'Create Guarantor') {
-            return this.loansService.getGuarantorTemplate(loanId);
-        } else if (loanActionButton === 'Disburse') {
-            return this.loansService.getLoanActionTemplate(loanId, 'disburse');
-        } else if (loanActionButton === 'Loan Screen Reports') {
-            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;
-        }
+  /**
+   * Returns the Loans Notes Data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const loanId = route.parent.paramMap.get('loanId');
+    const loanActionButton = route.paramMap.get('action');
+    if (loanActionButton === 'Assign Loan Officer' || loanActionButton === 'Change Loan Officer') {
+      return this.loansService.getLoanTemplate(loanId);
+    } else if (loanActionButton === 'Make Repayment') {
+      return this.loansService.getLoanActionTemplate(loanId, 'repayment');
+    } else if (loanActionButton === 'Goodwill Credit') {
+      return this.loansService.getLoanActionTemplate(loanId, 'goodwillCredit');
+    } else if (loanActionButton === 'Payout Refund') {
+      return this.loansService.getLoanActionTemplate(loanId, 'payoutRefund');
+    } else if (loanActionButton === 'Merchant Issued Refund') {
+      return this.loansService.getLoanActionTemplate(loanId, 'merchantIssuedRefund');
+    } else if (loanActionButton === 'Credit Balance Refund') {
+      return this.loansService.getLoanActionTemplate(loanId, 'creditBalanceRefund');
+    } else if (loanActionButton === 'Waive Interest') {
+      return this.loansService.getLoanActionTemplate(loanId, 'waiveinterest');
+    } else if (loanActionButton === 'Write Off') {
+      return this.loansService.getLoanActionTemplate(loanId, 'writeoff');
+    } else if (loanActionButton === 'Close') {
+      return this.loansService.getLoanActionTemplate(loanId, 'close');
+    } else if (loanActionButton === 'Close (as Rescheduled)') {
+      return this.loansService.getLoanActionTemplate(loanId, 'close-rescheduled');
+    } else if (loanActionButton === 'Reschedule') {
+      return this.loansService.rescheduleLoanTemplate();
+    } else if (loanActionButton === 'Prepay Loan') {
+      return this.loansService.getLoanActionTemplate(loanId, 'prepayLoan');
+    } else if (loanActionButton === 'Add Collateral') {
+      return this.loansService.getLoanCollateralTemplate(loanId);
+    } else if (loanActionButton === 'Disburse to Savings') {
+      return this.loansService.getLoanActionTemplate(loanId, 'disburseToSavings');
+    } else if (loanActionButton === 'Recovery Payment') {
+      return this.loansService.getLoanActionTemplate(loanId, 'recoverypayment');
+    } else if (loanActionButton === 'View Guarantors') {
+      return this.loansService.getLoanAccountResource(loanId, 'guarantors');
+    } else if (loanActionButton === 'Create Guarantor') {
+      return this.loansService.getGuarantorTemplate(loanId);
+    } else if (loanActionButton === 'Disburse') {
+      return this.loansService.getLoanActionTemplate(loanId, 'disburse');
+    } else if (loanActionButton === 'Loan Screen Reports') {
+      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/loans-view/charges-tab/charges-tab.component.html

@@ -9,8 +9,8 @@
 
       <ng-container matColumnDef="feepenalty">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Fee/Penalty </th>
-        <td mat-cell *matCellDef="let charge"> 
-          <span *ngIf="charge.penalty">Penalty</span>  
+        <td mat-cell *matCellDef="let charge">
+          <span *ngIf="charge.penalty">Penalty</span>
           <span *ngIf="!charge.penalty">Fee</span>
         </td>
       </ng-container>
@@ -31,28 +31,28 @@
       </ng-container>
 
       <ng-container matColumnDef="due">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Due </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amount| number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Due </th>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amount| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="paid">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Paid </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid| number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Paid </th>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountPaid| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="waived">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Waived </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived| number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Waived </th>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountWaived| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="outstanding">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Outstanding </th>
-        <td mat-cell *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountOutstanding| number }} </td>
+        <th mat-header-cell class="r-amount" *matHeaderCellDef mat-sort-header> Outstanding </th>
+        <td mat-cell class="r-amount" *matCellDef="let charge"> {{ charge.currency.displaySymbol }}{{ charge.amountOutstanding| number }} </td>
       </ng-container>
 
       <ng-container matColumnDef="actions">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Actions </th>
-        <td mat-cell *matCellDef="let charge">
+        <th mat-header-cell class="center" *matHeaderCellDef mat-sort-header> Actions </th>
+        <td mat-cell class="center" *matCellDef="let charge">
           <span *ngIf="status === 'Submitted and pending approval'">
             <button class="account-action-button" mat-raised-button color="primary" matTooltip="Edit Charge"
               (click)="routeEdit($event); editCharge(charge)">

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -35,14 +35,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -50,14 +50,14 @@
 
         </div>
 
-        <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
-            *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayoutGap="5px" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!loanChargeForm.valid"
+          *mifosxHasPermission="'CREATE_LOANCHARGE'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -47,14 +47,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
-            *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
+          *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -33,14 +33,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -126,14 +126,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
     <ng-container *ngIf="!(newGuarantorForm.controls.name === undefined)">

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

@@ -1,13 +1,13 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
     <form [formGroup]="disbursementForm" (ngSubmit)="submit()">
-    
+
       <mat-card-content>
-    
+
         <div fxLayout="column">
-    
+
           <mat-form-field (click)="disbursementDatePicker.open()">
             <mat-label>Disbursement On</mat-label>
             <input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="disbursementDatePicker" required
@@ -18,7 +18,7 @@
               Disbursement Date is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-    
+
           <mat-form-field>
             <mat-label>Transaction amount</mat-label>
             <input matInput required formControlName="transactionAmount">
@@ -26,7 +26,7 @@
               Transaction Amount is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-    
+
           <mat-form-field *ngIf="dataObject.fixedEmiAmount !== null || dataObject.fixedEmiAmount !== undefined">
             <mat-label>Fixed EMI amount</mat-label>
             <input matInput required formControlName="fixedEmiAmount">
@@ -34,22 +34,22 @@
               Fixed EMI Amount is <strong>required</strong>
             </mat-error>
           </mat-form-field>
-    
+
           <mat-form-field>
             <mat-label>Note</mat-label>
             <textarea matInput formControlName="note"></textarea>
           </mat-form-field>
-    
+
         </div>
-    
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-    
+
       </mat-card-content>
-    
+
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -87,14 +87,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -51,14 +51,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

src/app/loans/loans-view/loan-account-actions/loan-credit-balance-refund/loan-credit-balance-refund.component.html

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -39,14 +39,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-          <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
-            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-        </mat-card-actions>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
+          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
+      </mat-card-actions>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -92,14 +92,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,57 +1,57 @@
 <div class="container m-b-20">
 
-    <mat-card>
+  <mat-card>
 
-        <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
+    <form [formGroup]="loanScreenReportForm" (ngSubmit)="generate()">
 
-            <mat-card-content>
+      <mat-card-content>
 
-                <div>
+        <div>
 
-                    <mat-form-field fxFlex>
-                        <mat-label>Loan Screen Reports</mat-label>
-                        <mat-select formControlName="templateId">
-                            <mat-option *ngFor="let template of templatesData" [value]="template.id">
-                                {{ template.name }}
-                            </mat-option>
-                        </mat-select>
-                        <mat-error *ngIf="loanScreenReportForm.controls.templateId.hasError('required')">
-                            Screen Report is <strong>required</strong>
-                        </mat-error>
-                    </mat-form-field>
+          <mat-form-field fxFlex>
+            <mat-label>Loan Screen Reports</mat-label>
+            <mat-select formControlName="templateId">
+              <mat-option *ngFor="let template of templatesData" [value]="template.id">
+                {{ template.name }}
+              </mat-option>
+            </mat-select>
+            <mat-error *ngIf="loanScreenReportForm.controls.templateId.hasError('required')">
+              Screen Report is <strong>required</strong>
+            </mat-error>
+          </mat-form-field>
 
-                </div>
+        </div>
 
-            </mat-card-content>
+      </mat-card-content>
 
-            <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-                <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-                <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
-                    <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
-                </button>
-            </mat-card-actions>
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+        <button mat-raised-button color="primary" [disabled]="!loanScreenReportForm.valid">
+          <fa-icon icon="cogs" size="sm"></fa-icon>&nbsp;&nbsp;Generate Report
+        </button>
+      </mat-card-actions>
 
-        </form>
+    </form>
 
-    </mat-card>
+  </mat-card>
 
 </div>
 
 <div #output class="container">
 
-    <mat-card fxLayout="column" fxLayoutGap="3%">
+  <mat-card fxLayout="column" fxLayoutGap="3%">
 
-        <div fxLayoutAlign="end">
-            <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
-                <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
-                Print
-            </button>
-        </div>
+    <div fxLayoutAlign="end">
+      <button mat-stroked-button color="primary" [disabled]="!template" (click)="print()">
+        <fa-icon icon="file"></fa-icon>&nbsp;&nbsp;
+        Print
+      </button>
+    </div>
 
-        <div #screenReport class="screen-report">
-            <p>Please select a screen report.</p>
-        </div>
+    <div #screenReport class="screen-report">
+      <p>Please select a screen report.</p>
+    </div>
 
-    </mat-card>
+  </mat-card>
 
 </div>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -87,14 +87,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -100,14 +100,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -82,14 +82,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 

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

@@ -1,8 +1,8 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
-    <div class="viewGuarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
+    <div class="view-guarantors-account-tables" fxLayout="row" fxLayoutGap="2%">
 
       <div fxFlex="49%">
         <table>
@@ -66,9 +66,9 @@
     <div fxFlexFill *ngIf="guarantorDetails" fxLayout="row wrap" fxLayout.lt-md="column">
 
       <!-- guarantors details table -->
-      <div class="headingContent">
+      <div class="heading-content">
         <div fxLayout="column" fxFlex="50%">
-          <div class="headingName">
+          <div class="heading-name">
             <h3>Guarantors Details</h3>
           </div>
         </div>
@@ -82,7 +82,6 @@
 
       <table fxFlexFill mat-table
         [dataSource]="guarantorDetails|accountsFilter:'guarantor':showDeletedGuarantorsAccounts">
-        <!-- <ng-container *ngIf="expression"> -->
         <ng-container matColumnDef="fullname">
           <th mat-header-cell *matHeaderCellDef> Name </th>
           <td mat-cell *matCellDef="let guarantor">
@@ -165,15 +164,13 @@
               </button>
               <span *ngIf="guarantor.status">
                 <button mat-raised-button class="account-action-button" color="warn"
-                  *mifosxHasPermission='"DELETE_GUARANTOR"' (click)="deleteGuarantor(guarantor.id)">
+                  *mifosxHasPermission="'DELETE_GUARANTOR'" (click)="deleteGuarantor(guarantor.id)">
                   <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
                 </button>
               </span>
             </span>
           </td>
         </ng-container>
-        <!-- </ng-container> -->
-
 
         <tr mat-header-row *matHeaderRowDef="guarantorsDisplayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: guarantorsDisplayedColumns"></tr>

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

@@ -1,4 +1,4 @@
-.viewGuarantors-account-tables {
+.view-guarantors-account-tables {
 	padding: 1%;
 	margin: 1%;
 	.table-headers {
@@ -20,13 +20,13 @@ table {
 	}
 }
 
-.headingContent{
+.heading-content{
   margin-bottom: 1%;
   margin-top: 1%;
   width: 100%;
 }
 
-.headingName {
+.heading-name {
   display: block;
 }
 

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -34,14 +34,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
@@ -26,14 +26,14 @@
 
         </div>
 
-        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-          <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>
-
       </mat-card-content>
 
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <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>
+
     </form>
 
   </mat-card>

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

@@ -1,10 +1,10 @@
-<div class="container">
+<div class="container mat-elevation-z8">
 
   <mat-card>
 
     <mat-card-content>
 
-      <form [formGroup]="writeOffForm" (ngSubmit)="submit()">
+      <form [formGroup]="writeOffForm">
 
         <div fxLayout="column">
 
@@ -33,14 +33,14 @@
 
       </form>
 
-      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
-        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
-        <button mat-raised-button color="primary" (click)="submit()"
-          *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
-      </mat-card-actions>
-
     </mat-card-content>
 
+    <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+      <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+      <button mat-raised-button color="primary" (click)="submit()"
+        *mifosxHasPermission="'WRITEOFF_LOAN'">Submit</button>
+    </mat-card-actions>
+
   </mat-card>
 
 </div>

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

@@ -90,7 +90,7 @@ export class ViewChargeComponent {
           dateFormat,
           locale
         };
-        this.loansService.executeLoansAccountChargesCommand(this.chargeData.loanId, 'paycharge', dataObject, this.chargeData.id)
+        this.loansService.executeLoansAccountChargesCommand(this.chargeData.loanId, 'pay', dataObject, this.chargeData.id)
           .subscribe(() => {
             this.reload();
           });