feat: collateral module

src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.html

@@ -3,31 +3,36 @@
 <div mat-dialog-content [formGroup]="addCollateralForm" fxLayout="column">
 
   <mat-form-field>
-    <mat-label>Collateral Type</mat-label>
-    <mat-select formControlName="type" required>
-      <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType.id">
+    <mat-label>Collateral</mat-label>
+    <mat-select formControlName="collateral" required>
+      <mat-option *ngFor="let collateralType of collateralTypeData" [value]="collateralType" >
         {{ collateralType.name }}
       </mat-option>
     </mat-select>
     <mat-error>
-      Collateral Type is <strong>required</strong>
+      Collateral is <strong>required</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Value</mat-label>
-    <input type="number" matInput formControlName="value" required>
-    <mat-error>
-      Value is <strong>required</strong>
+    <mat-label>Quantity</mat-label>
+    <input type="number" [max]="maxQuantity" [min]="0" matInput formControlName="quantity" required>
+    <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('required')">
+      Quantity is <strong>required</strong>
+    </mat-error>
+    <mat-error *ngIf="addCollateralForm.controls.quantity.hasError('max')">
+      Quantity can not be more than <strong>{{ maxQuantity }}</strong>
     </mat-error>
   </mat-form-field>
 
   <mat-form-field>
-    <mat-label>Description</mat-label>
-    <input type="text" matInput formControlName="description" required>
-    <mat-error>
-      Description is <strong>required</strong>
-    </mat-error>
+    <mat-label>Total Value</mat-label>
+    <input type="text" matInput formControlName="totalValue" [disabled]="true">
+  </mat-form-field>
+
+  <mat-form-field>
+    <mat-label>Total Collateral Value</mat-label>
+    <input type="text" matInput formControlName="totalCollateralValue" [disabled]="true">
   </mat-form-field>
 
 </div>

src/app/loans/custom-dialog/loans-account-add-collateral-dialog/loans-account-add-collateral-dialog.component.ts

@@ -16,7 +16,12 @@ export class LoansAccountAddCollateralDialogComponent implements OnInit {
     };
 
   addCollateralForm: FormGroup;
+  /** All Collateral Options */
   collateralTypeData: any;
+  /** Selected Collateral */
+  collateralData: any;
+  /** Maximum ALlowed Quantity of selected collateral  */
+  maxQuantity: any = 0;
 
   constructor(public dialogRef: MatDialogRef<LoansAccountAddCollateralDialogComponent>,
     @Inject(MAT_DIALOG_DATA) public data: any,
@@ -26,14 +31,33 @@ export class LoansAccountAddCollateralDialogComponent implements OnInit {
 
   ngOnInit() {
     this.dialogRef.updateSize('400px');
-    this.collateralTypeData = this.data.collateralTypeOptions;
+    this.collateralTypeData = this.data.collateralOptions;
+    this.buildDependencies();
   }
 
   createAddCollateralForm() {
     this.addCollateralForm = this.formBuilder.group({
-      'type': ['', Validators.required],
-      'value': ['', Validators.required],
-      'description': ['', Validators.required]
+      'collateral': ['', Validators.required],
+      'quantity': ['', Validators.required],
+      'totalValue': [{value: '', disabled: true}],
+      'totalCollateralValue': [{value: '', disabled: true}],
+    });
+  }
+
+  /**
+   * Subscribe to Form controls value changes
+   */
+   buildDependencies() {
+    this.addCollateralForm.controls.collateral.valueChanges.subscribe((collateral: any) => {
+      this.collateralData = collateral;
+      this.maxQuantity = collateral.quantity;
+    });
+
+    this.addCollateralForm.controls.quantity.valueChanges.subscribe((quantity: any) => {
+      this.addCollateralForm.patchValue({
+        'totalValue': this.collateralData.basePrice * quantity,
+        'totalCollateralValue': this.collateralData.basePrice * this.collateralData.pctToBase * quantity / 100
+      });
     });
   }