/** Angular Imports */ import { Component , OnInit , ViewChild } from '@angular/core' ; import { ActivatedRoute , Router } from '@angular/router' ; import { MatDialog } from '@angular/material/dialog' ; import { MatPaginator } from '@angular/material/paginator' ; import { MatSort } from '@angular/material/sort' ; import { MatTableDataSource , MatTable } from '@angular/material/table' ; import { DatePipe } from '@angular/common' ; /** Custom Services */ import { LoansService } from 'app/loans/loans.service' ; import { SettingsService } from 'app/settings/settings.service' ; /** Custom Dialogs */ import { FormDialogComponent } from 'app/shared/form-dialog/form-dialog.component' ; import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component' ; import { ConfirmationDialogComponent } from 'app/shared/confirmation-dialog/confirmation-dialog.component' ; /** Custom Models */ import { FormfieldBase } from 'app/shared/form-dialog/formfield/model/formfield-base' ; import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base' ; import { DatepickerBase } from 'app/shared/form-dialog/formfield/model/datepicker-base' ; @ Component ( { selector : 'mifosx-charges-tab' , templateUrl : './charges-tab.component.html' , styleUrls : [ './charges-tab.component.scss' ] } ) export class ChargesTabComponent implements OnInit { /** Loan Details Data */ loanDetails : any ; /** Charges Data */ chargesData : any ; /** Status */ status : any ; /** Columns to be displayed in charges table. */ displayedColumns : string [ ] = [ 'name' , 'feepenalty' , 'paymentdueat' , 'dueasof' , 'calculationtype' , 'due' , 'paid' , 'waived' , 'outstanding' , 'actions' ] ; /** Data source for charges table. */ dataSource : MatTableDataSource < any > ; /** Paginator for charges table. */ @ ViewChild ( MatPaginator , { static : true } ) paginator : MatPaginator ; /** Sorter for charges table. */ @ ViewChild ( MatSort , { static : true } ) sort : MatSort ; param { ActivatedRoute } route param { SettingsService } settingsService constructor ( private loansService , private route , private datePipe , private router , public dialog , private settingsService ) { this . route . parent . data . subscribe ( ( data ) => { this . loanDetails = data . loanDetailsData ; } ) ; } ngOnInit ( ) { this . chargesData = this . loanDetails . charges ; this . status = this . loanDetails . status . value ; let actionFlag ; this . chargesData . forEach ( ( element ) => { if ( element . paid || element . waived || element . chargeTimeType . value === 'Disbursement' || this . loanDetails . status . value !== 'Active' ) { actionFlag = true ; } else { actionFlag = false ; } element . actionFlag = actionFlag ; } ) ; this . dataSource = new MatTableDataSource ( this . chargesData ) ; this . dataSource . paginator = this . paginator ; this . dataSource . sort = this . sort ; } param { any } chargeId payCharge ( chargeId ) { const formfields = [ new InputBase ( { controlName : 'amount' , label : 'Amount' , value : '' , type : 'number' , required : true } ) , new DatepickerBase ( { controlName : 'dueDate' , label : 'Payment Date' , value : '' , type : 'date' , required : true } ) ] ; const data = { title : `Pay Charge ${ chargeId }` , layout : { addButtonText : 'Confirm' } , formfields : formfields } ; const payChargeDialogRef = this . dialog . open ( FormDialogComponent , { data } ) ; payChargeDialogRef . afterClosed ( ) . subscribe ( ( response ) => { if ( response . data ) { const locale = 'en' ; const dateFormat = this . settingsService . dateFormat ; const dataObject = { ... response . data . value , dueDate : this . datePipe . transform ( response . data . value . dueDate , dateFormat ) , dateFormat , locale } ; this . loansService . executeLoansAccountChargesCommand ( this . loanDetails . id , 'paycharge' , dataObject , chargeId ) . subscribe ( ( ) => { this . reload ( ) ; } ) ; } } ) ; } param { any } chargeId waiveCharge ( chargeId ) { const waiveChargeDialogRef = this . dialog . open ( ConfirmationDialogComponent , { data : { heading : 'Waive Charge' , dialogContext : `Are you sure you want to waive charge with id: ${ chargeId }` , type : 'Basic' } } ) ; waiveChargeDialogRef . afterClosed ( ) . subscribe ( ( response ) => { if ( response . confirm ) { this . loansService . executeLoansAccountChargesCommand ( this . loanDetails . id , 'waive' , { } , chargeId ) . subscribe ( ( ) => { this . reload ( ) ; } ) ; } } ) ; } param { any } charge editCharge ( charge ) { const formfields = [ new InputBase ( { controlName : 'amount' , label : 'Amount' , value : charge . amount || charge . amountOrPercentage , type : 'number' , required : true } ) ] ; const data = { title : `Edit Charge ${ charge . id }` , layout : { addButtonText : 'Confirm' } , formfields : formfields } ; const editChargeDialogRef = this . dialog . open ( FormDialogComponent , { data } ) ; editChargeDialogRef . afterClosed ( ) . subscribe ( ( response ) => { if ( response . data ) { const locale = this . settingsService . language . code ; const dateFormat = this . settingsService . dateFormat ; const dataObject = { ... response . data . value , dateFormat , locale } ; this . loansService . editLoansAccountCharge ( this . loanDetails . id , dataObject , charge . id ) . subscribe ( ( ) => { this . reload ( ) ; } ) ; } } ) ; } param { any } chargeId deleteCharge ( chargeId ) { const deleteChargeDialogRef = this . dialog . open ( DeleteDialogComponent , { data : { deleteContext : `charge id:${ chargeId }` } } ) ; deleteChargeDialogRef . afterClosed ( ) . subscribe ( ( response ) => { if ( response . delete ) { this . loansService . deleteLoansAccountCharge ( this . loanDetails . id , chargeId ) . subscribe ( ( ) => { this . reload ( ) ; } ) ; } } ) ; } param $event routeEdit ( $event ) { $event . stopPropagation ( ) ; } /**
     * Refetches data fot the component
     * TODO: Replace by a custom reload component instead of hard-coded back-routing.
     */ private reload ( ) { const clientId = this . loanDetails . clientId ; const url = this . router . url ; this . router . navigateByUrl ( `/clients/${ clientId }/loans-accounts` , { skipLocationChange : true } ) . then ( ( ) => this . router . navigate ( [ url ] ) ) ; } }