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

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

src/app/clients/client-stepper/client-address-step/client-address-step.component.html

@@ -4,18 +4,18 @@
 
   <div fxLayout="row" fxLayoutAlign="flex-end" class="m-b-20">
     <button mat-raised-button color="primary" (click)="addAddress()">
-      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Add
+      <fa-icon icon="plus" class="m-r-10"></fa-icon>Add
     </button>
   </div>
 
-  <mat-accordion>
+  <mat-accordion *ngIf="clientAddressData.length > 0">
 
     <mat-expansion-panel *ngFor="let address of clientAddressData; index as i" class="address">
 
       <mat-expansion-panel-header>
 
         <mat-panel-title>
-          {{ getSelectedValue('addressTypeIdOptions',address.addressTypeId)?.name }}
+          {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
         </mat-panel-title>
 
         <mat-panel-description>
@@ -57,12 +57,12 @@
 
   <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
     <button mat-raised-button matStepperPrevious>
-      <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+      <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
       Previous
     </button>
     <button mat-raised-button matStepperNext>
-      Next&nbsp;&nbsp;
-      <fa-icon icon="arrow-right"></fa-icon>
+      Next
+      <fa-icon icon="arrow-right" class="m-l-10"></fa-icon>
     </button>
   </div>
 

src/app/clients/client-stepper/client-address-step/client-address-step.component.ts

@@ -32,7 +32,9 @@ export class ClientAddressStepComponent {
   /**
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(private dialog: MatDialog) { }
+  constructor(private dialog: MatDialog) {
+    this.clientAddressData = [];
+  }
 
   /**
    * Adds a client address
@@ -42,7 +44,7 @@ export class ClientAddressStepComponent {
       title: 'Add Client Address',
       formfields: this.getAddressFormFields()
     };
-    const addAddressDialogRef = this.dialog.open(FormDialogComponent, { data });
+    const addAddressDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
     addAddressDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         const addressData = response.data.value;
@@ -68,7 +70,7 @@ export class ClientAddressStepComponent {
       formfields: this.getAddressFormFields(address),
       layout: { addButtonText: 'Edit' }
     };
-    const editAddressDialogRef = this.dialog.open(FormDialogComponent, { data });
+    const editAddressDialogRef = this.dialog.open(FormDialogComponent, { data, width: '50rem' });
     editAddressDialogRef.afterClosed().subscribe((response: any) => {
       if (response.data) {
         const addressData = response.data.value;
@@ -216,7 +218,7 @@ export class ClientAddressStepComponent {
    * Returns the array of client addresses
    */
   get address() {
-    return { address: this.clientAddressData };
+    return { address: this.clientAddressData ? this.clientAddressData : [] };
   }
 
 }

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts

@@ -1,6 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input } from '@angular/core';
-import { Router, ActivatedRoute } from '@angular/router';
+import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Components */

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -120,7 +120,7 @@
 
       <mat-form-field fxFlex="98%">
         <mat-label>Remarks</mat-label>
-        <textarea matInput formControlName="remarks"></textarea>
+        <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
       </mat-form-field>
 
     </div>

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -162,7 +162,7 @@
 
   </div>
 
-  <div fxFlexFill *ngIf="clientTemplate.isAddressEnabled && client.address.length" fxLayout="row wrap" fxLayout.lt-md="column">
+  <div fxFlexFill *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length" fxLayout="row wrap" fxLayout.lt-md="column">
 
     <h3 class="mat-h3" fxFlexFill>Address</h3>
 
@@ -175,7 +175,7 @@
         <mat-expansion-panel-header>
 
           <mat-panel-title>
-            {{ getSelectedValue('addressTypeIdOptions',address.addressTypeId)?.name }}
+            {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
           </mat-panel-title>
 
           <mat-panel-description>
@@ -211,7 +211,7 @@
 
 <div fxLayout="row" class="margin-t" fxLayout.xs="column" fxLayoutAlign="center" fxLayoutGap="2%">
   <button mat-raised-button matStepperPrevious>
-    <fa-icon icon="arrow-left"></fa-icon>&nbsp;&nbsp;
+    <fa-icon icon="arrow-left" class="m-r-10"></fa-icon>
     Previous
   </button>
   <button mat-raised-button [routerLink]="['../']">

src/app/clients/clients-view/client-actions/accept-client-transfer/accept-client-transfer.component.html

@@ -15,7 +15,7 @@
 
         <mat-form-field fxFlex>
           <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
+          <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </mat-card-content>

src/app/clients/clients-view/client-actions/reject-client-transfer/reject-client-transfer.component.html

@@ -15,7 +15,7 @@
 
         <mat-form-field fxFlex>
           <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
+          <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </mat-card-content>

src/app/clients/clients-view/client-actions/take-survey/take-survey.component.ts

@@ -50,7 +50,7 @@ export class TakeSurveyComponent {
               private authenticationService: AuthenticationService) {
     this.route.data.subscribe((data: { clientActionData: any }) => {
       this.allSurveyData = data.clientActionData;
-      this.clientId = this.route.parent.parent.snapshot.paramMap.get('clientId');
+      this.clientId = this.route.parent.snapshot.params['clientId'];
     });
     /** Retrieves User ID */
     const savedCredentials = this.authenticationService.getCredentials();
@@ -102,22 +102,15 @@ export class TakeSurveyComponent {
    */
   submit() {
     this.formData = {
-      userId: 0,
-      clientId: 0,
-      surveyId: 0,
+      userId: this.userId,
+      clientId: this.clientId,
+      surveyId: this.surveyData.id,
       surveyName: '',
       username: '',
       id: 0,
       scorecardValues: []
     };
 
-    this.formData.userId = this.userId;
-    this.formData.clientId = this.clientId;
-    this.formData.surveyId = this.surveyData.id;
-    this.formData.surveyName = '';
-    this.formData.username = '';
-    this.formData.id = 0;
-
     this.surveyData.questionDatas.forEach((elem: any) => {
       if (elem.answer) {
         const tmp = {
@@ -129,8 +122,9 @@ export class TakeSurveyComponent {
         this.formData.scorecardValues.push(tmp);
       }
     });
+
     this.clientsService.createNewSurvey(this.surveyData.id, this.formData).subscribe(() => {
-      this.router.navigate(['../'], { relativeTo: this.route });
+      this.router.navigate(['../../general'], { relativeTo: this.route });
     });
   }
 

src/app/clients/clients-view/client-actions/transfer-client/transfer-client.component.html

@@ -32,7 +32,7 @@
 
           <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>

src/app/clients/clients-view/client-actions/undo-client-transfer/undo-client-transfer.component.html

@@ -15,7 +15,7 @@
 
         <mat-form-field fxFlex>
           <mat-label>Note</mat-label>
-          <textarea matInput formControlName="note"></textarea>
+          <textarea matInput formControlName="note" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
         </mat-form-field>
 
       </mat-card-content>

src/app/clients/clients-view/client-actions/view-survey/view-survey.component.html

@@ -20,23 +20,23 @@
     <table mat-table [dataSource]="dataSource" matSort>
 
       <ng-container matColumnDef="surveyName">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header='surveyName'> Survey </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="surveyName"> Survey </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.surveyName }} </td>
       </ng-container>
 
       <ng-container matColumnDef="createdBy">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header='createdBy'> Created By </th>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="createdBy"> Created By </th>
         <td mat-cell *matCellDef="let survey"> {{ survey.createdBy }} </td>
       </ng-container>
 
       <ng-container matColumnDef="date">
-        <th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.date  | dateFormat }} </td>
+        <th mat-header-cell *matHeaderCellDef mat-sort-header> DateTime </th>
+        <td mat-cell *matCellDef="let survey"> {{ survey.date  | datetimeFormat }} </td>
       </ng-container>
 
       <ng-container matColumnDef="score">
         <th mat-header-cell *matHeaderCellDef mat-sort-header> Score </th>
-        <td mat-cell *matCellDef="let survey"> {{ survey.score }} </td>
+        <td mat-cell *matCellDef="let survey"> {{ survey.score | number }} </td>
       </ng-container>
 
       <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>

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

@@ -10,13 +10,16 @@
             [src]="(clientImage)?clientImage:'assets/images/user_placeholder.png'">
         </div>
         <div fxLayoutAlign="center center" class="m-b-5">
-          <button class="client-image-button" mat-raised-button (click)="doAction('Upload Image')" matTooltip="Upload Image" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          <button class="client-image-button" mat-raised-button (click)="doAction('Upload Image')"
+            matTooltip="Upload Image" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
             <i class="fa fa-upload"></i>
           </button>
-          <button class="client-image-button" mat-raised-button (click)="doAction('Capture Image')" matTooltip="Capture Image" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
+          <button class="client-image-button" mat-raised-button (click)="doAction('Capture Image')"
+            matTooltip="Capture Image" *mifosxHasPermission="'CREATE_CLIENTIMAGE'">
             <i class="fa fa-camera"></i>
           </button>
-          <button class="client-image-button" mat-raised-button (click)="doAction('Delete Image')" matTooltip="Delete Image" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
+          <button class="client-image-button" mat-raised-button (click)="doAction('Delete Image')"
+            matTooltip="Delete Image" *mifosxHasPermission="'DELETE_CLIENTIMAGE'">
             <i class="fa fa-trash"></i>
           </button>
           <br>
@@ -26,11 +29,19 @@
 
       <div class="mat-typography client-card-title">
 
-        <mat-card-title>
-          <h3>
-            <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup" [matTooltip]="clientViewData.status.value"></i>
+        <mat-card-title fxLayout="row wrap" class="content">
+          <h3 fxFlex="95%">
+            <i class="fa fa-stop" [ngClass]="clientViewData.status.code|statusLookup"
+              [matTooltip]="clientViewData.status.value"></i>
             <b>Client Name :</b> {{clientViewData.displayName}}
           </h3>
+          <div fxFlex="5%">
+            <button mat-icon-button [matMenuTriggerFor]="clientMenu" aria-label="Client actions" yPosition="below">
+              <mat-icon matListIcon class="actions-menu">
+                <fa-icon icon="bars" size="sm"></fa-icon>
+              </mat-icon>
+            </button>
+          </div>
         </mat-card-title>
 
         <mat-card-subtitle>
@@ -38,81 +49,123 @@
             <b>Office :</b> {{clientViewData.officeName}}<br />
             <b>Client :</b> {{clientViewData.accountNo}}<br />
             <b>External Id:</b> {{clientViewData.externalId}}<br />
-            <span *ngIf="clientViewData.staffName"><b>Staff :</b> {{clientViewData.staffName || 'Unassigned'}}<br /></span>
-            <span *ngIf="clientViewData.activationDate"><b>Activation Date :</b> {{clientViewData.activationDate | dateFormat}}<br /></span>
+            <span *ngIf="clientViewData.staffName"><b>Staff :</b> {{clientViewData.staffName ||
+              'Unassigned'}}<br /></span>
+            <span *ngIf="clientViewData.activationDate"><b>Activation Date :</b> {{clientViewData.activationDate |
+              dateFormat}}<br /></span>
             <span *ngIf="clientViewData.groups.length > 0">
               Member Of :
               <span *ngFor="let group of clientViewData.groups">
                 <a>{{group.name}}</a>&nbsp;
               </span>
             </span>
-            <br/>
+            <br />
           </p>
         </mat-card-subtitle>
 
       </div>
 
-    </mat-card-title-group>
+      <mat-menu #clientMenu="matMenu">
+        <button mat-menu-item [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CLIENT'">
+          <mat-icon matListIcon>
+            <fa-icon icon="edit" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Edit</span>
+        </button>
 
-    <mat-card-actions class="client-actions">
+        <button mat-menu-item [matMenuTriggerFor]="accountApplications">
+          <mat-icon matListIcon>
+            <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Applications</span>
+        </button>
 
-      <span *mifosxHasPermission="'UPDATE_CLIENT'">
-        <button mat-raised-button [routerLink]="['edit']">
-          <i class="fa fa-edit"></i>Edit</button>
-      </span>
+        <button mat-menu-item [matMenuTriggerFor]="Actions">
+          <mat-icon matListIcon>
+            <fa-icon icon="tasks" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Actions</span>
+        </button>
+
+        <button mat-menu-item (click)="doAction('Assign Staff')" *ngIf="!clientViewData.staffId">
+          <mat-icon matListIcon>
+            <fa-icon icon="user-tie" size="sm"></fa-icon>
+          </mat-icon>
+          <span>Assign Staff</span>
+        </button>
+
+        <span *ngIf="clientViewData.staffId">
+          <button mat-menu-item *mifosxHasPermission="'UNASSIGNSTAFF_CLIENT'" (click)="doAction('Unassign Staff')">
+            <mat-icon matListIcon>
+              <fa-icon icon="user-tie" size="sm"></fa-icon>
+            </mat-icon>
+            <span>Unassign Staff</span>
+          </button>
+        </span>
+
+        <button mat-menu-item [matMenuTriggerFor]="More">More</button>
 
-      <button mat-raised-button [matMenuTriggerFor]="Applications">
-        <i class="fa fa-file"></i>Applications</button>
-      <mat-menu #Applications="matMenu">
-        <button mat-menu-item [routerLink]="['loans-accounts', 'create']">New Loan Account</button>
-        <button mat-menu-item [routerLink]="['savings-accounts', 'create']">New Savings Account</button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'" [routerLink]="['shares-accounts', 'create']">New Share Account</button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'" [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">New Recurring Deposit Account</button>
-        <button mat-menu-item *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'" [routerLink]="['fixed-deposits-accounts', 'create']">New Fixed Deposits Account</button>
       </mat-menu>
 
-      <button mat-raised-button [matMenuTriggerFor]="Actions">
-        <i class="fa fa-tasks"></i>Actions</button>
+      <mat-menu #accountApplications="matMenu">
+        <button mat-menu-item *mifosxHasPermission="'CREATE_LOANACCOUNT'"
+          [routerLink]="['loans-accounts', 'create']">New Loan Account</button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_SAVINGSACCOUNT'"
+          [routerLink]="['savings-accounts', 'create']">New Savings Account</button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_SHAREACCOUNT'"
+          [routerLink]="['shares-accounts', 'create']">New Share Account</button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_RECURRINGDEPOSITACCOUNT'"
+          [routerLink]="['recurringdeposits', 'create-recurring-deposits-account']">New Recurring Deposit
+          Account</button>
+        <button mat-menu-item *mifosxHasPermission="'CREATE_FIXEDDEPOSITACCOUNT'"
+          [routerLink]="['fixed-deposits-accounts', 'create']">New Fixed Deposits Account</button>
+      </mat-menu>
+
       <mat-menu #Actions="matMenu">
         <button mat-menu-item (click)="doAction('Close')">Close</button>
         <button mat-menu-item (click)="doAction('Transfer Client')">Transfer Client</button>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item (click)="doAction('Activate')">Activate</button></span>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item (click)="doAction('Withdraw')">Withdraw</button></span>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item (click)="doAction('Reject')">Reject</button></span>
-        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">Delete</button></span>
-        <span *ngIf="clientViewData.status.value === 'Closed'"><button mat-menu-item (click)="doAction('Reactivate')">Reactivate</button></span>
-        <span *ngIf="clientViewData.status.value === 'Rejected'"><button mat-menu-item (click)="doAction('Undo Rejection')">Undo Rejection</button></span>
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item (click)="doAction('Undo Transfer')">Undo Transfer</button></span>
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item (click)="doAction('Accept Transfer')">Accept Transfer</button></span>
-        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item (click)="doAction('Reject Transfer')">Reject transfer</button></span>
+        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+            (click)="doAction('Activate')">Activate</button></span>
+        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+            (click)="doAction('Withdraw')">Withdraw</button></span>
+        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+            (click)="doAction('Reject')">Reject</button></span>
+        <span *ngIf="clientViewData.status.value === 'Pending'"><button mat-menu-item
+            *mifosxHasPermission="'DELETE_CLIENT'" (click)="doAction('Delete')">Delete</button></span>
+        <span *ngIf="clientViewData.status.value === 'Closed'"><button mat-menu-item
+            (click)="doAction('Reactivate')">Reactivate</button></span>
+        <span *ngIf="clientViewData.status.value === 'Rejected'"><button mat-menu-item
+            (click)="doAction('Undo Rejection')">Undo Rejection</button></span>
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
+            (click)="doAction('Undo Transfer')">Undo Transfer</button></span>
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
+            (click)="doAction('Accept Transfer')">Accept Transfer</button></span>
+        <span *ngIf="clientViewData.status.value === 'Transfer in progress'"><button mat-menu-item
+            (click)="doAction('Reject Transfer')">Reject transfer</button></span>
       </mat-menu>
 
-      <span *ngIf="!clientViewData.staffId">
-        <button mat-raised-button (click)="doAction('Assign Staff')">
-          <i class="fa fa-user"></i>Assign Staff</button>
-      </span>
-      <span *ngIf="clientViewData.staffId">
-        <button mat-raised-button *mifosxHasPermission="'UNASSIGNSTAFF_CLIENT'" (click)="doAction('Unassign Staff')">
-          <i class="fa fa-user"></i>Unassign Staff</button>
-      </span>
-
-      <button mat-raised-button [matMenuTriggerFor]="More">More</button>
       <mat-menu #More="matMenu">
-        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'"> Add Charge </button>
+        <button mat-menu-item (click)="doAction('Add Charge')" *mifosxHasPermission="'CREATE_CLIENTCHARGE'"> Add Charge
+        </button>
         <button mat-menu-item (click)="doAction('Create Collateral')">Create Collateral</button>
         <button mat-menu-item (click)="doAction('Survey')">Survey</button>
-        <button mat-menu-item (click)="doAction('Update Default Savings')" *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"> Update Default Savings </button>
-        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'"> Upload Signature </button>
-        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'"> Delete Signature </button>
+        <button mat-menu-item (click)="doAction('Update Default Savings')"
+          *mifosxHasPermission="'UPDATESAVINGSACCOUNT_CLIENT'"> Update Default Savings </button>
+        <button mat-menu-item (click)="doAction('Upload Signature')" *mifosxHasPermission="'CREATE_CLIENTIMAGE'"> Upload
+          Signature </button>
+        <button mat-menu-item (click)="doAction('Delete Signature')" *mifosxHasPermission="'DELETE_CLIENTIMAGE'"> Delete
+          Signature </button>
         <button mat-menu-item (click)="doAction('Client Screen Reports')"> Client Screen Reports </button>
-        <button mat-menu-item (click)="doAction('Create Standing Instructions')" *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">Create Standing Instructions</button>
+        <button mat-menu-item (click)="doAction('Create Standing Instructions')"
+          *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">Create Standing Instructions</button>
         <span *ngIf="clientViewData.status.value!='Transfer on hold'">
-          <button mat-menu-item (click)="doAction('View Standing Instructions')" *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'">View Standing Instructions</button>
+          <button mat-menu-item (click)="doAction('View Standing Instructions')"
+            *mifosxHasPermission="'CREATE_STANDINGINSTRUCTION'">View Standing Instructions</button>
         </span>
         <button mat-menu-item (click)="doAction('Create Self Service User')">Create Self Service User</button>
       </mat-menu>
 
-    </mat-card-actions>
+    </mat-card-title-group>
 
   </mat-card-header>
 
@@ -138,13 +191,14 @@
         [active]="documents.isActive" *mifosxHasPermission="'READ_DOCUMENT'">
         Documents
       </a>
-      <a mat-tab-link [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive"
-        [active]="notes.isActive" *mifosxHasPermission="'READ_CLIENTNOTE'">
+      <a mat-tab-link [routerLink]="['./notes']" routerLinkActive #notes="routerLinkActive" [active]="notes.isActive"
+        *mifosxHasPermission="'READ_CLIENTNOTE'">
         Notes
       </a>
       <ng-container *ngFor="let clientDatatable of clientDatatables">
-        <a mat-tab-link [routerLink]="['./datatables',clientDatatable.registeredTableName]"
-          routerLinkActive #datatable="routerLinkActive" [active]="datatable.isActive" *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName">
+        <a mat-tab-link [routerLink]="['./datatables',clientDatatable.registeredTableName]" routerLinkActive
+          #datatable="routerLinkActive" [active]="datatable.isActive"
+          *mifosxHasPermission="'READ_' + clientDatatable.registeredTableName">
           {{clientDatatable.registeredTableName}}
         </a>
       </ng-container>

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

@@ -7,7 +7,6 @@
     padding: 1%;
     .header-title-group {
       .client-card-title {
-        margin-top: 1.4rem;
         color: white;
         width: 90%;
         p {
@@ -16,7 +15,7 @@
       }
     }
     .profile-image-container {
-      margin: 1%;
+      margin: 4px;
       .profile-image {
         object-fit: cover;
         border-radius: 20px;

src/app/clients/create-client/create-client.component.html

@@ -34,7 +34,7 @@
 
       <ng-template matStepLabel>FAMILY MEMBERS</ng-template>
 
-      <mifosx-client-family-members-step [clientTemplate]="clientTemplate"></mifosx-client-family-members-step>
+      <mifosx-client-family-members-step #clientFamily [clientTemplate]="clientTemplate"></mifosx-client-family-members-step>
 
     </mat-step>
 
@@ -42,10 +42,8 @@
 
       <ng-template matStepLabel>ADDRESS</ng-template>
 
-      <mifosx-client-address-step
-        [clientTemplate]="clientTemplate"
-        [clientAddressFieldConfig]="clientAddressFieldConfig"
-      >
+      <mifosx-client-address-step #clientAddress [clientTemplate]="clientTemplate"
+        [clientAddressFieldConfig]="clientAddressFieldConfig">
       </mifosx-client-address-step>
 
     </mat-step>

src/app/clients/create-client/create-client.component.ts

@@ -27,9 +27,9 @@ export class CreateClientComponent {
   /** Client General Step */
   @ViewChild(ClientGeneralStepComponent, { static: true }) clientGeneralStep: ClientGeneralStepComponent;
   /** Client Family Members Step */
-  @ViewChild(ClientFamilyMembersStepComponent, { static: true }) clientFamilyMembersStep: ClientFamilyMembersStepComponent;
+  @ViewChild('clientFamily') clientFamilyMembersStep: ClientFamilyMembersStepComponent;
   /** Client Address Step */
-  @ViewChild(ClientAddressStepComponent, { static: true }) clientAddressStep: ClientAddressStepComponent;
+  @ViewChild('clientAddress') clientAddressStep: ClientAddressStepComponent;
   /** Get handle on dtclient tags in the template */
   @ViewChildren('dtclient') clientDatatables: QueryList<ClientDatatableStepComponent>;
 
@@ -124,7 +124,6 @@ export class CreateClientComponent {
   submit() {
     const locale = this.settingsService.language.code;
     const dateFormat = this.settingsService.dateFormat;
-    // TODO: Update once language and date settings are setup
     const clientData = {
       ...this.client,
       dateFormat,

src/app/clients/edit-client/edit-client.component.html

@@ -114,7 +114,7 @@
 
             <mat-form-field fxFlex="98%">
               <mat-label>Remarks</mat-label>
-              <textarea matInput formControlName="remarks"></textarea>
+              <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
             </mat-form-field>
           </div>