feat: collateral module

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

@@ -0,0 +1,52 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+
+/** Translation Imports */
+import { extract } from '../core/i18n/i18n.service';
+
+/** Custom Components */
+import { ViewCollateralComponent } from './view-collateral/view-collateral.component';
+
+/** Custom Resolvers */
+import { ClientCollateralResolver } from './common-resolvers/client-collateral.resolver';
+import { EditCollateralComponent } from './edit-collateral/edit-collateral.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    data: { title: extract('Collateral'), breadcrumb: 'Collateral', routeParamBreadcrumb: false },
+    children: [
+      {
+        path: ':collateralId',
+        data: { title: extract('Collateral View'), routeParamBreadcrumb: 'collateralId' },
+        children: [
+          {
+            path: '',
+            component: ViewCollateralComponent,
+            resolve: {
+              clientCollateralData: ClientCollateralResolver,
+            }
+          },
+          {
+            path: 'edit',
+            data: { title: extract('edit'), routeParamBreadcrumb: 'edit' },
+            component: EditCollateralComponent,
+            resolve: {
+              clientCollateralData: ClientCollateralResolver,
+            }
+          }
+        ]
+      }
+    ]
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+  declarations: [],
+  providers: [
+    ClientCollateralResolver,
+  ]
+})
+export class CollateralsRoutingModule { }

src/app/collaterals/collaterals.module.ts

@@ -0,0 +1,30 @@
+/** Angular Imports */
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DirectivesModule } from '../directives/directives.module';
+
+/** Custom Modules */
+import { SharedModule } from 'app/shared/shared.module';
+import { PipesModule } from '../pipes/pipes.module';
+
+/** Custom Components */
+import { CollateralsRoutingModule } from './collaterals-routing.module';
+import { ViewCollateralComponent } from './view-collateral/view-collateral.component';
+import { EditCollateralComponent } from './edit-collateral/edit-collateral.component';
+
+
+@NgModule({
+  declarations: [
+    ViewCollateralComponent,
+    EditCollateralComponent
+  ],
+  imports: [
+    CommonModule,
+    CollateralsRoutingModule,
+    SharedModule,
+    DirectivesModule,
+    PipesModule
+  ]
+})
+export class CollateralsModule { }

src/app/collaterals/collaterals.service.ts

@@ -0,0 +1,51 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { HttpClient, HttpParams } from '@angular/common/http';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+/**
+ * Collaterals service.
+ */
+@Injectable({
+  providedIn: 'root'
+})
+export class CollateralsService {
+  /**
+   * @param {HttpClient} http Http Client to send requests.
+   */
+  constructor(private http: HttpClient) { }
+
+  getFilteredClients(orderBy: string, sortOrder: string, orphansOnly: boolean, displayName: string, officeId?: any): Observable<any> {
+    let httpParams = new HttpParams()
+      .set('displayName', displayName)
+      .set('orphansOnly', orphansOnly.toString())
+      .set('sortOrder', sortOrder)
+      .set('orderBy', orderBy);
+    if (officeId) {
+      httpParams = httpParams.set('officeId', officeId);
+    }
+    return this.http.get('/clients', { params: httpParams });
+  }
+
+  /**
+   * @returns {Observable<any>} Collaterals data
+   */
+   getClientCollateral(clientId: any, clientCollateralId: any): Observable<any> {
+    return this.http.get(`/clients/${clientId}/collaterals/${clientCollateralId}`);
+  }
+
+  /**
+   * @returns {Observable<any>} Collaterals data
+   */
+   updateClientCollateral(clientId: any, clientCollateralId: any, clientCollateralData: any): Observable<any> {
+    return this.http.put(`/clients/${clientId}/collaterals/${clientCollateralId}`, clientCollateralData);
+  }
+
+  /**
+   * @returns {Observable<any>} Delete Collaterals data
+   */
+   deleteCollateral(clientId: any, clientCollateralId: any): Observable<any> {
+    return this.http.delete(`/clients/${clientId}/collaterals/${clientCollateralId}`);
+  }
+}

src/app/collaterals/common-resolvers/client-collateral.resolver.ts

@@ -0,0 +1,32 @@
+/** Angular Imports */
+import { Injectable } from '@angular/core';
+import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
+
+/** rxjs Imports */
+import { Observable } from 'rxjs';
+
+/** Custom Services */
+import { CollateralsService } from '../collaterals.service';
+
+/**
+ * Client Collateral data resolver.
+ */
+@Injectable()
+export class ClientCollateralResolver implements Resolve<Object> {
+
+    /**
+     * @param {CollateralsService} collateralsService Collaterals service.
+     */
+    constructor(private collateralsService: CollateralsService) { }
+
+    /**
+     * Returns the Client Collateral data.
+     * @returns {Observable<any>}
+     */
+    resolve(route: ActivatedRouteSnapshot): Observable<any> {
+        const clientId = route.parent.paramMap.get('clientId');
+        const collateralId = route.parent.paramMap.get('collateralId');
+        return this.collateralsService.getClientCollateral(clientId, collateralId);
+    }
+
+}

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});
+    });
+  }
+
+}

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

@@ -0,0 +1,71 @@
+<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
+    <button mat-raised-button color="primary" [routerLink]="['edit']" *mifosxHasPermission="'UPDATE_CHARGE'">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      Edit
+    </button>
+    <button mat-raised-button color="warn" (click)="deleteCollateral()" *mifosxHasPermission="'DELETE_CHARGE'">
+      <fa-icon icon="trash"></fa-icon>&nbsp;&nbsp;
+      Delete
+    </button>
+  </div>
+  
+<mat-card class="client-collateral-card">
+
+    <mat-card-content class="content">\
+
+        <div class="tab-container mat-typography">
+
+            <h3>Client Collateral Details</h3>
+          
+            <div fxLayout="row" fxLayoutGap="32px" class="group-details-container m-b-30">
+              <p>
+                Name: {{ clientCollateralData.name }}<br/>
+                Quantity: {{ clientCollateralData.quantity }}<br/>
+                Total Value: {{ clientCollateralData.total }}<br/>
+                Total Collateral Value: {{ clientCollateralData.totalCollateral }}<br/>
+              </p>
+              
+            </div>
+        
+
+            <h3>Transaction Details</h3>
+
+            <table mat-table [dataSource]="clientCollateralData.loanTransactionData"
+            class="mat-elevation-z1 m-b-30">
+
+            <ng-container matColumnDef="ID">
+                <th mat-header-cell *matHeaderCellDef> ID </th>
+                <td mat-cell *matCellDef="let element">
+                {{element.loanId}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="Last Repayment">
+                <th mat-header-cell *matHeaderCellDef>Last Repayment</th>
+                <td mat-cell *matCellDef="let element"> {{element.lastRepayment}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="Remaining Amount">
+                <th mat-header-cell *matHeaderCellDef> Remaining Amount </th>
+                <td mat-cell *matCellDef="let element"> {{element.remainingAmount}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="Last Repayment Date">
+                <th mat-header-cell *matHeaderCellDef> Last Repayment Date </th>
+                <td mat-cell *matCellDef="let element"> {{element.lastRepaymentDate | dateFormat}} </td>
+
+            </ng-container>
+
+            <!-- <tr mat-header-row *matHeaderRowDef="clientMemberColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: clientMemberColumns;" [routerLink]="['/clients', row.id, 'loans-accounts', 'create']" class="select-row"></tr> -->
+            <tr mat-header-row *matHeaderRowDef="collateralColumns"></tr>
+            <tr mat-row *matRowDef="let row; columns: collateralColumns;"></tr>
+      
+            </table>
+
+        </div>
+
+
+    </mat-card-content>
+        
+</mat-card>

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

@@ -0,0 +1,36 @@
+.client-collateral-card {
+    margin: 0 auto;
+    max-width: 80rem;
+    width: 90%;
+    padding: 0;
+}
+.tab-container {
+    padding: 1%;
+    margin: 1%;
+    h3 {
+      margin:1% auto;
+    }
+    .group-details-container {
+      border: 1px solid;
+      padding: 1%;
+    }
+    .action-button{
+      margin-left: auto;
+    }
+    table {
+      width: 100%;
+      .account-action-button{
+        min-width: 26px;
+        padding: 0 6px;
+        margin: 4px;
+        line-height: 25px;
+      }
+      tr.select-row:hover {
+        cursor: pointer;
+      }
+    }
+    i:hover {
+      cursor: pointer;
+    }
+  }
+  

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

@@ -0,0 +1,52 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { CollateralsService } from '../collaterals.service';
+import { MatDialog } from '@angular/material/dialog';
+
+/** Custom Components */
+import { DeleteDialogComponent } from '../../shared/delete-dialog/delete-dialog.component';
+
+
+@Component({
+  selector: 'mifosx-view-collateral',
+  templateUrl: './view-collateral.component.html',
+  styleUrls: ['./view-collateral.component.scss']
+})
+export class ViewCollateralComponent implements OnInit {
+
+  clientCollateralData: any;
+
+  collateralColumns: string[] = ['ID', 'Last Repayment', 'Remaining Amount', 'Last Repayment Date'];
+
+  constructor(
+    private route: ActivatedRoute,
+    private collateralsService: CollateralsService,
+    private router: Router,
+    private dialog: MatDialog
+  ) {
+    this.route.data.subscribe((data: {clientCollateralData: any}) => {
+      this.clientCollateralData = data.clientCollateralData;
+    });
+  }
+
+  ngOnInit(): void {
+  }
+
+  /**
+   * Deletes the Collateral and redirects to CLients Page.
+   */
+   deleteCollateral() {
+    const deleteCollateralDialogRef = this.dialog.open(DeleteDialogComponent, {
+      data: { deleteContext: `collateral ${this.clientCollateralData.id}` }
+    });
+    deleteCollateralDialogRef.afterClosed().subscribe((response: any) => {
+      if (response.delete) {
+        this.collateralsService.deleteCollateral(this.clientCollateralData.clientId, this.clientCollateralData.id)
+          .subscribe(() => {
+            this.router.navigate(['../../'], { relativeTo: this.route });
+          });
+      }
+    });
+  }
+
+}