feat: collateral module

src/app/collaterals/edit-collateral/edit-collateral.component.html

@@ -0,0 +1,51 @@
+<div class="container">
+
+    <mat-card>
+
+        <form [formGroup]="clientCollateralForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div fxLayout="column">
+                    
+                    <div fxLayout="column">
+
+                        <mat-form-field>
+                            <mat-label>Name</mat-label>
+                            <input matInput required formControlName="name">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Quantity</mat-label>
+                            <input matInput required formControlName="quantity">
+                            <mat-error *ngIf="clientCollateralForm.controls.quantity.hasError('required')">
+                                Quantity is <strong>required</strong>
+                            </mat-error>
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Total</mat-label>
+                            <input matInput required formControlName="total">
+                        </mat-form-field>
+
+                        <mat-form-field>
+                            <mat-label>Total Collateral Value</mat-label>
+                            <input matInput required formControlName="totalCollateral">
+                        </mat-form-field>
+
+                    </div>
+
+                </div>
+
+            </mat-card-content>
+
+            <mat-card-actions fxLayoutGap="5px" fxLayout="row" fsLayout.xs="column" fxLayoutAlign="center">
+                <button type="button" mat-raised-button [routerLink]="['../../']">Cancel</button>
+                <button mat-raised-button color="primary" [disabled]="!clientCollateralForm.valid">Submit</button> 
+            </mat-card-actions>
+
+        </form>
+    
+    </mat-card>
+
+</div>

src/app/collaterals/edit-collateral/edit-collateral.component.scss

@@ -0,0 +1,4 @@
+.container {
+    width: 37rem;
+  }
+  

src/app/collaterals/edit-collateral/edit-collateral.component.spec.ts

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

src/app/collaterals/edit-collateral/edit-collateral.component.ts

@@ -0,0 +1,86 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { SettingsService } from 'app/settings/settings.service';
+import { CollateralsService } from '../collaterals.service';
+
+@Component({
+  selector: 'mifosx-edit-collateral',
+  templateUrl: './edit-collateral.component.html',
+  styleUrls: ['./edit-collateral.component.scss']
+})
+export class EditCollateralComponent implements OnInit {
+
+
+  /** Client Collateral Form */
+  clientCollateralForm: FormGroup;
+  /** Client Collateral Options */
+  clientCollateralOptions: any;
+  /** Client Id */
+  clientId: any;
+  /** Collateral Details */
+  collateralDetails: any;
+
+  /**
+   * Retirives Collateral Form from `resolve`
+   * @param {FormBuilder} formBuilder Form bUilder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router.
+   * @param {SettingsService} settingsService Settings Service
+   * @param {CollateralsService} collateralService Collateral Service
+   */
+  constructor(
+    private formBuilder: FormBuilder,
+    private route: ActivatedRoute,
+    private router: Router,
+    private settingsService: SettingsService,
+    private collateralService: CollateralsService
+    ) {
+      this.route.data.subscribe((data: { clientCollateralData: any }) => {
+        this.collateralDetails = data.clientCollateralData;
+      });
+      this.clientId = this.route.parent.snapshot.params['clientId'];
+    }
+
+  ngOnInit(): void {
+    this.createClientCollateralForm();
+  }
+
+  /**
+   * Creates the Edit Clients Collaterals Form
+   */
+  createClientCollateralForm() {
+    this.clientCollateralForm = this.formBuilder.group({
+      'quantity': [ '', Validators.required ],
+      'name': [{ value: '', disabled: true }],
+      'total': [{value: '', disabled: true}],
+      'totalCollateral': [{value: '', disabled: true}],
+    });
+    this.clientCollateralForm.patchValue({
+      'name': this.collateralDetails.name,
+      'quantity': this.collateralDetails.quantity,
+      'total': this.collateralDetails.total,
+      'totalCollateral': this.collateralDetails.totalCollateral,
+    });
+  }
+
+  /**
+   * Submits Updated Client Collateral
+   */
+  submit() {
+    const collateralId = this.collateralDetails.id;
+    const quantity = this.clientCollateralForm.value.quantity;
+    const locale = this.settingsService.language.code;
+    const clientCollateralData = {
+      quantity,
+      locale
+    };
+    this.collateralService.updateClientCollateral(this.clientId, collateralId, clientCollateralData).subscribe(() => {
+      this.router.navigate(['../'], {relativeTo: this.route});
+    });
+  }
+
+}