CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

feat: tour integration

Browse Source 
Tour Integration
This commit is contained in:
Ramveer
2022-09-02 17:03:13 +05:30
committed by GitHub
parent 52b7a3274e
commit f1be9ab5b1
119 changed files with 6360 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/products/charges/charges.component.html
+36 -6
View File
@@ -1,20 +1,22 @@
<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 Charge
</button>
<div #buttonCreateCharge class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CHARGE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Charge
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filter 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">
<div #chargesTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -55,3 +57,31 @@
</div>
</div>
<ng-template #templateButtonCreateCharge let-popover="popover">
<h2>Create Charge</h2>
<p class="mw300">This option allows you to create new charges. It supports Loan charges, Savings & deposits charges and Client charges.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter charges.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCharge,buttonCreateCharge , 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateChargesTable,chargesTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateChargesTable let-popover="popover">
<h4 class="mw300">List of charges in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/72908813/Charges" target="_blank">Charges</a></h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/products/charges/charges.component.ts
+70 -4
View File
@@ -1,13 +1,17 @@
/** Angular Imports */
import { Component, ViewChild, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } 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';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { of } from 'rxjs';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Charges component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './charges.component.html',
styleUrls: ['./charges.component.scss']
})
export class ChargesComponent implements OnInit {
export class ChargesComponent implements OnInit, AfterViewInit {
/** Charge data. */
chargeData: any;
@@ -30,11 +34,26 @@ export class ChargesComponent implements OnInit {
/** Sorter for charges table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create charges button */
@ViewChild('buttonCreateCharge') buttonCreateCharge: ElementRef<any>;
/* Template for popover on create charges button */
@ViewChild('templateButtonCreateCharge') templateButtonCreateCharge: TemplateRef<any>;
/* Reference of charges table */
@ViewChild('chargesTable') chargesTable: ElementRef<any>;
/* Template for popover on charges table */
@ViewChild('templateChargesTable') templateChargesTable: TemplateRef<any>;
/**
* Retrieves the charges data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { charges: any }) => {
this.chargeData = data.charges;
});
@@ -70,4 +89,51 @@ export class ChargesComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showChargesPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateCharge, this.buttonCreateCharge.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showChargesList === true) {
setTimeout(() => {
this.showPopover(this.templateChargesTable, this.chargesTable.nativeElement, 'top', true);
});
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Next Step (Loan Products - Products Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showChargesPage = false;
this.configurationWizardService.showChargesList = false;
this.configurationWizardService.showLoanProducts = true;
this.router.navigate(['/products']);
}
/**
* Previous Step (Charges - Products Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showChargesPage = false;
this.configurationWizardService.showChargesList = false;
this.configurationWizardService.showCharges = true;
this.router.navigate(['/products']);
}
}
src/app/products/fixed-deposit-products/fixed-deposit-products.component.html
+32 -2
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonCreateFixedProduct class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FIXEDDEPOSITPRODUCT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Fixed Deposit Product
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filter 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">
<div #fixedProductsTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -38,3 +40,31 @@
</div>
</div>
<ng-template #templateButtonCreateFixedProduct let-popover="popover">
<h2>Create fixed deposit product</h2>
<p class="mw300">This option allows you to create new fixed deposit product.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter fixed deposit products.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateFixedProduct,buttonCreateFixedProduct , 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFixedProductsTable,fixedProductsTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFixedProductsTable let-popover="popover">
<h4 class="mw300">List of fixed deposit products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629544/Fixed+Deposit+Products" target="_blank">Fixed Deposit Products</a></h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/products/fixed-deposit-products/fixed-deposit-products.component.ts
+71 -4
View File
@@ -1,13 +1,17 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } 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';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { of } from 'rxjs';
/* Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Fixed Deposit Products component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './fixed-deposit-products.component.html',
styleUrls: ['./fixed-deposit-products.component.scss']
})
export class FixedDepositProductsComponent implements OnInit {
export class FixedDepositProductsComponent implements OnInit, AfterViewInit {
/** Fixed deposit products data. */
fixedDepositProductData: any;
@@ -30,11 +34,26 @@ export class FixedDepositProductsComponent implements OnInit {
/** Sorter for fixed deposit products table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create fixed product button */
@ViewChild('buttonCreateFixedProduct') buttonCreateFixedProduct: ElementRef<any>;
/* Template for popover on create fixed product button */
@ViewChild('templateButtonCreateFixedProduct') templateButtonCreateFixedProduct: TemplateRef<any>;
/* Reference of fixed deposit products table */
@ViewChild('fixedProductsTable') fixedProductsTable: ElementRef<any>;
/* Template for popover on fixed deposit products table */
@ViewChild('templateFixedProductsTable') templateFixedProductsTable: TemplateRef<any>;
/**
* Retrieves the fixed deposit products data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { fixedDepositProducts: any }) => {
this.fixedDepositProductData = data.fixedDepositProducts;
});
@@ -64,4 +83,52 @@ export class FixedDepositProductsComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showFixedDepositProductsPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateFixedProduct, this.buttonCreateFixedProduct.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showFixedDepositProductsList === true) {
setTimeout(() => {
this.showPopover(this.templateFixedProductsTable, this.fixedProductsTable.nativeElement, 'top', true);
});
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Next Step (Recurring Deposits Products-Products Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showFixedDepositProductsPage = false;
this.configurationWizardService.showFixedDepositProductsList = false;
this.configurationWizardService.showRecurringDepositProducts = true;
this.router.navigate(['/products']);
}
/**
* Previous Step (Fixed Deposits Products-Products Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showFixedDepositProductsPage = false;
this.configurationWizardService.showFixedDepositProductsList = false;
this.configurationWizardService.showFixedDepositProducts = true;
this.router.navigate(['/products']);
}
}
src/app/products/loan-products/loan-products.component.html
+32 -2
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonCreateLoanProduct class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_LOANPRODUCT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Loan Product
</button>
</div>
</div>
<div class="container">
<div fxLayout="row">
<div #filter fxLayout="row">
<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">
<div #loanProductsTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -52,3 +54,31 @@
</div>
</div>
<ng-template #templateButtonCreateLoanProduct let-popover="popover">
<h2>Create loan product</h2>
<p class="mw300">This option allows you to create new loan product.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter loan products.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateLoanProduct,buttonCreateLoanProduct, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLoanProductsTable,loanProductsTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateLoanProductsTable let-popover="popover">
<h4 class="mw300">List of loan products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102039585/Loan+Products" target="_blank">Loan Products</a></h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/products/loan-products/loan-products.component.ts
+73 -4
View File
@@ -1,16 +1,20 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } 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';
import { ActivatedRoute, Router } from '@angular/router';
/* Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
@Component({
selector: 'mifosx-loan-products',
templateUrl: './loan-products.component.html',
styleUrls: ['./loan-products.component.scss']
})
export class LoanProductsComponent implements OnInit {
export class LoanProductsComponent implements OnInit, AfterViewInit {
loanProductsData: any;
displayedColumns: string[] = ['name', 'shortName', 'closeDate', 'status'];
@@ -19,7 +23,25 @@ export class LoanProductsComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private route: ActivatedRoute) {
/* Reference of create loan product button */
@ViewChild('buttonCreateLoanProduct') buttonCreateLoanProduct: ElementRef<any>;
/* Template for popover on create loan product button */
@ViewChild('templateButtonCreateLoanProduct') templateButtonCreateLoanProduct: TemplateRef<any>;
/* Reference of loan products table */
@ViewChild('loanProductsTable') loanProductsTable: ElementRef<any>;
/* Template for popover on loan products table */
@ViewChild('templateLoanProductsTable') templateLoanProductsTable: TemplateRef<any>;
/**
* @param {ActivatedRoute} route ActivatedRoute.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: { loanProducts: any }) => {
this.loanProductsData = data.loanProducts;
});
@@ -35,4 +57,51 @@ export class LoanProductsComponent implements OnInit {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showLoanProductsPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateLoanProduct, this.buttonCreateLoanProduct.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showLoanProductsList === true) {
setTimeout(() => {
this.showPopover(this.templateLoanProductsTable, this.loanProductsTable.nativeElement, 'top', true);
});
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Next Step (Savings Products - Products Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showLoanProductsPage = false;
this.configurationWizardService.showLoanProductsList = false;
this.configurationWizardService.showSavingsProducts = true;
this.router.navigate(['/products']);
}
/**
* PRevious Step (Loan Products - Products Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showLoanProductsPage = false;
this.configurationWizardService.showLoanProductsList = false;
this.configurationWizardService.showLoanProducts = true;
this.router.navigate(['/products']);
}
}
src/app/products/products.component.html
+72
View File
@@ -8,6 +8,7 @@
<mat-nav-list>
<div #loanProducts>
<mat-list-item [routerLink]="['loan-products']" *mifosxHasPermission="'READ_LOANPRODUCT'">
<mat-icon matListIcon>
<fa-icon icon="briefcase" size="sm"></fa-icon>
@@ -15,7 +16,9 @@
<h4 matLine>Loan Products</h4>
<p matLine>Add new loan product or modify or inactivate loan product</p>
</mat-list-item>
</div>
<div #savingsProducts>
<mat-list-item [routerLink]="['saving-products']" *mifosxHasPermission="'READ_SAVINGSPRODUCT'">
<mat-icon matListIcon>
<fa-icon icon="briefcase" size="sm"></fa-icon>
@@ -23,7 +26,9 @@
<h4 matLine>Savings Products</h4>
<p matLine>Add new savings product or modify or inactivate savings product</p>
</mat-list-item>
</div>
<div #shareProducts>
<mat-list-item [routerLink]="['share-products']" *mifosxHasPermission="'READ_SHAREPRODUCT'">
<mat-icon matListIcon>
<fa-icon icon="briefcase" size="sm"></fa-icon>
@@ -31,7 +36,9 @@
<h4 matLine>Share Products</h4>
<p matLine>Add new share product or modify or inactivate share product</p>
</mat-list-item>
</div>
<div #charges>
<mat-list-item [routerLink]="['charges']" *mifosxHasPermission="'READ_CHARGE'">
<mat-icon matListIcon>
<fa-icon icon="money-bill-alt" size="sm"></fa-icon>
@@ -39,6 +46,7 @@
<h4 matLine>Charges</h4>
<p matLine>Define charges/penalties for loan products, savings and deposit products</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['collaterals']">
<mat-icon matListIcon>
@@ -72,6 +80,7 @@
<p matLine>Defines rules for taking multiple rules</p>
</mat-list-item>
<div #fixedDepositProducts>
<mat-list-item [routerLink]="['fixed-deposit-products']" *mifosxHasPermission="'READ_FIXEDDEPOSITPRODUCT'">
<mat-icon matListIcon>
<fa-icon icon="briefcase" size="sm"></fa-icon>
@@ -79,7 +88,9 @@
<h4 matLine>Fixed Deposit Products</h4>
<p matLine>Add, modify or inactivate a Fixed deposit product</p>
</mat-list-item>
</div>
<div #recurringDepositProducts>
<mat-list-item [routerLink]="['recurring-deposit-products']" *mifosxHasPermission="'READ_RECURRINGDEPOSITPRODUCT'">
<mat-icon matListIcon>
<fa-icon icon="briefcase" size="sm"></fa-icon>
@@ -87,6 +98,7 @@
<h4 matLine>Recurring Deposit Products</h4>
<p matLine>Add, modify or inactivate a Recurring Deposit product</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['tax-configurations']" *mifosxHasPermission="'READ_TAXGROUP'">
<mat-icon matListIcon>
@@ -113,3 +125,63 @@
</mat-card>
</div>
<ng-template #templateCharges let-popover="popover">
<h2>Charges</h2>
<p class="mw400">Mifos supports two types of charges—fees and penalties.Fees are charged for services—for example, membership fees, loan disbursement fees, withdrawal fees. Penalties are charged to discourage clients from deviating from the terms of a product</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepCharges()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepCharges()">Next</button>
</div>
</ng-template>
<ng-template #templateLoanProducts let-popover="popover">
<h2>Loan Products</h2>
<p class="mw400">Loan products define the rules, default settings, and constraints for a financial institution's lending offerings. A loan product provides a template for multiple loan accounts for the financial institution's clients.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepLoanProducts()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepLoanProducts()">Next</button>
</div>
</ng-template>
<ng-template #templateSavingsProducts let-popover="popover">
<h2>Savings Products</h2>
<p class="mw400">Savings products define the rules, default settings, and constraints for a financial institution's current/checking and passbook savings accounts. A saving product provides a template for multiple accounts that are or will be held by the financial institution's clients, groups and centers.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepSavingsProducts()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepSavingsProducts()">Next</button>
</div>
</ng-template>
<ng-template #templateShareProducts let-popover="popover">
<h2>Share Products</h2>
<p class="mw400">Share products define the rules, default settings, and constraints for a financial institution's Shares and dividends. A share product provides a template for multiple accounts that are or will be held by the financial institution's clients.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepShareProducts()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepShareProducts()">Next</button>
</div>
</ng-template>
<ng-template #templateFixedDepositProducts let-popover="popover">
<h2>Fixed Deposit Products</h2>
<p class="mw400">Fixed Deposit Products defines the rules, default settings, and constraints for a financial institution's <br> fixed deposit offerings (also referred to as term deposits). A fixed deposit product provides a template for multiple fixed deposit accounts for the financial institution's clients.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepFixedDepositProducts()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepFixedDepositProducts()">Next</button>
</div>
</ng-template>
<ng-template #templateRecurringDepositProducts let-popover="popover">
<h2>Recurring Deposit Products</h2>
<p class="mw400">Recurring Deposit products define the rules, default settings, and constraints for a financial institution's recurring deposit offerings (a type of term deposit with recurring deposits). A recurring deposit product provides a template for multiple recurring deposit accounts for the financial institution's clients.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepRecurringDepositProducts()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepRecurringDepositProducts()">Next</button>
</div>
</ng-template>
src/app/products/products.component.ts
+194 -3
View File
@@ -1,5 +1,10 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
/** Custom Services */
import { PopoverService } from '../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
/**
* Products component.
@@ -9,11 +14,197 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './products.component.html',
styleUrls: ['./products.component.scss']
})
export class ProductsComponent implements OnInit {
export class ProductsComponent implements OnInit, AfterViewInit {
constructor() { }
/* Reference of charges */
@ViewChild('charges') charges: ElementRef<any>;
/* Template for popover on charges */
@ViewChild('templateCharges') templateCharges: TemplateRef<any>;
/* Reference of loan products */
@ViewChild('loanProducts') loanProducts: ElementRef<any>;
/* Template for popover on loan products */
@ViewChild('templateLoanProducts') templateLoanProducts: TemplateRef<any>;
/* Reference of saving products */
@ViewChild('savingsProducts') savingsProducts: ElementRef<any>;
/* Template for popover on savings products */
@ViewChild('templateSavingsProducts') templateSavingsProducts: TemplateRef<any>;
/* Reference of share products */
@ViewChild('shareProducts') shareProducts: ElementRef<any>;
/* Template for popover on share products */
@ViewChild('templateShareProducts') templateShareProducts: TemplateRef<any>;
/* Reference of fixed deposit products */
@ViewChild('fixedDepositProducts') fixedDepositProducts: ElementRef<any>;
/* Template for popover on fixed deposit products */
@ViewChild('templateFixedDepositProducts') templateFixedDepositProducts: TemplateRef<any>;
/* Reference of recurring deposit products */
@ViewChild('recurringDepositProducts') recurringDepositProducts: ElementRef<any>;
/* Template for popover on recurring deposit products */
@ViewChild('templateRecurringDepositProducts') templateRecurringDepositProducts: TemplateRef<any>;
/**
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) { }
ngOnInit() {
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showCharges === true) {
setTimeout(() => {
this.showPopover(this.templateCharges, this.charges.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showLoanProducts === true) {
setTimeout(() => {
this.showPopover(this.templateLoanProducts, this.loanProducts.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showSavingsProducts === true) {
setTimeout(() => {
this.showPopover(this.templateSavingsProducts, this.savingsProducts.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showShareProducts === true) {
setTimeout(() => {
this.showPopover(this.templateShareProducts, this.shareProducts.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showFixedDepositProducts === true) {
setTimeout(() => {
this.showPopover(this.templateFixedDepositProducts, this.fixedDepositProducts.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showRecurringDepositProducts === true) {
setTimeout(() => {
this.showPopover(this.templateRecurringDepositProducts, this.recurringDepositProducts.nativeElement, 'bottom', true);
});
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Next Step (Charges Page) Configuration Wizard.
*/
nextStepCharges() {
this.configurationWizardService.showCharges = false;
this.configurationWizardService.showChargesPage = true;
this.router.navigate(['/products/charges']);
}
/**
* Previous Step (Create journal entry Page) Configuration Wizard.
*/
previousStepCharges() {
this.configurationWizardService.showCharges = false;
this.configurationWizardService.showCreateJournalEntries = true;
this.router.navigate(['/accounting/journal-entries/create']);
}
/**
* Next Step (Loan Products Page) Configuration Wizard.
*/
nextStepLoanProducts() {
this.configurationWizardService.showLoanProducts = false;
this.configurationWizardService.showLoanProductsPage = true;
this.router.navigate(['/products/loan-products']);
}
/**
* Previous Step (Charges Page) Configuration Wizard.
*/
previousStepLoanProducts() {
this.configurationWizardService.showLoanProducts = false;
this.configurationWizardService.showChargesList = true;
this.router.navigate(['/products/charges']);
}
/**
* Next Step (Savings Products Page) Configuration Wizard.
*/
nextStepSavingsProducts() {
this.configurationWizardService.showSavingsProducts = false;
this.configurationWizardService.showSavingsProductsPage = true;
this.router.navigate(['/products/saving-products']);
}
/**
* Previous Step (Savings Page) Configuration Wizard.
*/
previousStepSavingsProducts() {
this.configurationWizardService.showSavingsProducts = false;
this.configurationWizardService.showLoanProductsList = true;
this.router.navigate(['/products/loan-products']);
}
/**
* Next Step (Share Products Page) Configuration Wizard.
*/
nextStepShareProducts() {
this.configurationWizardService.showShareProducts = false;
this.configurationWizardService.showShareProductsPage = true;
this.router.navigate(['/products/share-products']);
}
/**
* Previous Step (Savings Products Page) Configuration Wizard.
*/
previousStepShareProducts() {
this.configurationWizardService.showShareProducts = false;
this.configurationWizardService.showSavingsProductsList = true;
this.router.navigate(['/products/saving-products']);
}
/**
* Next Step (Fixed Deposit Products Page) Configuration Wizard.
*/
nextStepFixedDepositProducts() {
this.configurationWizardService.showFixedDepositProducts = false;
this.configurationWizardService.showFixedDepositProductsPage = true;
this.router.navigate(['/products/fixed-deposit-products']);
}
/**
* Previous Step (Share Products Page) Configuration Wizard.
*/
previousStepFixedDepositProducts() {
this.configurationWizardService.showFixedDepositProducts = false;
this.configurationWizardService.showShareProductsList = true;
this.router.navigate(['/products/share-products']);
}
/**
* Next Step (Recurring Deposit Products Page) Configuration Wizard.
*/
nextStepRecurringDepositProducts() {
this.configurationWizardService.showRecurringDepositProducts = false;
this.configurationWizardService.showRecurringDepositProductsPage = true;
this.router.navigate(['/products/recurring-deposit-products']);
}
/**
* Previous Step (Fixed Deposit Products Page) Configuration Wizard.
*/
previousStepRecurringDepositProducts() {
this.configurationWizardService.showRecurringDepositProducts = false;
this.configurationWizardService.showFixedDepositProductsList = true;
this.router.navigate(['/products/fixed-deposit-products']);
}
}
src/app/products/products.module.ts
+4 -1
View File
@@ -221,6 +221,9 @@ import { EditBucketComponent } from './manage-delinquency-buckets/delinquency-bu
CreateBucketComponent,
EditBucketComponent
],
providers: [ ]
entryComponents: [
DepositProductIncentiveFormDialogComponent,
FloatingRatePeriodDialogComponent
],
})
export class ProductsModule { }
src/app/products/recurring-deposit-products/recurring-deposit-products.component.html
+32 -2
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonCreateRecurringProduct class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission='"CREATE_RECURRINGDEPOSITPRODUCT"'>
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Recurring Deposit Product
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filter 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">
<div #recurringProductsTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -38,3 +40,31 @@
</div>
</div>
<ng-template #templateButtonCreateRecurringProduct let-popover="popover">
<h2>Create recurring deposit product</h2>
<p class="mw300">This option allows you to create new recurring product.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter recurring deposit products.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateRecurringProduct,buttonCreateRecurringProduct , 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateRecurringProductsTable,recurringProductsTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateRecurringProductsTable let-popover="popover">
<h4 class="mw300">List of recurring deposit products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629552/Recurring+Deposit" target="_blank">Recurring Deposit Products</a></h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/products/recurring-deposit-products/recurring-deposit-products.component.ts
+99 -4
View File
@@ -1,13 +1,21 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } 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';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
/** rxjs Imports */
import { of } from 'rxjs';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { NextStepDialogComponent } from '../../configuration-wizard/next-step-dialog/next-step-dialog.component';
/**
* Recurring Deposit Products component.
*/
@@ -16,7 +24,7 @@ import { of } from 'rxjs';
templateUrl: './recurring-deposit-products.component.html',
styleUrls: ['./recurring-deposit-products.component.scss']
})
export class RecurringDepositProductsComponent implements OnInit {
export class RecurringDepositProductsComponent implements OnInit, AfterViewInit {
/** Data table data. */
recurringDepositProductData: any;
@@ -30,11 +38,27 @@ export class RecurringDepositProductsComponent implements OnInit {
/** Sorter for recurring deposit products table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create recurring deposit product button */
@ViewChild('buttonCreateRecurringProduct') buttonCreateRecurringProduct: ElementRef<any>;
/* Template for popover on create recurring deposit product button */
@ViewChild('templateButtonCreateRecurringProduct') templateButtonCreateRecurringProduct: TemplateRef<any>;
/* Reference of recurring deposit products table */
@ViewChild('recurringProductsTable') recurringProductsTable: ElementRef<any>;
/* Template for popover on recurring deposit products table */
@ViewChild('templateRecurringProductsTable') templateRecurringProductsTable: TemplateRef<any>;
/**
* Retrieves the recurring deposit products data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private dialog: MatDialog,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { recurringDepositProducts: any }) => {
this.recurringDepositProductData = data.recurringDepositProducts;
});
@@ -64,4 +88,75 @@ export class RecurringDepositProductsComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showRecurringDepositProductsPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateRecurringProduct, this.buttonCreateRecurringProduct.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showRecurringDepositProductsList === true) {
setTimeout(() => {
this.showPopover(this.templateRecurringProductsTable, this.recurringProductsTable.nativeElement, 'top', true);
});
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Opens Dialog for next step (Setup Funds and Manage Reports) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showRecurringDepositProductsPage = false;
this.configurationWizardService.showRecurringDepositProductsList = false;
this.openNextStepDialog();
}
/**
* Previous Step (Recurring Deposit Products-Products Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showRecurringDepositProductsPage = false;
this.configurationWizardService.showRecurringDepositProductsList = false;
this.configurationWizardService.showRecurringDepositProducts = true;
this.router.navigate(['/products']);
}
/**
* Next Step (Setup Funds and Manage Reports) Dialog Configuration Wizard.
*/
openNextStepDialog() {
const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
data: {
nextStepName: 'Setup Funds and Manage Reports',
previousStepName: 'Products',
stepPercentage: 94
},
});
nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
if (response.nextStep) {
this.configurationWizardService.showRecurringDepositProductsPage = false;
this.configurationWizardService.showRecurringDepositProductsList = false;
this.configurationWizardService.showManageFunds = true;
this.router.navigate(['/organization']);
} else {
this.configurationWizardService.showRecurringDepositProductsPage = false;
this.configurationWizardService.showRecurringDepositProductsList = false;
this.router.navigate(['/home']);
}
});
}
}
src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html
+55 -51
View File
@@ -140,31 +140,31 @@
<div *ngIf="recurringDepositProduct.activeChart" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column" >
<h3 class="mat-h3" fxFlexFill>Interest Rate Charts</h3>
<mat-divider [inset]="true"></mat-divider>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<div fxFlexFill *ngIf="recurringDepositProduct.activeChart.name">
<span fxFlex="40%">Name:</span>
<span fxFlex="60%">{{ recurringDepositProduct.activeChart.name }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Valid from Date:</span>
<span fxFlex="60%">{{ recurringDepositProduct.activeChart.fromDate | dateFormat }}</span>
</div>
<div fxFlexFill *ngIf="recurringDepositProduct.activeChart.endDate">
<span fxFlex="40%">End Date:</span>
<span fxFlex="60%">{{ recurringDepositProduct.activeChart.endDate | dateFormat }}</span>
</div>
<div fxFlexFill *ngIf="recurringDepositProduct.activeChart.description">
<span fxFlex="40%">Description:</span>
<span fxFlex="60%">{{ recurringDepositProduct.activeChart.description }}</span>
</div>
<div fxFlexFill>
<span fxFlex="40%">Primary Grouping by Amount:</span>
<span fxFlex="60%">{{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }}</span>
@@ -231,34 +231,34 @@
<td mat-cell *matCellDef="let chartSlab; let chartSlabIndex = dataIndex" [attr.colspan]="chartSlabsDisplayedColumns.length">
<div fxLayout="row wrap" fxFlexFill class="incentives" [@expandChartSlab]="chartSlabIndex === expandChartSlabIndex? 'expanded' : 'collapsed'">
<mat-card fxLayout="row wrap" fxFlexFill>
<h4 class="mat-h4" fxFlex="23%">
Incentives
</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table [dataSource]="chartSlab.incentives">
<ng-container matColumnDef="entityType">
<th mat-header-cell *matHeaderCellDef> Entity Type </th>
<td mat-cell *matCellDef="let incentive">
{{ incentive.entityType | find:recurringDepositProductTemplate.chartTemplate.entityTypeOptions:'id':'value' }}
</td>
</ng-container>
<ng-container matColumnDef="attributeName">
<th mat-header-cell *matHeaderCellDef> Attribute Name </th>
<td mat-cell *matCellDef="let incentive">
{{ incentive.attributeName | find:recurringDepositProductTemplate.chartTemplate.attributeNameOptions:'id':'value' }}
</td>
</ng-container>
<ng-container matColumnDef="conditionType">
<th mat-header-cell *matHeaderCellDef> Condition Type </th>
<td mat-cell *matCellDef="let incentive">
{{ incentive.conditionType | find:recurringDepositProductTemplate.chartTemplate.conditionTypeOptions:'id':'value' }}
</td>
</ng-container>
<ng-container matColumnDef="attributeValue">
<th mat-header-cell *matHeaderCellDef> Attribute Value </th>
<td mat-cell *matCellDef="let incentive" [ngSwitch]="incentive.attributeName">
@@ -268,26 +268,26 @@
<span *ngSwitchCase="5">{{ incentive.attributeValue | find:recurringDepositProductTemplate.chartTemplate.clientClassificationOptions:'id':'name' }}</span>
</td>
</ng-container>
<ng-container matColumnDef="incentiveType">
<th mat-header-cell *matHeaderCellDef> Incentive Type </th>
<td mat-cell *matCellDef="let incentive">
{{ incentive.incentiveType | find:recurringDepositProductTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}}
</td>
</ng-container>
<ng-container matColumnDef="amount">
<th mat-header-cell *matHeaderCellDef> Amount </th>
<td mat-cell *matCellDef="let incentive">
{{ incentive.amount }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="incentivesDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: incentivesDisplayedColumns;"></tr>
</table>
</mat-card>
</div>
</td>
@@ -298,9 +298,11 @@
<tr mat-row *matRowDef="let row; columns: chartSlabsIncentivesDisplayedColumns;" class="incentives-row"></tr>
</table>
<mat-divider [inset]="true"></mat-divider>
</div>
</div>
<div *ngIf="recurringDepositProduct.charges.length" fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
@@ -356,16 +358,16 @@
</div>
<div fxFlexFill *ngIf="recurringDepositProduct.accountingRule.id === 2" fxLayout="row wrap" fxLayout.lt-md="column">
<h4 fxFlexFill class="mat-h4">Assets</h4>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Saving reference:</span>
<span fxFlex="60%">{{ recurringDepositProduct.accountingMappings.savingsReferenceAccount.name }}</span>
</div>
<h4 fxFlexFill class="mat-h4">Liabilities</h4>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Saving control:</span>
<span fxFlex="60%">{{ recurringDepositProduct.accountingMappings.savingsControlAccount.name }}</span>
@@ -374,14 +376,16 @@
</div>
<h4 fxFlexFill class="mat-h4">Expenses</h4>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Interest on savings:</span>
<span fxFlex="60%">{{ recurringDepositProduct.accountingMappings.interestOnSavingsAccount.name }}</span>
<span fxFlex="40%">Write-off:</span>
<span fxFlex="60%">{{ recurringDepositProduct.accountingMappings.writeOffAccount.name }}</span>
</div>
<h4 fxFlexFill class="mat-h4">Income</h4>
<div fxFlexFill fxLayout="row wrap" fxLayout.lt-md="column">
<span fxFlex="40%">Income from fees:</span>
<span fxFlex="60%">{{ recurringDepositProduct.accountingMappings.incomeFromFeeAccount.name }}</span>
@@ -392,96 +396,96 @@
<div fxFlexFill *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length || recurringDepositProduct.feeToIncomeAccountMappings?.length || recurringDepositProduct.penaltyToIncomeAccountMappings?.length " fxLayout="row wrap" fxLayout.lt-md="column">
<h3 class="mat-h3" fxFlexFill>Advanced Accounting Rules</h3>
<mat-divider [inset]="true"></mat-divider>
<div *ngIf="recurringDepositProduct.paymentChannelToFundSourceMappings?.length" fxFlexFill fxLayout="row wrap"
fxLayout.lt-md="column">
<h4 class="mat-h4" fxFlexFill>Configure Fund Sources for Payment Channels</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table
[dataSource]="recurringDepositProduct.paymentChannelToFundSourceMappings">
<ng-container matColumnDef="paymentTypeId">
<th mat-header-cell *matHeaderCellDef> Payment Type </th>
<td mat-cell *matCellDef="let paymentFundSource">
{{ paymentFundSource.paymentType.name }}
</td>
</ng-container>
<ng-container matColumnDef="fundSourceAccountId">
<th mat-header-cell *matHeaderCellDef> Fund Source </th>
<td mat-cell *matCellDef="let paymentFundSource">
{{ paymentFundSource.fundSourceAccount.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="paymentFundSourceDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: paymentFundSourceDisplayedColumns;"></tr>
</table>
</div>
<div *ngIf="recurringDepositProduct.feeToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
fxLayout.lt-md="column">
<h4 class="mat-h4" fxFlexFill>Fees to Specific Income Accounts</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table
[dataSource]="recurringDepositProduct.feeToIncomeAccountMappings">
<ng-container matColumnDef="chargeId">
<th mat-header-cell *matHeaderCellDef> Fees </th>
<td mat-cell *matCellDef="let feesIncome">
{{ feesIncome.charge.name }}
</td>
</ng-container>
<ng-container matColumnDef="incomeAccountId">
<th mat-header-cell *matHeaderCellDef> Income Account </th>
<td mat-cell *matCellDef="let feesIncome">
{{ feesIncome.incomeAccount.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
</table>
</div>
<div *ngIf="recurringDepositProduct.penaltyToIncomeAccountMappings?.length" fxFlexFill fxLayout="row wrap"
fxLayout.lt-md="column">
<h4 class="mat-h4" fxFlexFill>Penalties to Specific Income Accounts</h4>
<table fxFlexFill class="mat-elevation-z1" mat-table
[dataSource]="recurringDepositProduct.penaltyToIncomeAccountMappings">
<ng-container matColumnDef="chargeId">
<th mat-header-cell *matHeaderCellDef> Penalty </th>
<td mat-cell *matCellDef="let penaltyIncome">
{{ penaltyIncome.charge.name }}
</td>
</ng-container>
<ng-container matColumnDef="incomeAccountId">
<th mat-header-cell *matHeaderCellDef> Income Account </th>
<td mat-cell *matCellDef="let penaltyIncome">
{{ penaltyIncome.incomeAccount.name }}
</td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="feesPenaltyIncomeDisplayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: feesPenaltyIncomeDisplayedColumns;"></tr>
</table>
</div>
</div>
</div>
src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.scss
+39 -18
View File
@@ -1,3 +1,7 @@
table {
width: 100%;
}
.mat-elevation-z1 {
margin: 1em 0 1.5em 0;
}
@@ -20,30 +24,47 @@ span {
}
table {
width: 100%;
width: 100%;
tr.incentives-row {
height: 0;
tr.incentives-row {
height: 0;
> td {
padding: 0;
}
> td {
padding: 0;
}
.incentives {
overflow: hidden;
}
.incentives {
overflow: hidden;
}
.mat-card {
border-radius: 0;
.mat-card {
border-radius: 0;
> h4 {
font-weight: 500;
margin: 0.5em 0 0;
> h4 {
font-weight: 500;
margin: 0.5em 0 0;
}
}
}
}
}
mat-divider {
margin: 0 0 0.5em 0;
}
.mat-elevation-z1 {
margin: 1em 0 1.5em 0;
}
h2, h3, h4 {
margin: 0;
font-weight: 500;
}
span {
margin: 0.5em 0;
}
mat-divider {
margin: 0 0 0.5em 0;
}
.margin-t {
margin-top: 1em;
}
src/app/products/saving-products/saving-products.component.html
+32 -2
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonSavingProduct class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SAVINGSPRODUCT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Saving Product
</button>
</div>
</div>
<div class="container">
<div fxLayout="row">
<div #filter fxLayout="row">
<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">
<div #savingProductTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -38,3 +40,31 @@
</div>
</div>
<ng-template #templateButtonSavingProduct let-popover="popover">
<h2>Create saving product</h2>
<p class="mw300">This option allows you to create new savings product.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter saving products.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonSavingProduct,buttonSavingProduct , 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSavingProductTable,savingProductTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateSavingProductTable let-popover="popover">
<h4 class="mw300">List of saving products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/102629497/Savings+Products" target="_blank">Savings Products</a></h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/products/saving-products/saving-products.component.ts
+73 -4
View File
@@ -1,16 +1,20 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } 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';
import { ActivatedRoute, Router } from '@angular/router';
/* Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
@Component({
selector: 'mifosx-saving-products',
templateUrl: './saving-products.component.html',
styleUrls: ['./saving-products.component.scss']
})
export class SavingProductsComponent implements OnInit {
export class SavingProductsComponent implements OnInit, AfterViewInit {
savingProductsData: any;
displayedColumns: string[] = ['name', 'shortName'];
@@ -19,7 +23,25 @@ export class SavingProductsComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private route: ActivatedRoute) {
/* Reference of create saving products button */
@ViewChild('buttonSavingProduct') buttonSavingProduct: ElementRef<any>;
/* Template for popover on creare saving products button */
@ViewChild('templateButtonSavingProduct') templateButtonSavingProduct: TemplateRef<any>;
/* Reference of saving products table */
@ViewChild('savingProductTable') savingProductTable: ElementRef<any>;
/* Template for popover on saving products table */
@ViewChild('templateSavingProductTable') templateSavingProductTable: TemplateRef<any>;
/**
* @param {ActivatedRoute} route ActivatedRoute.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: { savingProducts: any }) => {
this.savingProductsData = data.savingProducts;
});
@@ -35,4 +57,51 @@ export class SavingProductsComponent implements OnInit {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showSavingsProductsPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonSavingProduct, this.buttonSavingProduct.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showSavingsProductsList === true) {
setTimeout(() => {
this.showPopover(this.templateSavingProductTable, this.savingProductTable.nativeElement, 'top', true);
});
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Next Step (Share Products - Products Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showSavingsProductsPage = false;
this.configurationWizardService.showSavingsProductsList = false;
this.configurationWizardService.showShareProducts = true;
this.router.navigate(['/products']);
}
/**
* Previous Step (Savings Products Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showSavingsProductsPage = false;
this.configurationWizardService.showSavingsProductsList = false;
this.configurationWizardService.showSavingsProducts = true;
this.router.navigate(['/products']);
}
}
src/app/products/share-products/share-products.component.html
+32 -2
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonCreateShareProduct class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_SHAREPRODUCT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Share Product
</button>
</div>
</div>
<div class="container">
<div fxLayout="row">
<div #filter fxLayout="row">
<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">
<div #shareProductsTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -43,3 +45,31 @@
</div>
</div>
<ng-template #templateButtonCreateShareProduct let-popover="popover">
<h2>Create share product</h2>
<p class="mw300">This option allows you to create new share product.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter share products.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateShareProduct,buttonCreateShareProduct , 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateShareProductsTable,shareProductsTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateShareProductsTable let-popover="popover">
<h4 class="mw300">List of share products in the organization. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/129531946/Share+products" target="_blank">Share Products</a></h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/products/share-products/share-products.component.ts
+74 -4
View File
@@ -1,16 +1,20 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } 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';
import { ActivatedRoute, Router } from '@angular/router';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
@Component({
selector: 'mifosx-share-products',
templateUrl: './share-products.component.html',
styleUrls: ['./share-products.component.scss']
})
export class ShareProductsComponent implements OnInit {
export class ShareProductsComponent implements OnInit, AfterViewInit {
shareProductsData: any;
displayedColumns: string[] = ['name', 'shortName', 'totalShares'];
@@ -19,7 +23,25 @@ export class ShareProductsComponent implements OnInit {
@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
@ViewChild(MatSort, { static: true }) sort: MatSort;
constructor(private route: ActivatedRoute) {
/* Reference of create share product button */
@ViewChild('buttonCreateShareProduct') buttonCreateShareProduct: ElementRef<any>;
/* Template for popover on create share product button */
@ViewChild('templateButtonCreateShareProduct') templateButtonCreateShareProduct: TemplateRef<any>;
/* Reference of share products table */
@ViewChild('shareProductsTable') shareProductsTable: ElementRef<any>;
/* Template for popover on share products table */
@ViewChild('templateShareProductsTable') templateShareProductsTable: TemplateRef<any>;
/**
* @param {ActivatedRoute} route ActivatedRoute.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: { shareProducts: any }) => {
this.shareProductsData = data.shareProducts.pageItems;
});
@@ -35,4 +57,52 @@ export class ShareProductsComponent implements OnInit {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showShareProductsPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateShareProduct, this.buttonCreateShareProduct.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showShareProductsList === true) {
setTimeout(() => {
this.showPopover(this.templateShareProductsTable, this.shareProductsTable.nativeElement, 'top', true);
});
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Next Step (Fixed Deposit Products - Products Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showShareProductsPage = false;
this.configurationWizardService.showShareProductsList = false;
this.configurationWizardService.showFixedDepositProducts = true;
this.router.navigate(['/products']);
}
/**
* Previous Step (Share Products - Products Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showShareProductsPage = false;
this.configurationWizardService.showShareProductsList = false;
this.configurationWizardService.showShareProducts = true;
this.router.navigate(['/products']);
}
}