Set autosize and min two rows in textarea controls (#1604)

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

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

@@ -29,19 +29,19 @@
 
           <mat-form-field>
             <mat-label>Description</mat-label>
-            <textarea matInput formControlName="description"></textarea>
+            <textarea matInput formControlName="description" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!collateralForm.valid"
+            *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</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]="!collateralForm.valid"
-          *mifosxHasPermission="'CREATE_COLLATERAL'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -50,13 +50,13 @@
 
         </div>
 
-      </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>
 
-      <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>
 
     </form>
 

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

@@ -42,18 +42,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!approveLoanForm.valid"
+            *mifosxHasPermission="'APPROVE_LOAN'">Submit</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]="!approveLoanForm.valid"
-          *mifosxHasPermission="'APPROVE_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -33,13 +33,13 @@
 
         </div>
 
-      </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>
 
-      <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>
 
     </form>
 

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

@@ -21,18 +21,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</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]="!closeLoanForm.valid"
-          *mifosxHasPermission="'CLOSEASRESCHEDULED_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -126,13 +126,13 @@
 
         </div>
 
-      </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>
 
-      <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>
 
     </form>
 

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

@@ -37,18 +37,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!disbursementForm.valid"
+            *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</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]="!disbursementForm.valid"
-          *mifosxHasPermission="'DISBURSETOSAVINGS_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -42,14 +42,12 @@
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandcollapsebutton" (click)="addPaymentDetails()">
-              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-                <i class="fa fa-minus"></i>
-              </button>
-              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-                <i class="fa fa-plus"></i>
-              </button>
+            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+              <mat-slide-toggle [(ngModel)]="showPaymentDetails">
+                <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">Show Payment Details</span>
+                </div>
+              </mat-slide-toggle>
             </span>
           </div>
 
@@ -82,18 +80,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!disbursementLoanForm.valid"
+            *mifosxHasPermission="'DISBURSE_LOAN'">Submit</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]="!disbursementLoanForm.valid"
-          *mifosxHasPermission="'DISBURSE_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -0,0 +1,14 @@
+<div class="container mat-elevation-z8">
+
+  <mat-card>
+    <mat-card-content>
+      <mifosx-loans-account-schedule-step></mifosx-loans-account-schedule-step>
+      <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+        <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+      </mat-card-actions>
+
+    </mat-card-content>
+
+  </mat-card>
+
+</div>

src/app/loans/loans-view/loan-account-actions/edit-repayment-schedule/edit-repayment-schedule.component.spec.ts

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

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

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'mifosx-edit-repayment-schedule',
+  templateUrl: './edit-repayment-schedule.component.html',
+  styleUrls: ['./edit-repayment-schedule.component.scss']
+})
+export class EditRepaymentScheduleComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

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

@@ -46,18 +46,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!foreclosureForm.valid"
+            *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</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]="!foreclosureForm.valid"
-          *mifosxHasPermission="'FORECLOSURE_LOAN'">Foreclosure</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -20,7 +20,8 @@
 <mifosx-disburse [dataObject]="actionButtonData" *ngIf="actions['Disburse']"></mifosx-disburse>
 <mifosx-withdrawn-by-client *ngIf="actions['Withdrawn by Client']"></mifosx-withdrawn-by-client>
 <mifosx-add-collateral [dataObject]="actionButtonData" *ngIf="actions['Add Collateral']"></mifosx-add-collateral>
-<mifosx-undo-disbursal *ngIf="actions['Undo Disbursal']"></mifosx-undo-disbursal>
+<mifosx-undo-disbursal *ngIf="actions['Undo Disbursal'] || actions['Undo Last Disbursal']" [actionName]="actionName"></mifosx-undo-disbursal>
 <mifosx-loan-screen-reports [dataObject]="actionButtonData" *ngIf="actions['Loan Screen Reports']"></mifosx-loan-screen-reports>
 <mifosx-approve-loan *ngIf="actions['Approve']" ></mifosx-approve-loan>
 <mifosx-add-loan-charge *ngIf="actions['Add Loan Charge']"></mifosx-add-loan-charge>
+<mifosx-edit-repayment-schedule *ngIf="actions['Edit Repayment Schedule']"></mifosx-edit-repayment-schedule>

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

@@ -32,6 +32,7 @@ export class LoanAccountActionsComponent {
             'Disburse': boolean,
             'Withdrawn by Client': boolean,
             'Undo Disbursal': boolean,
+            'Undo Last Disbursal': boolean,
             'Loan Screen Reports': boolean,
             'Approve': boolean,
             'Add Loan Charge': boolean,
@@ -59,6 +60,7 @@ export class LoanAccountActionsComponent {
               'Disburse':  false,
               'Withdrawn by Client':  false,
               'Undo Disbursal':  false,
+              'Undo Last Disbursal':  false,
               'Loan Screen Reports':  false,
               'Approve':  false,
               'Add Loan Charge':  false,

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

@@ -34,18 +34,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!creditBalanceLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</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]="!creditBalanceLoanForm.valid"
-          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -92,13 +92,13 @@
 
         </div>
 
-      </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>
 
-      <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>
 
     </form>
 

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

@@ -22,14 +22,14 @@
 
         </div>
 
-      </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>
+      </mat-card-content>
 
     </form>
 

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

@@ -21,18 +21,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!closeLoanForm.valid"
+            *mifosxHasPermission="'CLOSE_LOAN'">Submit</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]="!closeLoanForm.valid"
-          *mifosxHasPermission="'CLOSE_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -42,14 +42,12 @@
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandcollapsebutton" (click)="addPaymentDetails()">
-              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-                <i class="fa fa-minus"></i>
-              </button>
-              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-                <i class="fa fa-plus"></i>
-              </button>
+            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+              <mat-slide-toggle [(ngModel)]="showPaymentDetails">
+                <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">Show Payment Details</span>
+                </div>
+              </mat-slide-toggle>
             </span>
           </div>
 
@@ -82,18 +80,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!repaymentLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</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]="!repaymentLoanForm.valid"
-          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -55,14 +55,12 @@
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandcollapsebutton" (click)="addPaymentDetails()">
-              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-                <i class="fa fa-minus"></i>
-              </button>
-              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-                <i class="fa fa-plus"></i>
-              </button>
+            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+              <mat-slide-toggle [(ngModel)]="showPaymentDetails">
+                <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">Show Payment Details</span>
+                </div>
+              </mat-slide-toggle>
             </span>
           </div>
 
@@ -95,18 +93,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!prepayLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</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]="!prepayLoanForm.valid"
-          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -37,14 +37,12 @@
           </mat-form-field>
 
           <div fxFlexFill>
-            <span fxFlex="25%">Show Payment Details</span>
-            <span fxFlex="75%" class="expandcollapsebutton" (click)="addPaymentDetails()">
-              <button mat-raised-button color="primary" *ngIf="showPaymentDetails">
-                <i class="fa fa-minus"></i>
-              </button>
-              <button mat-raised-button color="primary" *ngIf="!showPaymentDetails">
-                <i class="fa fa-plus"></i>
-              </button>
+            <span fxFlex="75%" class="expandcollapsebutton m-l-10 m-t-40" (click)="addPaymentDetails()">
+              <mat-slide-toggle [(ngModel)]="showPaymentDetails">
+                <div [className]="showPaymentDetails ? 'enabled' : 'disabled'">
+                  <span class="m-l-10">Show Payment Details</span>
+                </div>
+              </mat-slide-toggle>
             </span>
           </div>
 
@@ -77,18 +75,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!recoveryRepaymentLoanForm.valid"
+            *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</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]="!recoveryRepaymentLoanForm.valid"
-          *mifosxHasPermission="'REPAYMENT_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -21,18 +21,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!rejectLoanForm.valid"
+            *mifosxHasPermission="'REJECT_LOAN'">Submit</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]="!rejectLoanForm.valid"
-          *mifosxHasPermission="'REJECT_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -9,13 +9,13 @@
         <textarea matInput [formControl]="note"></textarea>
       </mat-form-field>
 
-    </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="'APPROVALUNDO_LOAN'">Submit</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" (click)="submit()"
-        *mifosxHasPermission="'APPROVALUNDO_LOAN'">Submit</button>
-    </mat-card-actions>
+    </mat-card-content>
 
   </mat-card>
 

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

@@ -6,16 +6,16 @@
 
       <mat-form-field fxFlex>
         <mat-label>Note</mat-label>
-        <textarea matInput [formControl]="note"></textarea>
+        <textarea matInput [formControl]="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       </mat-form-field>
 
-    </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="'DISBURSALUNDO_LOAN'">Submit</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" (click)="submit()"
-        *mifosxHasPermission="'DISBURSALUNDO_LOAN'">Submit</button>
-    </mat-card-actions>
+    </mat-card-content>
 
   </mat-card>
 

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

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
 import { FormControl, FormBuilder } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -16,6 +16,8 @@ import { LoansService } from '../../../loans.service';
 })
 export class UndoDisbursalComponent implements OnInit {
 
+  @Input() actionName: string;
+
   /** Loan ID. */
   loanId: any;
   /** Undo disbursal form. */
@@ -45,7 +47,11 @@ export class UndoDisbursalComponent implements OnInit {
    * Submits the undo disbursal form.
    */
   submit() {
-    this.loansService.loanActionButtons(this.loanId, 'undodisbursal', {'note': this.note.value}).subscribe((response: any) => {
+    let command = 'undodisbursal';
+    if (this.actionName === 'Undo Last Disbursal') {
+      command = 'undolastdisbursal';
+    }
+    this.loansService.loanActionButtons(this.loanId, command, {'note': this.note.value}).subscribe((response: any) => {
       this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }

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

@@ -29,18 +29,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!loanInterestForm.valid"
+            *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</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]="!loanInterestForm.valid"
-          *mifosxHasPermission="'WAIVEINTERESTPORTION_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -21,18 +21,18 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
-      </mat-card-content>
+        <mat-card-actions fxLayout="row" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="5px">
+          <button type="button" mat-raised-button [routerLink]="['../../../general']">Cancel</button>
+          <button mat-raised-button color="primary" [disabled]="!withdrawnByClientLoanForm.valid"
+            *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</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]="!withdrawnByClientLoanForm.valid"
-          *mifosxHasPermission="'WITHDRAW_LOAN'">Submit</button>
-      </mat-card-actions>
+      </mat-card-content>
 
     </form>
 

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

@@ -26,20 +26,20 @@
 
           <mat-form-field>
             <mat-label>Note</mat-label>
-            <textarea matInput formControlName="note"></textarea>
+            <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
           </mat-form-field>
 
         </div>
 
       </form>
 
-    </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-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>