Loan account creation and modification with Loan schedule type validation

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.html

@@ -2,7 +2,7 @@
 
   <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
 
-    <mat-form-field fxFlex="48%">
+    <mat-form-field fxFlex="72%">
       <mat-label>{{"labels.inputs.Product Name" | translate}}</mat-label>
       <mat-select formControlName="productId" matTooltip="{{ 'tooltips.Name of the loan product' | translate}}" required>
         <mat-option *ngFor="let product of productData" [value]="product.id">
@@ -13,6 +13,14 @@
         {{"labels.inputs.Product Name" | translate}} {{"labels.commons.is" | translate}} <strong>{{"labels.commons.required" | translate}}</strong>
       </mat-error>
     </mat-form-field>
+  </div>
+
+  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
+
+    <mat-form-field fxFlex="48%">
+      <mat-label>{{"labels.inputs.External id" | translate}}</mat-label>
+      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate}}">
+    </mat-form-field>
 
     <mat-form-field fxFlex="48%" *ngIf="loanProductSelected">
       <mat-label>{{"labels.inputs.Loan officer" | translate}}</mat-label>
@@ -22,9 +30,6 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-  </div>
-
-  <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column" *ngIf="loanProductSelected">
 
     <mat-form-field fxFlex="48%">
       <mat-label>{{"labels.inputs.Loan Purpose" | translate}}</mat-label>
@@ -66,11 +71,6 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field fxFlex="48%">
-      <mat-label>{{"labels.inputs.External id" | translate}}</mat-label>
-      <input matInput formControlName="externalId" matTooltip="{{ 'tooltips.Provides an external id' | translate}}">
-    </mat-form-field>
-
     <mat-divider fxFlex="98%"></mat-divider>
 
     <h3 class="mat-h3" fxFlexFill>{{"labels.heading.Savings Linkage" | translate}}</h3>

src/app/loans/loans-account-stepper/loans-account-details-step/loans-account-details-step.component.ts

@@ -7,6 +7,7 @@ import { TooltipPosition } from '@angular/material/tooltip';
 
 /** Custom Services */
 import { LoansService } from '../../loans.service';
+import { Commons } from 'app/core/utils/commons';
 
 /**
  * Loans Account Details Step
@@ -55,7 +56,8 @@ export class LoansAccountDetailsStepComponent implements OnInit {
   constructor(private formBuilder: UntypedFormBuilder,
     private loansService: LoansService,
     private route: ActivatedRoute,
-    private settingsService: SettingsService) {
+    private settingsService: SettingsService,
+    private commons: Commons) {
     this.loanId = this.route.snapshot.params['loanId'];
   }
 
@@ -64,7 +66,7 @@ export class LoansAccountDetailsStepComponent implements OnInit {
     this.maxDate = this.settingsService.maxFutureDate;
     this.buildDependencies();
     if (this.loansAccountTemplate) {
-      this.productData = this.loansAccountTemplate.productOptions;
+      this.productData = this.loansAccountTemplate.productOptions.sort(this.commons.dynamicSort('name'));
       if (this.loansAccountTemplate.loanProductId) {
         this.loansAccountDetailsForm.patchValue({
           'productId': this.loansAccountTemplate.loanProductId,