feat: collateral module

src/app/products/collaterals/collateral.resolver.ts

@@ -0,0 +1,31 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ProductsService } from '../products.service';
+
+/**
+ * Charges data resolver.
+ */
+@Injectable()
+export class CollateralResolver implements Resolve<Object> {
+
+  /**
+   * @param {ProductsService} productsService Products service.
+   */
+  constructor(private productsService: ProductsService) {}
+
+  /**
+   * Returns the products data.
+   * @returns {Observable<any>}
+   */
+  resolve(route: ActivatedRouteSnapshot): Observable<any> {
+    const collateralId = route.paramMap.get('id');
+    return this.productsService.getCollateral(collateralId);
+  }
+
+}

src/app/products/collaterals/collaterals-template.resolver.ts

@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom services */
+import { ProductsService } from '../products.service';
+
+/**
+ * Collaterals Template Resolver
+ */
+@Injectable()
+export class CollateralTemplateResolver implements Resolve<Object> {
+    /**
+     * @param {ProductsService} productsService products Service
+     */
+    constructor(private productsService: ProductsService) {}
+
+    /**
+     * Returns the product Data.
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.productsService.getCollateralTemplate();
+    }
+}

src/app/products/collaterals/collaterals.component.html

@@ -0,0 +1,56 @@
+<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
+    <button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
+      <fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
+      Create Collateral
+    </button>
+  </div>
+  
+  <div class="container">
+  
+    <div fxLayout="row" fxLayoutGap="20px">
+      <mat-form-field fxFlex>
+        <mat-label>Filter</mat-label>
+        <input matInput (keyup)="applyFilter($event.target.value)">
+      </mat-form-field>
+    </div>
+  
+    <div class="mat-elevation-z8">
+  
+      <table mat-table [dataSource]="dataSource" matSort>
+  
+        <ng-container matColumnDef="name">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.name }} </td>
+        </ng-container>
+  
+        <ng-container matColumnDef="quality">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Quality/Type </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.quality }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="basePrice">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Base Price </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.basePrice }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="basePercentage">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Base Percentage </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.pctToBase }} </td>
+        </ng-container>
+
+        <ng-container matColumnDef="unitType">
+          <th mat-header-cell *matHeaderCellDef mat-sort-header> Unit Type </th>
+          <td mat-cell *matCellDef="let collateral"> {{ collateral.unitType }} </td>
+        </ng-container>
+  
+        <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+        <tr mat-row *matRowDef="let row; columns: displayedColumns;" [routerLink]="[row.id]" class="select-row"></tr>
+  
+      </table>
+  
+      <mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
+  
+    </div>
+  
+  </div>
+  

src/app/products/collaterals/collaterals.component.scss

@@ -0,0 +1,24 @@
+table {
+    width: 100%;
+  
+    .select-row:hover {
+      cursor: pointer;
+    }
+  }
+  
+  .true {
+    color: #32cd32;
+  }
+  
+  .false {
+    color: #f44366;
+  }
+  
+  .ispenalty {
+    color: #32cd32;
+  }
+  
+  .nopenalty {
+    color: #f44366;
+  }
+  

src/app/products/collaterals/collaterals.component.spec.ts

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

src/app/products/collaterals/collaterals.component.ts

@@ -0,0 +1,61 @@
+/** Angular Imports */
+import { Component, ViewChild, OnInit } from '@angular/core';
+import { MatPaginator } from '@angular/material/paginator';
+import { MatSort } from '@angular/material/sort';
+import { MatTableDataSource } from '@angular/material/table';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'mifosx-collaterals',
+  templateUrl: './collaterals.component.html',
+  styleUrls: ['./collaterals.component.scss']
+})
+export class CollateralsComponent implements OnInit {
+
+  /** Collateral Data */
+  collateralData: any;
+  /** Columns to be displayed in the Collaterals Table */
+  displayedColumns: string[] = ['name', 'quality', 'basePrice', 'basePercentage', 'unitType'];
+  /** DataSource for the Collateral Table */
+  dataSource: MatTableDataSource<any>;
+
+  /** Paginator for the Collateral Table */
+  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
+  /** Sorter for Collateral Table */
+  @ViewChild(MatSort, { static: true }) sort: MatSort;
+
+  /**
+   * Retrieves the Collaterals data from `resolve`.
+   * @param {ActivatedRoute} route Activated Route.
+   */
+   constructor(private route: ActivatedRoute) {
+    this.route.data.subscribe(( data: { collaterals: any }) => {
+      this.collateralData = data.collaterals;
+    });
+  }
+
+  /**
+   * Filters data in collateral table based on passed value.
+   * @param {string} filterValue Value to filter data.
+   */
+  applyFilter(filterValue: string) {
+    this.dataSource.filter = filterValue.trim().toLowerCase();
+  }
+
+  /**
+   * Sets the collateral table.
+   */
+  ngOnInit() {
+    this.setCollaterals();
+  }
+
+  /**
+   * Initializes the data source, paginator and sorter for collateral table.
+   */
+   setCollaterals() {
+    this.dataSource = new MatTableDataSource(this.collateralData);
+    this.dataSource.paginator = this.paginator;
+    this.dataSource.sort = this.sort;
+  }
+
+}

src/app/products/collaterals/collaterals.resolver.ts

@@ -0,0 +1,28 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { ProductsService } from '../products.service';
+
+/**
+ * Collaterals data resolver
+ */
+@Injectable()
+export class CollateralsResolver implements Resolve<Object> {
+    /**
+     * @param {ProductsService} productsService Products service
+     */
+    constructor(private productsService: ProductsService) {}
+
+    /**
+     * Returns the All Collaterals Data
+     * @returns {Observable<any>}
+     */
+    resolve(): Observable<any> {
+        return this.productsService.getCollaterals();
+    }
+}

src/app/products/collaterals/create-collateral/create-collateral.component.html

@@ -0,0 +1,71 @@
+<div class="container">
+    
+    <mat-card>
+
+        <form [formGroup]="collateralForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Name</mat-label>
+                        <input matInput required formControlName="name">
+                        <mat-error *ngIf="collateralForm.controls.name.hasError('required')">
+                            Name is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Type/Quality</mat-label>
+                        <input matInput required formControlName="quality">
+                        <mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
+                            Quality is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Unit Type</mat-label>
+                        <input matInput required formControlName="unitType">
+                        <mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
+                           Unit Type is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Base Price</mat-label>
+                        <input matInput required formControlName="basePrice">
+                        <mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
+                            Base Price is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Percentage to Base</mat-label>
+                        <input matInput required formControlName="pctToBase">
+                        <mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
+                            Percentage to Base is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Currency</mat-label>
+                        <mat-select required formControlName="currency">
+                            <mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
+                            {{ currency.name }}
+                            </mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
+                            Currency is <strong>required</strong>
+                        </mat-error>
+                    </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]="['../']"> Cancel</button>
+                <button mat-raised-button color="primary" [disabled]="!collateralForm.valid" *mifosxHasPermission="'CREATE_CHARGE'">Submit</button>
+            </mat-card-actions>
+
+        </form>
+
+    </mat-card>
+
+</div>

src/app/products/collaterals/create-collateral/create-collateral.component.spec.ts

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

src/app/products/collaterals/create-collateral/create-collateral.component.ts

@@ -0,0 +1,82 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+
+/** Custom Services */
+import { ProductsService } from '../../products.service';
+import { SettingsService } from 'app/settings/settings.service';
+import { Dates } from 'app/core/utils/dates';
+
+/**
+ * Create Collateral component.
+ */
+@Component({
+  selector: 'mifosx-create-collateral',
+  templateUrl: './create-collateral.component.html',
+  styleUrls: ['./create-collateral.component.scss']
+})
+export class CreateCollateralComponent implements OnInit {
+
+  /** Collateral form */
+  collateralForm: FormGroup;
+  /** Charges Template data */
+  collateralTemplateData: any;
+
+  /**
+   * Retrieves the collateral template data
+   * @param {FormBuilder} formBuilder Form Builder
+   * @param {ProductsService} productsService Products Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service
+   */
+  constructor(private formBuilder: FormBuilder,
+              private productsService: ProductsService,
+              private route:  ActivatedRoute,
+              private router: Router,
+              private settingsService: SettingsService) {
+                this.route.data.subscribe((data: { collateralTemplate: any }) => {
+                  this.collateralTemplateData = data.collateralTemplate;
+                });
+               }
+
+  /**
+   * Create and sets Collateral Form
+   */
+  ngOnInit(): void {
+    this.createCollateralForm();
+  }
+
+  /**
+   * Create the Collateral Form
+   */
+  createCollateralForm() {
+    this.collateralForm = this.formBuilder.group({
+      'name': ['', Validators.required],
+      'unitType': ['', Validators.required],
+      'basePrice': ['', Validators.required],
+      'pctToBase': ['', Validators.required],
+      'currency': ['', Validators.required],
+      'quality': ['', Validators.required]
+    });
+  }
+
+  /**
+   * Submit a new collateral Product form
+   */
+  submit() {
+    const collateralFormData = this.collateralForm.value;
+    const locale = this.settingsService.language.code;
+    const data = {
+      ...collateralFormData,
+      locale
+    };
+    this.productsService.createCollateral(data).subscribe((response: any) => {
+      this.router.navigate(['../'], { relativeTo: this.route });
+    });
+  }
+
+
+
+}

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

@@ -0,0 +1,76 @@
+<div class="container">
+
+    <mat-card>
+
+        <form [formGroup]="collateralForm" (ngSubmit)="submit()">
+
+            <mat-card-content>
+
+                <div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Name</mat-label>
+                        <input matInput required autoFocus formControlName="name">
+                        <mat-error *ngIf="collateralForm.controls.name.hasError('required')">
+                            Name is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Type/Quality</mat-label>
+                        <input matInput required autoFocus formControlName="quality">
+                        <mat-error *ngIf="collateralForm.controls.quality.hasError('required')">
+                            Type/Quality is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Unit Type</mat-label>
+                        <input matInput required autoFocus formControlName="unitType">
+                        <mat-error *ngIf="collateralForm.controls.unitType.hasError('required')">
+                            Unit Type is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Base Price</mat-label>
+                        <input matInput required autoFocus formControlName="basePrice">
+                        <mat-error *ngIf="collateralForm.controls.basePrice.hasError('required')">
+                            Base Price is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Percentage To Base</mat-label>
+                        <input matInput required autoFocus formControlName="pctToBase">
+                        <mat-error *ngIf="collateralForm.controls.pctToBase.hasError('required')">
+                            Percentage to Base is <strong>required</strong>
+                        </mat-error>
+                    </mat-form-field>
+
+                    <mat-form-field fxFlex="48%">
+                        <mat-label>Currency</mat-label>
+                        <mat-select required formControlName="currency">
+                            <mat-option *ngFor="let currency of collateralTemplateData" [value]="currency.code">
+                                {{ currency.name }}
+                            </mat-option>
+                        </mat-select>
+                        <mat-error *ngIf="collateralForm.controls.currency.hasError('required')">
+                            Currency is <strong>required</strong>
+                        </mat-error>
+                    </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]="['../']">Cancel</button>
+                <button mat-raised-button color="primary" [disabled]="!collateralForm.valid" *mifosxHasPermission="'UPDATE_CHARGE'">Submit</button> 
+            </mat-card-actions>
+
+        </form>
+
+    </mat-card>
+
+</div>

src/app/products/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/products/collaterals/edit-collateral/edit-collateral.component.ts

@@ -0,0 +1,73 @@
+/** Angular Imports */
+import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { ActivatedRoute, Router } from '@angular/router';
+
+/** Custom Services */
+import { ProductsService } from 'app/products/products.service';
+import { SettingsService } from 'app/settings/settings.service';
+
+@Component({
+  selector: 'mifosx-edit-collateral',
+  templateUrl: './edit-collateral.component.html',
+  styleUrls: ['./edit-collateral.component.scss']
+})
+export class EditCollateralComponent implements OnInit {
+
+  /** Colalteral Data */
+  collateralData: any;
+  /** Collateral Template */
+  collateralTemplateData: any;
+  /** Collateral Form */
+  collateralForm: FormGroup;
+
+  /**
+   * Retrieves the Collateral Data from `resolve`
+   * @param {ProductsService} productsService Products Service.
+   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {SettingsService} settingsService Settings Service.
+   */
+  constructor(private productsService: ProductsService,
+              private formBuilder: FormBuilder,
+              private route: ActivatedRoute,
+              private router: Router,
+              private settingsService: SettingsService) {
+                this.route.data.subscribe((data: { collateral: any, collateralTemplate: any }) => {
+                  this.collateralData = data.collateral;
+                  this.collateralTemplateData = data.collateralTemplate;
+                });
+               }
+
+  ngOnInit(): void {
+    this.editCollateralForm();
+  }
+
+  /**
+   * Edit Collateral Form
+   */
+  editCollateralForm() {
+    this.collateralForm = this.formBuilder.group({
+      'name': [this.collateralData.name, Validators.required],
+      'quality': [this.collateralData.quality, Validators.required],
+      'unitType': [this.collateralData.unitType, Validators.required],
+      'basePrice': [this.collateralData.basePrice, Validators.required],
+      'pctToBase': [this.collateralData.pctToBase, Validators.required],
+      'currency': [this.collateralData.currency, Validators.required],
+    });
+  }
+
+  /**
+   * Submits the updated Collateral Form
+   */
+  submit() {
+    const collateral = this.collateralForm.value;
+    collateral.locale = this.settingsService.language.code;
+    this.productsService.updateCollateral(this.collateralData.id.toString(), collateral)
+      .subscribe((response: any) => {
+        this.router.navigate(['../'], { relativeTo: this.route });
+      });
+  }
+
+}

src/app/products/collaterals/view-collateral/view-collateral.component.html

@@ -0,0 +1,74 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+    <button mat-raised-button color="primary" [routerLink]="['edit']" >
+        <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+        Edit
+    </button>
+    <button mat-raised-button color="warn" (click)="deleteCollateral()" >
+        <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+        Delete
+    </button>
+</div>
+
+<div class="container">
+
+    <mat-card>
+
+        <mat-card-content>
+
+            <div fxLayout="row wrap" class="content">
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Collateral Name
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.name }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Quality/Type
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.quality }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Base Price
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.basePrice }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Base Percentage
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.pctToBase }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Unit Type
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.unitType }}
+                </div>
+
+                <div fxFlex="50%" class="mat-body-strong">
+                    Currency
+                </div>
+
+                <div fxFlex="50%">
+                    {{ collateralData.currency }}
+                </div>
+
+            </div>
+
+        </mat-card-content>
+
+    </mat-card>
+
+</div>

src/app/products/collaterals/view-collateral/view-collateral.component.scss

@@ -0,0 +1,11 @@
+.container {
+    max-width: 37rem;
+    
+    .content {
+      div {
+        margin: 1rem 0;
+        word-wrap: break-word;
+      }
+    }
+  }
+  

src/app/products/collaterals/view-collateral/view-collateral.component.spec.ts

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

src/app/products/collaterals/view-collateral/view-collateral.component.ts

@@ -0,0 +1,60 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Services */
+import { ProductsService } from 'app/products/products.service';
+
+/** Custom Components */
+import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dialog.component';
+
+/**
+ * View Collateral Component
+ */
+@Component({
+  selector: 'mifosx-view-collateral',
+  templateUrl: './view-collateral.component.html',
+  styleUrls: ['./view-collateral.component.scss']
+})
+export class ViewCollateralComponent implements OnInit {
+
+  /** Collateral Data */
+  collateralData: any;
+
+  /**
+   * Retrieves the Collateral Data from 'resolve.
+   * @param {ProductsService} productsService Products Service.
+   * @param {ActivatedRoute} route Activated Route.
+   * @param {Router} router Router for navigation.
+   * @param {MatDialog} dialog Dialog reference.
+   */
+  constructor(private productsService: ProductsService,
+              private route: ActivatedRoute,
+              private router: Router,
+              private dialog: MatDialog) {
+                this.route.data.subscribe((data: { collateral: any }) => {
+                    this.collateralData = data.collateral;
+                });
+               }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Deletes the collateral and redirects to collaterals
+   */
+  deleteCollateral() {
+    const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `collateral ${this.collateralData.id}` }
+    });
+    deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.productsService.deleteCollateral(this.collateralData.id)
+          .subscribe(() => {
+            this.router.navigate(['/products/collaterals']);
+          });
+      }
+    });
+  }
+
+}

src/app/products/products-routing.module.ts

@@ -50,6 +50,10 @@ import { ViewDividendComponent } from './share-products/view-dividend/view-divid
 import { CreateTaxGroupComponent } from './manage-tax-groups/create-tax-group/create-tax-group.component';
 import { EditTaxGroupComponent } from './manage-tax-groups/edit-tax-group/edit-tax-group.component';
 import { CreateProductMixComponent } from './products-mix/create-product-mix/create-product-mix.component';
+import { CollateralsComponent } from './collaterals/collaterals.component';
+import { CreateCollateralComponent } from './collaterals/create-collateral/create-collateral.component';
+import { EditCollateralComponent } from './collaterals/edit-collateral/edit-collateral.component';
+import { ViewCollateralComponent } from './collaterals/view-collateral/view-collateral.component';
 
 /** Custom Resolvers */
 import { LoanProductsResolver } from './loan-products/loan-products.resolver';
@@ -94,6 +98,9 @@ import { EditProductMixComponent } from './products-mix/edit-product-mix/edit-pr
 import { ChargesTemplateAndResolver } from './charges/charges-template-and-resolver';
 import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component';
 import { FixedDepositProductAndTemplateResolver } from './fixed-deposit-products/edit-fixed-deposit-product/fixed-deposit-product-and-template.resolver';
+import { CollateralResolver } from './collaterals/collateral.resolver';
+import { CollateralsResolver } from './collaterals/collaterals.resolver';
+import { CollateralTemplateResolver } from './collaterals/collaterals-template.resolver';
 
 /** Products Routes */
 const routes: Routes = [
@@ -593,6 +600,52 @@ const routes: Routes = [
               ]
             },
           ]
+        },
+        {
+          path: 'collaterals',
+          data: { title: extract('Collaterals'), breadcrumb: 'Collaterals' },
+          children: [
+            {
+              path: 'create',
+              component: CreateCollateralComponent,
+              data: { title: extract('Create Collateral'), breadcrumb: 'Create Collateral' },
+              resolve: {
+                collateralTemplate: CollateralTemplateResolver
+              }
+            },
+            {
+              path: '',
+              component: CollateralsComponent,
+              resolve: {
+                collaterals: CollateralsResolver
+              }
+            },
+            {
+              path: ':id',
+              data: { title: extract('View Collateral'), routeParamBreadcrumb: 'id' },
+              resolve: {
+                collateral: CollateralResolver
+              },
+              children: [
+                {
+                  path: '',
+                  component: ViewCollateralComponent,
+                  resolve: {
+                    collateral: CollateralResolver
+                  },
+                },
+                {
+                  path: 'edit',
+                  component: EditCollateralComponent,
+                  data: { title: extract('Edit Collateral'), breadcrumb: 'Edit', routeParamBreadcrumb: false },
+                  resolve: {
+                    collateralTemplate: CollateralTemplateResolver,
+                    collateral: CollateralResolver
+                  }
+                },
+              ]
+            },
+          ]
         }
       ]
     }
@@ -647,7 +700,10 @@ const routes: Routes = [
     EditTaxGroupResolver,
     ProductsMixTemplateResolver,
     FixedDepositProductAndTemplateResolver,
-    FloatingRatesResolver
+    FloatingRatesResolver,
+    CollateralResolver,
+    CollateralsResolver,
+    CollateralTemplateResolver
   ]
 })
 export class ProductsRoutingModule { }

src/app/products/products.component.html

@@ -40,6 +40,14 @@
             <p matLine>Define charges/penalties for loan products, savings and deposit products</p>
           </mat-list-item>
 
+          <mat-list-item [routerLink]="['collaterals']">
+            <mat-icon matListIcon>
+              <fa-icon icon="money-bill-alt" size="sm"></fa-icon>
+            </mat-icon>
+            <h4 matLine>Collateral Management</h4>
+            <p matLine>Define collaterals for Collateral Management</p>
+          </mat-list-item>
+
         </mat-nav-list>
 
       </div>

src/app/products/products.module.ts

@@ -93,6 +93,10 @@ import { CreateProductMixComponent } from './products-mix/create-product-mix/cre
 import { EditProductMixComponent } from './products-mix/edit-product-mix/edit-product-mix.component';
 import { CreateChargeComponent } from './charges/create-charge/create-charge.component';
 import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-fixed-deposit-product/edit-fixed-deposit-product.component';
+import { CollateralsComponent } from './collaterals/collaterals.component';
+import { CreateCollateralComponent } from './collaterals/create-collateral/create-collateral.component';
+import { EditCollateralComponent } from './collaterals/edit-collateral/edit-collateral.component';
+import { ViewCollateralComponent } from './collaterals/view-collateral/view-collateral.component';
 
 /**
  * Products Module
@@ -193,7 +197,11 @@ import { EditFixedDepositProductComponent } from './fixed-deposit-products/edit-
     EditProductMixComponent,
     ManageTaxGroupsComponent,
     CreateChargeComponent,
-    EditFixedDepositProductComponent
+    EditFixedDepositProductComponent,
+    CollateralsComponent,
+    CreateCollateralComponent,
+    EditCollateralComponent,
+    ViewCollateralComponent
   ],
   providers: [ ]
 })

src/app/products/products.service.ts

@@ -415,4 +415,51 @@ export class ProductsService {
     return this.http.put(`/recurringdepositproducts/${recurringDepositProductId}`, recurringDepositProduct);
   }
 
+  /**
+   * @returns {Observable<any>} Collateral data.
+   */
+  getCollaterals(): Observable<any> {
+    return this.http.get('/collateral-management');
+  }
+
+  /**
+   * @returns {Observable<any>} Collateral Template.
+   */
+  getCollateralTemplate(): Observable<any> {
+    return this.http.get('/collateral-management/template');
+  }
+
+  /**
+   * @param {string} collateralId Collateral ID of Collateral.
+   * @returns {Observable<any>} Collateral.
+   */
+  getCollateral(collateralId: string, template: boolean = false): Observable<any> {
+    const httpParams = new HttpParams().set('template', template.toString());
+    return this.http.get(`/collateral-management/${collateralId}`, { params: httpParams });
+  }
+
+  /**
+   * @param collateralId Collateral Id to be updated.
+   * @param collateral  Collateral Data to be updated.
+   */
+  updateCollateral(collateralId: string, collateral: any): Observable<any> {
+    return this.http.put(`/collateral-management/${collateralId}`, collateral);
+  }
+
+  /**
+   * @param {string} collateralId  Collateral ID of Collateral to be deleted.
+   * @returns {Observable<any>}
+   */
+  deleteCollateral(collateralId: string): Observable<any> {
+    return this.http.delete(`/collateral-management/${collateralId}`);
+  }
+
+  /**
+   * @param {any} collateral Collateral to be created.
+   * @returns {Observable<any>}
+   */
+  createCollateral(collateral: any): Observable<any> {
+    return this.http.post('/collateral-management', collateral);
+  }
+
 }