CBSNexora/cbsnexora
4
0
Fork 0
Code Issues Pull Requests Actions 1 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/accounting/accounting.component.html
+95 -35
View File
@@ -16,13 +16,15 @@
<p matLine>These are predefined postings</p>
</mat-list-item>
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'" [routerLink]="['journal-entries/create']">
<mat-icon matListIcon>
<fa-icon icon="plus" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Create Journal Entries</h4>
<p matLine>Manual journal entry transactions recorded in a journal</p>
</mat-list-item>
<div #createJournalEntries>
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'" [routerLink]="['journal-entries/create']">
<mat-icon matListIcon>
<fa-icon icon="plus" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Create Journal Entries</h4>
<p matLine>Manual journal entry transactions recorded in a journal</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['journal-entries']">
<mat-icon matListIcon>
@@ -32,21 +34,25 @@
<p matLine>Advanced search option for journal entries</p>
</mat-list-item>
<mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'" [routerLink]="['financial-activity-mappings']">
<mat-icon matListIcon>
<fa-icon icon="link" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Accounts Linked to Financial Activities</h4>
<p matLine>List of Financial Activities and GL Account Mappings</p>
</mat-list-item>
<div #accountsLinked>
<mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'" [routerLink]="['financial-activity-mappings']">
<mat-icon matListIcon>
<fa-icon icon="link" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Accounts Linked to Financial Activities</h4>
<p matLine>List of Financial Activities and GL Account Mappings</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['migrate-opening-balances']">
<mat-icon matListIcon>
<fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Migrate Opening Balances (Office-wise)</h4>
<p matLine>Set or update office-level opening balances for GL accounts</p>
</mat-list-item>
<div #migrateOpeningBalances>
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['migrate-opening-balances']">
<mat-icon matListIcon>
<fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Migrate Opening Balances (Office-wise)</h4>
<p matLine>Set or update office-level opening balances for GL accounts</p>
</mat-list-item>
</div>
</mat-nav-list>
@@ -56,21 +62,25 @@
<mat-nav-list>
<mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'" [routerLink]="['chart-of-accounts']">
<mat-icon matListIcon>
<fa-icon icon="sitemap" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Chart of Accounts</h4>
<p matLine>List of accounts used by the organization</p>
</mat-list-item>
<div #chartofAccounts>
<mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'" [routerLink]="['chart-of-accounts']">
<mat-icon matListIcon>
<fa-icon icon="sitemap" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Chart of Accounts</h4>
<p matLine>List of accounts used by the organization</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" [routerLink]="['closing-entries']">
<mat-icon matListIcon>
<fa-icon icon="archive" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Closing Entries</h4>
<p matLine>Journal entries made at the end of accounting period</p>
</mat-list-item>
<div #closingEntries>
<mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" [routerLink]="['closing-entries']">
<mat-icon matListIcon>
<fa-icon icon="archive" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Closing Entries</h4>
<p matLine>Journal entries made at the end of accounting period</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_ACCOUNTINGRULE'" [routerLink]="['accounting-rules']">
<mat-icon matListIcon>
@@ -105,3 +115,53 @@
</mat-card>
</div>
<ng-template #templateChartofAccounts let-popover="popover">
<h2>Chart of Accounts</h2>
<p class="mw300">The Chart of Accounts - General Ledger Setup allows you to organize your different accounts within Mifos X.</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();previousStepChartofAccounts()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">Next</button>
</div>
</ng-template>
<ng-template #templateAccountsLinked let-popover="popover">
<h2>Accounts linked to Financial Activities</h2>
<p class="mw400">Accounts linked to Financial Activities are mapped accounts which are needed to do system generating accounting transaction.</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();previousStepAccountsLinked()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">Next</button>
</div>
</ng-template>
<ng-template #templateMigrateOpeningBalances let-popover="popover">
<h2>Migrate opening balances (Office-wise)</h2>
<p class="mw400">This makes it easier for an organization wanting to move to Mifos to transfer GL account balances (from their existing accounting application or manual system) to Mifos X Accounting.</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();previousStepMigrateOpeningBalances()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">Next</button>
</div>
</ng-template>
<ng-template #templateClosingEntries let-popover="popover">
<h2>Closing Entries</h2>
<p class="mw300">In Mifos X, you can close accounting to journal entries. Closures can be applied to all branches or to each branch separately. It is important for organizations to close accounting periodically to prevent transactions that affect the accounting books.</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();previousStepClosingEntries()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">Next</button>
</div>
</ng-template>
<ng-template #templateCreateJournalEntries let-popover="popover">
<h2>Create Journal Entries</h2>
<p class="mw300">Journal Entries are essentially logs of all the transactions in your organization that have accounting implications.</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();previousStepCreateJournalEntries()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">Next</button>
</div>
</ng-template>
src/app/accounting/accounting.component.ts
+164 -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';
/**
* Accounting component.
@@ -9,11 +14,167 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './accounting.component.html',
styleUrls: ['./accounting.component.scss']
})
export class AccountingComponent implements OnInit {
export class AccountingComponent implements OnInit, AfterViewInit {
constructor() { }
/* Reference of Chart of Accounts */
@ViewChild('chartofAccounts') chartofAccounts: ElementRef<any>;
/* Template for popover on Chart of Accounts */
@ViewChild('templateChartofAccounts') templateChartofAccounts: TemplateRef<any>;
/* Reference of Accounts Linked */
@ViewChild('accountsLinked') accountsLinked: ElementRef<any>;
/* Template for popover on Accounts Linked */
@ViewChild('templateAccountsLinked') templateAccountsLinked: TemplateRef<any>;
/* Reference of Migrate Opening Balances */
@ViewChild('migrateOpeningBalances') migrateOpeningBalances: ElementRef<any>;
/* Template for popover on Migrate Opening Balances */
@ViewChild('templateMigrateOpeningBalances') templateMigrateOpeningBalances: TemplateRef<any>;
/* Reference of Closing Entries */
@ViewChild('closingEntries') closingEntries: ElementRef<any>;
/* Template for popover on Closing Entries */
@ViewChild('templateClosingEntries') templateClosingEntries: TemplateRef<any>;
/* Reference of Create Journal Entries */
@ViewChild('createJournalEntries') createJournalEntries: ElementRef<any>;
/* Template for popover on Create Journal Entries */
@ViewChild('templateCreateJournalEntries') templateCreateJournalEntries: 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() {
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showChartofAccounts === true) {
setTimeout(() => {
this.showPopover(this.templateChartofAccounts, this.chartofAccounts.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showAccountsLinked === true) {
setTimeout(() => {
this.showPopover(this.templateAccountsLinked, this.accountsLinked.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showMigrateOpeningBalances === true) {
setTimeout(() => {
this.showPopover(this.templateMigrateOpeningBalances, this.migrateOpeningBalances.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showClosingEntries === true) {
setTimeout(() => {
this.showPopover(this.templateClosingEntries, this.closingEntries.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCreateJournalEntries === true) {
setTimeout(() => {
this.showPopover(this.templateCreateJournalEntries, this.createJournalEntries.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Charts of Accounts Page) Configuration Wizard.
*/
nextStepChartofAccounts() {
this.configurationWizardService.showChartofAccounts = false;
this.configurationWizardService.showChartofAccountsPage = true;
this.router.navigate(['/accounting/chart-of-accounts']);
}
/**
* Previous Step (Scheduler Jobs Page) Configuration Wizard.
*/
previousStepChartofAccounts() {
this.configurationWizardService.showChartofAccounts = false;
this.configurationWizardService.showSchedulerJobsList = true;
this.router.navigate(['/system/scheduler-jobs']);
}
/**
* Next Step (Accounts Linked Page) Configuration Wizard.
*/
nextStepAccountsLinked() {
this.configurationWizardService.showAccountsLinked = false;
this.configurationWizardService.showAccountsLinkedPage = true;
this.router.navigate(['/accounting/financial-activity-mappings']);
}
/**
* Previous Step (Create Chart of Accounts Page) Configuration Wizard.
*/
previousStepAccountsLinked() {
this.configurationWizardService.showAccountsLinked = false;
this.configurationWizardService.showChartofAccountsForm = true;
this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/create']);
}
/**
* Next Step (Migrate Opening Balances) Configuration Wizard.
*/
nextStepMigrateOpeningBalances() {
this.router.navigate(['/accounting/migrate-opening-balances']);
}
/**
* Previous Step (Accounts Linked Page) Configuration Wizard.
*/
previousStepMigrateOpeningBalances() {
this.configurationWizardService.showMigrateOpeningBalances = false;
this.configurationWizardService.showAccountsLinkedList = true;
this.router.navigate(['accounting/financial-activity-mappings']);
}
/**
* Next Step (Closing Entries Page) Configuration Wizard.
*/
nextStepClosingEntries() {
this.configurationWizardService.showClosingEntries = false;
this.configurationWizardService.showClosingEntriesPage = true;
this.router.navigate(['/accounting/closing-entries']);
}
/**
* Previous Step (Migrate Opening Balances Page) Configuration Wizard.
*/
previousStepClosingEntries() {
this.configurationWizardService.showClosingEntries = false;
this.configurationWizardService.showMigrateOpeningBalances = true;
this.router.navigate(['/accounting/migrate-opening-balances']);
}
/**
* Next Step (Create Journal Entries Page) Configuration Wizard.
*/
nextStepCreateJournalEntries() {
this.router.navigate(['/accounting/journal-entries/create']);
}
/**
* Previous Step (Closing Entries Page) Configuration Wizard.
*/
previousStepCreateJournalEntries() {
this.configurationWizardService.showCreateJournalEntries = false;
this.configurationWizardService.showClosingEntriesList = true;
this.router.navigate(['/accounting/closing-entries']);
}
}
src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
+56 -14
View File
@@ -1,30 +1,34 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<mat-button-toggle-group [formControl]="viewGroup">
<mat-button-toggle value="listView">
<fa-icon icon="list"></fa-icon>
</mat-button-toggle>
<mat-button-toggle value="treeView">
<fa-icon icon="sitemap"></fa-icon>
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Add Account
</button>
<div #buttonTreeView>
<mat-button-toggle-group [formControl]="viewGroup">
<mat-button-toggle value="listView">
<fa-icon icon="list"></fa-icon>
</mat-button-toggle>
<mat-button-toggle value="treeView">
<fa-icon icon="sitemap"></fa-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div #buttonAddAccount>
<button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Add Account
</button>
</div>
</div>
<!-- List View -->
<div class="container" [hidden]="viewGroup.value !== 'listView'">
<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 #accountsTable class="mat-elevation-z8">
<table mat-table [dataSource]="tableDataSource" matSort>
@@ -194,3 +198,41 @@
</div>
</div>
<ng-template #templateButtonTreeView let-popover="popover">
<h2>Tree View</h2>
<p class="mw300">There is an alternative way to view your accounts - using the Tree View.</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( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateButtonAddAccount let-popover="popover">
<h2>Add Account</h2>
<p class="mw300">This option allows you to create new GL accounts.</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();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">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 GL accounts.</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( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, 'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateAccountsTable let-popover="popover">
<h4 class="mw300">List of chart of all the accounts being used by your organization.</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/accounting/chart-of-accounts/chart-of-accounts.component.ts
+61 -3
View File
@@ -1,12 +1,12 @@
/** Angular Imports */
import { Component, ViewChild, OnInit, AfterViewInit } 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 { MatTreeNestedDataSource } from '@angular/material/tree';
import { NestedTreeControl } from '@angular/cdk/tree';
import { FormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { of } from 'rxjs';
@@ -16,6 +16,8 @@ import { GLAccountNode } from './gl-account-node.model';
/** Custom Services */
import { GlAccountTreeService } from './gl-account-tree.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Chart of accounts component.
@@ -47,13 +49,28 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
/** Sorter for chart of accounts table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of Tree View Button */
@ViewChild('buttonTreeView') buttonTreeView: ElementRef<any>;
/* Template for popover on tree view button */
@ViewChild('templateButtonTreeView') templateButtonTreeView: TemplateRef<any>;
/* Reference of Accounts Table */
@ViewChild('accountsTable') accountsTable: ElementRef<any>;
/* Template for popover on accounts table */
@ViewChild('templateAccountsTable') templateAccountsTable: TemplateRef<any>;
/**
* Retrieves the gl accounts data from `resolve` and initializes(generates) gl accounts tree.
* @param {GlAccountTreeService} glAccountTreeService GL Account tree service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private glAccountTreeService: GlAccountTreeService,
private route: ActivatedRoute) {
private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: { chartOfAccounts: any }) => {
this.glAccountData = data.chartOfAccounts;
glAccountTreeService.initialize(this.glAccountData);
@@ -87,6 +104,17 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
}
};
this.tableDataSource.sort = this.sort;
if (this.configurationWizardService.showChartofAccountsPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonTreeView, this.buttonTreeView.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showChartofAccountsList === true) {
setTimeout(() => {
this.showPopover(this.templateAccountsTable, this.accountsTable.nativeElement, 'top', true);
});
}
}
/**
@@ -119,4 +147,34 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
*/
private _getChildren = (node: GLAccountNode) => of(node.children);
/**
* 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 (Create Charts of Accounts Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showChartofAccountsPage = false;
this.configurationWizardService.showChartofAccountsList = false;
this.configurationWizardService.showChartofAccountsForm = true;
this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/create']);
}
/**
* Previous Step (Charts of Accounts Accounting Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showChartofAccountsPage = false;
this.configurationWizardService.showChartofAccountsList = false;
this.configurationWizardService.showChartofAccounts = true;
this.router.navigate(['/accounting']);
}
}
src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
+12 -1
View File
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="glAccountForm" (ngSubmit)="submit()">
<form #accountFormRef [formGroup]="glAccountForm" (ngSubmit)="submit()">
<mat-card-content>
@@ -91,3 +91,14 @@
</mat-card>
</div>
<ng-template #templateAccountFormRef let-popover="popover">
<h2>Create GL account</h2>
<p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup" target="_blank">Chart of Accounts</a></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()">Create GL Account</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts
+91 -4
View File
@@ -1,10 +1,16 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
/** Custom Services */
import { AccountingService } from '../../accounting.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Create gl account component.
@@ -14,7 +20,7 @@ import { AccountingService } from '../../accounting.service';
templateUrl: './create-gl-account.component.html',
styleUrls: ['./create-gl-account.component.scss']
})
export class CreateGlAccountComponent implements OnInit {
export class CreateGlAccountComponent implements OnInit, AfterViewInit {
/** GL account form. */
glAccountForm: FormGroup;
@@ -35,17 +41,28 @@ export class CreateGlAccountComponent implements OnInit {
/** Cancel route. (depending on creation of gl account or sub-ledger account) */
cancelRoute = '../../';
/* Reference of accounts form */
@ViewChild('accountFormRef') accountFormRef: ElementRef<any>;
/* Template for popover on accounts form */
@ViewChild('templateAccountFormRef') templateAccountFormRef: TemplateRef<any>;
/**
* Retrieves the chart of accounts data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
* @param {AccountingService} accountingService Accounting Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
* @param {Matdialog} dialog Matdialog.
*/
constructor(private formBuilder: FormBuilder,
private accountingService: AccountingService,
private route: ActivatedRoute,
private router: Router) {
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService,
public dialog: MatDialog) {
this.route.queryParamMap.subscribe(params => {
this.accountTypeId = Number(params.get('accountType'));
this.parentId = Number(params.get('parent'));
@@ -118,8 +135,78 @@ export class CreateGlAccountComponent implements OnInit {
*/
submit() {
this.accountingService.createGlAccount(this.glAccountForm.value).subscribe((response: any) => {
this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
if (this.configurationWizardService.showChartofAccounts === true) {
this.configurationWizardService.showChartofAccounts = false;
this.openDialog();
} else {
this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
}
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showChartofAccountsForm === true) {
setTimeout(() => {
this.showPopover(this.templateAccountFormRef, this.accountFormRef.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Accounts Linked Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showChartofAccountsForm = false;
this.configurationWizardService.showAccountsLinked = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Charts of Accounts Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showChartofAccountsForm = false;
this.configurationWizardService.showChartofAccountsList = true;
this.router.navigate(['/accounting/chart-of-accounts']);
}
/**
* Opens dialog if the user wants to create more accounts.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'GL account'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showChartofAccountsForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showChartofAccountsForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/create']);
} else if (response.step === 3) {
this.configurationWizardService.showChartofAccountsForm = false;
this.configurationWizardService.showAccountsLinked = true;
this.router.navigate(['/accounting']);
}
});
}
}
src/app/accounting/closing-entries/closing-entries.component.html
+36 -6
View File
@@ -1,11 +1,13 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Closure
</button>
<div #buttonCreateClosure>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Closure
</button>
</div>
</div>
<div class="container" fxLayout="row">
<div #filter class="container" fxLayout="row">
<mat-form-field fxFlex>
<mat-label>Office Name</mat-label>
<input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
@@ -21,7 +23,7 @@
<div class="container">
<div class="mat-elevation-z8">
<div #closuresTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -55,3 +57,31 @@
</div>
</div>
<ng-template #templateButtonCreateClosure let-popover="popover">
<h2>Create Closure</h2>
<p class="mw300">This option allows you to create new closure.</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 closures by office.</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(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateClosuresTable let-popover="popover">
<h4>List of closures. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">Closing Entries</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/accounting/closing-entries/closing-entries.component.ts
+70 -4
View File
@@ -1,14 +1,18 @@
/** 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 { FormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { startWith, map } from 'rxjs/operators';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Closing entries component.
*/
@@ -17,7 +21,7 @@ import { startWith, map } from 'rxjs/operators';
templateUrl: './closing-entries.component.html',
styleUrls: ['./closing-entries.component.scss']
})
export class ClosingEntriesComponent implements OnInit {
export class ClosingEntriesComponent implements OnInit, AfterViewInit {
/** Columns to be displayed in closing entries table. */
displayedColumns: string[] = ['officeName', 'closingDate', 'comments', 'createdByUsername'];
@@ -37,11 +41,26 @@ export class ClosingEntriesComponent implements OnInit {
/** Sorter for closing entries table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create closure button */
@ViewChild('buttonCreateClosure') buttonCreateClosure: ElementRef<any>;
/* Template for popover on create closure button */
@ViewChild('templateButtonCreateClosure') templateButtonCreateClosure: TemplateRef<any>;
/* Reference of closures table */
@ViewChild('closuresTable') closuresTable: ElementRef<any>;
/* Template for popover on closures table */
@ViewChild('templateClosuresTable') templateClosuresTable: TemplateRef<any>;
/**
* Retrieves the offices and gl account closures 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: {
offices: any,
glAccountClosures: any
@@ -99,4 +118,51 @@ export class ClosingEntriesComponent implements OnInit {
return this.officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showClosingEntriesPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateClosure, this.buttonCreateClosure.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showClosingEntriesList === true) {
setTimeout(() => {
this.showPopover(this.templateClosuresTable, this.closuresTable.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create journal Entry Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showClosingEntriesPage = false;
this.configurationWizardService.showClosingEntriesList = false;
this.configurationWizardService.showCreateJournalEntries = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Closing Entries Accounting Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showClosingEntriesPage = false;
this.configurationWizardService.showClosingEntriesList = false;
this.configurationWizardService.showClosingEntries = true;
this.router.navigate(['/accounting']);
}
}
src/app/accounting/create-journal-entry/create-journal-entry.component.html
+11 -1
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>Office</mat-label>
@@ -176,3 +176,13 @@
</mat-card>
</div>
<ng-template #templateCreateJournalFormRef let-popover="popover">
<h2>Add Journal Entry Form</h2>
<p class="mw300">Fields with a red asterisk (*) are required. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">Add Journal Entries</a></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();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/create-journal-entry/create-journal-entry.component.ts
+78 -3
View File
@@ -1,12 +1,18 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
/** Custom Services */
import { AccountingService } from '../accounting.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
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';
/**
* Create Journal Entry component.
*/
@@ -15,7 +21,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './create-journal-entry.component.html',
styleUrls: ['./create-journal-entry.component.scss']
})
export class CreateJournalEntryComponent implements OnInit {
export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
/** Minimum transaction date allowed. */
minDate = new Date(2000, 0, 1);
@@ -32,6 +38,11 @@ export class CreateJournalEntryComponent implements OnInit {
/** Gl Account data. */
glAccountData: any;
/* Reference of create journal form */
@ViewChild('createJournalFormRef') createJournalFormRef: ElementRef<any>;
/* Template for popover on create journal form */
@ViewChild('templateCreateJournalFormRef') templateCreateJournalFormRef: TemplateRef<any>;
/**
* Retrieves the offices, currencies, payment types and gl accounts data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -39,13 +50,18 @@ export class CreateJournalEntryComponent implements OnInit {
* @param {SettingsService} settingsService Settings Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private accountingService: AccountingService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router) {
private router: Router,
private dialog: MatDialog,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: {
offices: any,
currencies: any,
@@ -149,4 +165,63 @@ export class CreateJournalEntryComponent implements OnInit {
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showCreateJournalEntries === true) {
setTimeout(() => {
this.showPopover(this.templateCreateJournalFormRef, this.createJournalFormRef.nativeElement, 'top', true);
});
}
}
/**
* opens dialog for next step Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showCreateJournalEntries = false;
this.openNextStepDialog();
}
/**
* Next Step (Create journal entry Accounting Page) Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/accounting']);
}
/**
* Next Step (Products) Dialog Configuration Wizard.
*/
openNextStepDialog() {
const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
data: {
nextStepName: 'Setup Products',
previousStepName: 'Accounting',
stepPercentage: 74
},
});
nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
if (response.nextStep) {
this.configurationWizardService.showCreateJournalEntries = false;
this.configurationWizardService.showCharges = true;
this.router.navigate(['/products']);
} else {
this.configurationWizardService.showCreateJournalEntries = false;
this.router.navigate(['/home']);
}
});
}
}
src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
+25 -4
View File
@@ -1,10 +1,12 @@
<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Define New Mapping
</button>
<div #buttonDefineMapping>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Define New Mapping
</button>
</div>
</div>
<div class="mat-elevation-z8 container">
<div #activitiesTable class="mat-elevation-z8 container">
<table mat-table [dataSource]="dataSource" matSort>
@@ -31,3 +33,22 @@
<mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
</div>
<ng-template #templateButtonDefineMapping let-popover="popover">
<h2>Define New Mapping</h2>
<p class="mw300">To define new mapping.</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(templateActivitiesTable, activitiesTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateActivitiesTable let-popover="popover">
<h4 class="mw300">List of accounts linked to different financial activities. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">Accounts linked to Financial Activities</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(templateButtonDefineMapping, buttonDefineMapping , 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts
+71 -4
View File
@@ -1,9 +1,13 @@
/** 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';
/**
* Financial activity mappings component.
@@ -13,7 +17,7 @@ import { ActivatedRoute } from '@angular/router';
templateUrl: './financial-activity-mappings.component.html',
styleUrls: ['./financial-activity-mappings.component.scss']
})
export class FinancialActivityMappingsComponent implements OnInit {
export class FinancialActivityMappingsComponent implements OnInit, AfterViewInit {
/** Financial activity account data. */
financialActivityAccountData: any;
@@ -27,11 +31,26 @@ export class FinancialActivityMappingsComponent implements OnInit {
/** Sorter for financial activity mappings table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of define mapping button */
@ViewChild('buttonDefineMapping') buttonDefineMapping: ElementRef<any>;
/* Template for popover on define mapping button */
@ViewChild('templateButtonDefineMapping') templateButtonDefineMapping: TemplateRef<any>;
/* Reference of Activities table */
@ViewChild('activitiesTable') activitiesTable: ElementRef<any>;
/* Template for popover on Activities table */
@ViewChild('templateActivitiesTable') templateActivitiesTable: TemplateRef<any>;
/**
* Retrieves the financial activity accounts 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: { financialActivityAccounts: any }) => {
this.financialActivityAccountData = data.financialActivityAccounts;
});
@@ -61,4 +80,52 @@ export class FinancialActivityMappingsComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showAccountsLinkedPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonDefineMapping, this.buttonDefineMapping.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showAccountsLinkedList === true) {
setTimeout(() => {
this.showPopover(this.templateActivitiesTable, this.activitiesTable.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Migrate Opening Balances Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showAccountsLinkedPage = false;
this.configurationWizardService.showAccountsLinkedList = false;
this.configurationWizardService.showMigrateOpeningBalances = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Accounts Linked Accounting Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showAccountsLinkedPage = false;
this.configurationWizardService.showAccountsLinkedList = false;
this.configurationWizardService.showAccountsLinked = true;
this.router.navigate(['/accounting']);
}
}
src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
+14 -2
View File
@@ -7,7 +7,7 @@
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="88%">
<mat-label>Office</mat-label>
@@ -21,7 +21,9 @@
</mat-error>
</mat-form-field>
<button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">Retrieve</button>
<div>
<button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">Retrieve</button>
</div>
</div>
@@ -124,3 +126,13 @@
</mat-card>
</div>
<ng-template #templateSearchFormRef let-popover="popover">
<h2>Migrate opening balances (Office-wise)</h2>
<p class="mw300">This form will be used to migrate opening balances. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise" target="_blank">Migrate opening balances (Office-wise)</a></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();popover.close();previousStep();">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();popover.close();nextStep();">Next</button>
</div>
</ng-template>
src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts
+53 -3
View File
@@ -1,11 +1,14 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
/** Custom Services */
import { AccountingService } from '../accounting.service';
import { SettingsService } from 'app/settings/settings.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Validators */
import { onlyOneOfTheFieldsIsRequiredValidator } from './only-one-of-the-fields-is-required.validator';
import { Dates } from 'app/core/utils/dates';
@@ -18,7 +21,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './migrate-opening-balances.component.html',
styleUrls: ['./migrate-opening-balances.component.scss']
})
export class MigrateOpeningBalancesComponent implements OnInit {
export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
/** Minimum opening balances date allowed. */
minDate = new Date(2000, 0, 1);
@@ -37,6 +40,11 @@ export class MigrateOpeningBalancesComponent implements OnInit {
/** Sum total of credits. */
creditsSum = 0;
/* Reference of search form */
@ViewChild('searchFormRef') searchFormRef: ElementRef<any>;
/* Template for popover on search form */
@ViewChild('templateSearchFormRef') templateSearchFormRef: TemplateRef<any>;
/**
* Retrieves the offices and currencies from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -44,13 +52,17 @@ export class MigrateOpeningBalancesComponent implements OnInit {
* @param {SettingsService} settingsService Settings Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private accountingService: AccountingService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router) {
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: {
offices: any,
currencies: any
@@ -160,4 +172,42 @@ export class MigrateOpeningBalancesComponent implements OnInit {
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showMigrateOpeningBalances === true) {
setTimeout(() => {
this.showPopover(this.templateSearchFormRef, this.searchFormRef.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Closing Entries Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showMigrateOpeningBalances = false;
this.configurationWizardService.showClosingEntries = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Migrate Opening Balances Accounting Page) Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/accounting']);
}
}
src/app/app.module.ts
+4
View File
@@ -35,6 +35,8 @@ import { NotificationsModule } from './notifications/notifications.module';
import { CollectionsModule } from './collections/collections.module';
import { ProfileModule } from './profile/profile.module';
import { TasksModule } from './tasks/tasks.module';
import { ConfigurationWizardModule } from './configuration-wizard/configuration-wizard.module';
import {PortalModule} from '@angular/cdk/portal';
/** Main Routing Module */
import { AppRoutingModule } from './app-routing.module';
@@ -61,6 +63,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
BrowserModule,
BrowserAnimationsModule,
HttpClientModule,
PortalModule,
CoreModule,
HomeModule,
LoginModule,
@@ -82,6 +85,7 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
SearchModule,
CollectionsModule,
TasksModule,
ConfigurationWizardModule,
AppRoutingModule,
],
declarations: [WebAppComponent, NotFoundComponent],
src/app/configuration-wizard/completion-dialog/completion-dialog.component.html
+17
View File
@@ -0,0 +1,17 @@
<h1 mat-dialog-title>Welcome to Mifos</h1>
<mat-dialog-content>
<h3 class="mw600">Following guide tour will help you configure Mifos according to your organization needs.</h3>
<h3>You have successfully completed the setup of Configuration Wizard.</h3>
<h3>Progress Bar : 100 %</h3>
<mat-progress-bar mode="determinate" value="100"></mat-progress-bar>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button color="warn" mat-dialog-close>Close Config. Wizard</button>
</mat-dialog-actions>
src/app/configuration-wizard/completion-dialog/completion-dialog.component.scss
View File
src/app/configuration-wizard/completion-dialog/completion-dialog.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { CompletionDialogComponent } from './completion-dialog.component';
describe('CompletionDialogComponent', () => {
let component: CompletionDialogComponent;
let fixture: ComponentFixture<CompletionDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ CompletionDialogComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(CompletionDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/configuration-wizard/completion-dialog/completion-dialog.component.ts
+21
View File
@@ -0,0 +1,21 @@
/** Angular Imports */
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
/**
* Completion Dialog Component.
*/
@Component({
selector: 'mifosx-completion-dialog',
templateUrl: './completion-dialog.component.html',
styleUrls: ['./completion-dialog.component.scss']
})
export class CompletionDialogComponent implements OnInit {
constructor(public dialogRef: MatDialogRef<CompletionDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
}
}
src/app/configuration-wizard/configuration-wizard.component.html
+39
View File
@@ -0,0 +1,39 @@
<h1 mat-dialog-title>Welcome to Mifos</h1>
<mat-dialog-content>
<h3 class="mw600">Following guide tour will help you configure Mifos according to your organization needs.</h3>
<mat-grid-list cols="3" rowHeight="50px">
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 1 }">Home Screen Tour</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 2 }">Setup Organization</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 3 }">Setup System</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 4 }">Setup Accounting</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 5 }">Setup Products</button>
</mat-grid-tile>
<mat-grid-tile>
<button mat-raised-button color="primary" [mat-dialog-close]="{ show: 6 }">Setup Funds and Reports</button>
</mat-grid-tile>
</mat-grid-list>
<h3>Progress Bar : 0%</h3>
<mat-progress-bar mode="determinate" value="0"></mat-progress-bar>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button color="warn" [mat-dialog-close]="{ show: 0 }">Close Config. Wizard</button>
</mat-dialog-actions>
src/app/configuration-wizard/configuration-wizard.component.scss
View File
src/app/configuration-wizard/configuration-wizard.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ConfigurationWizardComponent } from './configuration-wizard.component';
describe('ConfigurationWizardComponent', () => {
let component: ConfigurationWizardComponent;
let fixture: ComponentFixture<ConfigurationWizardComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ConfigurationWizardComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ConfigurationWizardComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/configuration-wizard/configuration-wizard.component.ts
+25
View File
@@ -0,0 +1,25 @@
/** Angular Imports */
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
/**
* Configuration Wizard Component.
*/
@Component({
selector: 'mifosx-configuration-wizard',
templateUrl: './configuration-wizard.component.html',
styleUrls: ['./configuration-wizard.component.scss']
})
export class ConfigurationWizardComponent implements OnInit {
show: number;
/**
* @param {MatDialogRef<ConfigurationWizardComponent>} dialogRef MatDialogRef<ConfigurationWizardComponent>.
*/
constructor(public dialogRef: MatDialogRef<ConfigurationWizardComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) { }
ngOnInit() {
}
}
src/app/configuration-wizard/configuration-wizard.module.ts
+54
View File
@@ -0,0 +1,54 @@
/** Angular Imports */
import { OverlayModule } from '@angular/cdk/overlay';
import { PortalModule } from '@angular/cdk/portal';
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { MatDialogModule } from '@angular/material/dialog';
/*Custom Directives*/
import { PopoverArrowDirective } from './popover/popover-arrow.directive';
import { PopoverCloseDirective } from './popover/popover-close.directive';
/*Custom Components*/
import { PopoverComponent } from './popover/popover.component';
import { ConfigurationWizardComponent } from './configuration-wizard.component';
import { ContinueSetupDialogComponent } from './continue-setup-dialog/continue-setup-dialog.component';
import { NextStepDialogComponent } from './next-step-dialog/next-step-dialog.component';
import { CompletionDialogComponent } from './completion-dialog/completion-dialog.component';
/** Custom Modules */
import { SharedModule } from '../shared/shared.module';
/**
* Configuration Wizard Module
*/
@NgModule({
declarations: [
PopoverComponent,
PopoverCloseDirective,
PopoverArrowDirective,
ConfigurationWizardComponent,
ContinueSetupDialogComponent,
NextStepDialogComponent,
CompletionDialogComponent
],
imports: [
SharedModule,
CommonModule,
OverlayModule,
PortalModule,
MatDialogModule
],
exports: [
PopoverCloseDirective
],
entryComponents: [
PopoverComponent,
ConfigurationWizardComponent,
ContinueSetupDialogComponent,
NextStepDialogComponent,
CompletionDialogComponent
]
})
export class ConfigurationWizardModule { }
src/app/configuration-wizard/configuration-wizard.service.spec.ts
+12
View File
@@ -0,0 +1,12 @@
import { TestBed } from '@angular/core/testing';
import { ConfigurationWizardService } from './configuration-wizard.service';
describe('ConfigurationWizardService', () => {
beforeEach(() => TestBed.configureTestingModule({}));
it('should be created', () => {
const service: ConfigurationWizardService = TestBed.get(ConfigurationWizardService);
expect(service).toBeTruthy();
});
});
src/app/configuration-wizard/configuration-wizard.service.ts
+290
View File
@@ -0,0 +1,290 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
/**
* Configuration Wizard service.
*/
@Injectable({
providedIn: 'root'
})
export class ConfigurationWizardService {
/**
* Home Tour
*/
/*To show toolbar*/
showToolbar = false;
/*To show popover on admin section in toolbar*/
showToolbarAdmin = false;
/*To show side navbar*/
showSideNav = false;
/*To show popover on chart of accounts section in sidenav bar*/
showSideNavChartofAccounts = false;
/*To show breadcrumbs*/
showBreadcrumbs = false;
/*To show home*/
showHome = false;
/*To show search activity in home*/
showHomeSearchActivity = false;
/**
* Organization Setup
*/
/*To show popover on manage offices on oganization page*/
showCreateOffice = false;
/*To show popover on button in offices page*/
showOfficeList = false;
/*To show popover on offices table*/
showOfficeTable = false;
/*To show popover on create office form*/
showOfficeForm = false;
/*To show popover on add edit currency on organization page*/
showAddEditCurrency = false;
/*To show popover on button in currency page*/
showCurrencyPage = false;
/*To show popover on currency table*/
showCurrencyList = false;
/*To show popover on currency form*/
showCurrencyForm = false;
/*To show popover on manage holiday on organization page*/
showCreateHoliday = false;
/*To show popover on button in holiday page*/
showHolidayPage = false;
/*To show popover on filter in holiday table*/
showHolidayFilter = false;
/*To show popover on manage employees on organization page*/
showCreateEmployee = false;
/*To show popover on button in employee page*/
showEmployeeList = false;
/*To show popover on employees table*/
showEmployeeTable = false;
/*To show popover on create employee form*/
showEmployeeForm = false;
/*To show popover on define working days*/
showDefineWorkingDays = false;
/**
* System Setup
*/
/*To show popover on manage datatables on system page*/
showDatatables = false;
/*To show popover on button in datatables page*/
showDatatablesPage = false;
/*To show popover on datatables table*/
showDatatablesList = false;
/*To show popover on create datable form*/
showDatatablesForm = false;
/*To show popover manage codes on system page*/
showSystemCodes = false;
/*To show popover on button in codes page*/
showSystemCodesPage = false;
/*To show popover on codes table*/
showSystemCodesList = false;
/*To show popover on create codes form*/
showSystemCodesForm = false;
/*To show popover on manage roles and permision on system page*/
showRolesandPermission = false;
/*To show popover on button in rolaes and permission page*/
showRolesandPermissionPage = false;
/*To show popover on roles and permission list*/
showRolesandPermissionList = false;
/*To show popover on button on user page*/
showUsers = false;
/*To show popover on users table*/
showUsersList = false;
/*To show popover on create user form*/
showUsersForm = false;
/*To show popover on maker checker table in system page*/
showMakerCheckerTable = false;
/*To show popover on button in make checker tasks page*/
showMakerCheckerTablePage = false;
/*To show popover on maker checker tasks table*/
showMakerCheckerTableList = false;
/*To show popover on global configuration in system page*/
showConfigurations = false;
/*To show popover on button in configuration page*/
showConfigurationsPage = false;
/*To show popover on button in configuration list*/
showConfigurationsList = false;
/*To show popover on manage scheduler jobs on system page*/
showSchedulerJobs = false;
/*To show popover on button in scheduler jobs page*/
showSchedulerJobsPage = false;
/*To show popover on scheduler jobs table*/
showSchedulerJobsList = false;
/**
* Accounting Setup
*/
/*To show popover on chart of accounts on accounting page*/
showChartofAccounts = false;
/*To show popover on button in chart of accounts page*/
showChartofAccountsPage = false;
/*To show popover on button in chart of accounts page*/
showChartofAccountsList = false;
/*To show popover on create chart of accounts form*/
showChartofAccountsForm = false;
/*To show popover on accounts linked on accounting page*/
showAccountsLinked = false;
/*To show popover on button in accounting page*/
showAccountsLinkedPage = false;
/*To show popover on accounts linked table*/
showAccountsLinkedList = false;
/*To show popover on migrate openening balances*/
showMigrateOpeningBalances = false;
/*To show popover on closing entries on accounting page*/
showClosingEntries = false;
/*To show popover on button in closing entries page*/
showClosingEntriesPage = false;
/*To show popover on closing entries table*/
showClosingEntriesList = false;
/*To show popover on create journal entry*/
showCreateJournalEntries = false;
/**
* Products Setup
*/
/*To show popover on charges on products page*/
showCharges = false;
/*To show popover on button in charges page*/
showChargesPage = false;
/*To show popover on charges table*/
showChargesList = false;
/*To show popover on loan products on products page*/
showLoanProducts = false;
/*To show popover on button in load products page*/
showLoanProductsPage = false;
/*To show popover on loan products table*/
showLoanProductsList = false;
/*To show popover on savings products on products page*/
showSavingsProducts = false;
/*To show popover on button in savings products page*/
showSavingsProductsPage = false;
/*To show popover on savings products table*/
showSavingsProductsList = false;
/*To show popover on shares products on products page*/
showShareProducts = false;
/*To show popover on button in share products page*/
showShareProductsPage = false;
/*To show popover on share products table*/
showShareProductsList = false;
/*To show popover on fixed deposit products on products page*/
showFixedDepositProducts = false;
/*To show popover on button in fixed deposit products page*/
showFixedDepositProductsPage = false;
/*To show popover on fixed deposit products table*/
showFixedDepositProductsList = false;
/*To show popover on recrurring deposit products on products page*/
showRecurringDepositProducts = false;
/*To show popover on button in recurring deposit products page*/
showRecurringDepositProductsPage = false;
/*To show popover on recurring deposit products table*/
showRecurringDepositProductsList = false;
/**
* Manage Funds and manage reports Setup
*/
/*To show popover on manage funds*/
showManageFunds = false;
/*To show popover on manage reports*/
showManageReports = false;
constructor() { }
/**
* Set all variables to false.
*/
closeConfigWizard(): void {
this.showToolbar = false;
this.showToolbarAdmin = false;
this.showSideNav = false;
this.showSideNavChartofAccounts = false;
this.showBreadcrumbs = false;
this.showHome = false;
this.showHomeSearchActivity = false;
this.showCreateOffice = false;
this.showOfficeList = false;
this.showOfficeTable = false;
this.showOfficeForm = false;
this.showAddEditCurrency = false;
this.showCurrencyPage = false;
this.showCurrencyList = false;
this.showCurrencyForm = false;
this.showCreateHoliday = false;
this.showHolidayPage = false;
this.showHolidayFilter = false;
this.showCreateEmployee = false;
this.showEmployeeList = false;
this.showEmployeeTable = false;
this.showEmployeeForm = false;
this.showDefineWorkingDays = false;
this.showDatatables = false;
this.showDatatablesPage = false;
this.showDatatablesList = false;
this.showDatatablesForm = false;
this.showSystemCodes = false;
this.showSystemCodesPage = false;
this.showSystemCodesList = false;
this.showSystemCodesForm = false;
this.showRolesandPermission = false;
this.showRolesandPermissionPage = false;
this.showRolesandPermissionList = false;
this.showUsers = false;
this.showUsersList = false;
this.showUsersForm = false;
this.showMakerCheckerTable = false;
this.showMakerCheckerTablePage = false;
this.showMakerCheckerTableList = false;
this.showConfigurations = false;
this.showConfigurationsPage = false;
this.showConfigurationsList = false;
this.showSchedulerJobs = false;
this.showSchedulerJobsPage = false;
this.showSchedulerJobsList = false;
this.showChartofAccounts = false;
this.showChartofAccountsPage = false;
this.showChartofAccountsList = false;
this.showChartofAccountsForm = false;
this.showAccountsLinked = false;
this.showAccountsLinkedPage = false;
this.showAccountsLinkedList = false;
this.showMigrateOpeningBalances = false;
this.showClosingEntries = false;
this.showClosingEntriesPage = false;
this.showClosingEntriesList = false;
this.showCreateJournalEntries = false;
this.showCharges = false;
this.showChargesPage = false;
this.showChargesList = false;
this.showLoanProducts = false;
this.showLoanProductsPage = false;
this.showLoanProductsList = false;
this.showSavingsProducts = false;
this.showSavingsProductsPage = false;
this.showSavingsProductsList = false;
this.showShareProducts = false;
this.showShareProductsPage = false;
this.showShareProductsList = false;
this.showFixedDepositProducts = false;
this.showFixedDepositProductsPage = false;
this.showFixedDepositProductsList = false;
this.showRecurringDepositProducts = false;
this.showRecurringDepositProductsPage = false;
this.showRecurringDepositProductsList = false;
this.showManageFunds = false;
this.showManageReports = false;
}
}
src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html
+13
View File
@@ -0,0 +1,13 @@
<h2 mat-dialog-title>Configuration Wizard</h2>
<mat-dialog-content>
<h3 class="mw600"> You have created {{stepName}} successfully. Please select from the options below to proceed furthur.</h3>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button color="warn" [mat-dialog-close]="{ step: 1 }">Close Configuration Wizard</button>
<button mat-raised-button color="primary" [mat-dialog-close]="{ step: 2 }">Create more {{stepName}}</button>
<button mat-raised-button color="primary" [mat-dialog-close]="{ step: 3 }">Go to next step</button>
</mat-dialog-actions>
src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.scss
View File
src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContinueSetupDialogComponent } from './continue-setup-dialog.component';
describe('ContinueSetupDialogComponent', () => {
let component: ContinueSetupDialogComponent;
let fixture: ComponentFixture<ContinueSetupDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ContinueSetupDialogComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ContinueSetupDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.ts
+29
View File
@@ -0,0 +1,29 @@
/** Angular Imports */
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
/**
* Continue Setup Dialog Component.
*/
@Component({
selector: 'mifosx-continue-setup-dialog',
templateUrl: './continue-setup-dialog.component.html',
styleUrls: ['./continue-setup-dialog.component.scss']
})
export class ContinueSetupDialogComponent implements OnInit {
/* Current Step Name*/
stepName: number;
/**
* @param {MatDialogRef<ContinueSetupDialogComponent>} dialogRef MatDialogRef<ContinueSetupDialogComponent>.
*/
constructor(public dialogRef: MatDialogRef<ContinueSetupDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.stepName = data.stepName;
}
ngOnInit() {
}
}
src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html
+18
View File
@@ -0,0 +1,18 @@
<h1 mat-dialog-title>Welcome to Mifos</h1>
<mat-dialog-content>
<h3 class="mw600">Following guide tour will help you configure Mifos according to your organization needs.</h3>
<h3>You have successfully completed the setup of {{ previousStepName }}</h3>
<h3>Progress Bar : {{stepPercentage}}%</h3>
<mat-progress-bar mode="determinate" [value]="stepPercentage"></mat-progress-bar>
</mat-dialog-content>
<mat-dialog-actions>
<button mat-raised-button color="warn" [mat-dialog-close]="{ nextStep: false }">Close Config. Wizard</button>
<button mat-raised-button color="primary" [mat-dialog-close]="{ nextStep: true }"> {{ nextStepName }} </button>
</mat-dialog-actions>
src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.scss
View File
src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { NextStepDialogComponent } from './next-step-dialog.component';
describe('NextStepDialogComponent', () => {
let component: NextStepDialogComponent;
let fixture: ComponentFixture<NextStepDialogComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ NextStepDialogComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(NextStepDialogComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.ts
+35
View File
@@ -0,0 +1,35 @@
/** Angular Imports */
import { Component, OnInit, Inject } from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
/**
* Next Step Dialog Component.
*/
@Component({
selector: 'mifosx-next-step-dialog',
templateUrl: './next-step-dialog.component.html',
styleUrls: ['./next-step-dialog.component.scss']
})
export class NextStepDialogComponent implements OnInit {
/* Step Percentage */
stepPercentage: number;
/* Next Step Name */
nextStepName: string;
/* Previous Step Name*/
previousStepName: string;
/**
* @param {MatDialogRef<NextStepDialogComponent>} dialogRef MatDialogRef<NextStepDialogComponent>.
*/
constructor(public dialogRef: MatDialogRef<NextStepDialogComponent>,
@Inject(MAT_DIALOG_DATA) public data: any) {
this.stepPercentage = data.stepPercentage;
this.nextStepName = data.nextStepName;
this.previousStepName = data.previousStepName;
}
ngOnInit() {
}
}
src/app/configuration-wizard/popover/popover-arrow.directive.ts
+59
View File
@@ -0,0 +1,59 @@
/* Angular Imports */
import { Directive, Renderer2, ElementRef, HostBinding, ChangeDetectorRef, OnDestroy } from '@angular/core';
/* rxjs Imports */
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
/* Popover Ref */
import { PopoverRef } from './popover-ref';
/**
* Internal directive that shows the popover arrow.
*/
@Directive({
selector: '[mifosxPopoverArrow]'
})
export class PopoverArrowDirective implements OnDestroy {
@HostBinding('style.width.px')
@HostBinding('style.height.px')
arrowSize: number;
@HostBinding('style.top.px')
offsetTop: number;
@HostBinding('style.right.px')
offsetRight: number;
@HostBinding('style.bottom.px')
offsetBottom: number;
@HostBinding('style.left.px')
offsetLeft: number;
private subscription = new Subscription();
/**
* @param {PopoverRef} popoverRef PopoverRef.
* @param {ChangeDetectorRef} cd ChangeDetectorRef
*/
constructor(private popoverRef: PopoverRef,
private cd: ChangeDetectorRef) {
this.arrowSize = popoverRef.config.arrowSize;
this.subscription = popoverRef.positionChanges().subscribe(p => {
const { offsetX, offsetY } = p.connectionPair;
this.offsetTop = offsetY >= 0 ? offsetY * -1 : null;
this.offsetLeft = offsetX < 0 ? offsetX * -1 : null;
this.offsetBottom = offsetY < 0 ? offsetY : null;
this.offsetRight = offsetX >= 0 ? offsetX : null;
this.cd.detectChanges();
});
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
}
src/app/configuration-wizard/popover/popover-close.directive.ts
+32
View File
@@ -0,0 +1,32 @@
/** Angular Imports */
import { Directive, HostListener, Input, Optional } from '@angular/core';
/** Popover Ref */
import { PopoverRef } from './popover-ref';
/**
* Button that will close the current popover.
*/
@Directive({
selector: '[mifosxPopoverClose]'
})
export class PopoverCloseDirective<T = any> {
@Input('mifosxPopoverClose') popoverResult: T;
/**
* @param {PopoverRef<T>} popoverRef PopoverRef<T>.
*/
constructor(
@Optional() private popoverRef: PopoverRef<T>
) {}
@HostListener('click') onClick(): void {
if (!this.popoverRef) {
console.error('PopoverClose is not supported within a template');
return;
}
this.popoverRef.close(this.popoverResult);
}
}
src/app/configuration-wizard/popover/popover-config.ts
+11
View File
@@ -0,0 +1,11 @@
/**
* Configuration for opening a popover with the Popover service.
*/
export interface PopoverConfig<T = any> {
backdropClass: string;
data?: T;
disableClose: boolean;
panelClass: string | string[];
arrowOffset?: number;
arrowSize?: number;
}
src/app/configuration-wizard/popover/popover-ref.ts
+61
View File
@@ -0,0 +1,61 @@
/** Angular Imports */
import { OverlayRef, FlexibleConnectedPositionStrategy, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
import { Observable, Subject } from 'rxjs';
/** rxjs Imports */
import { filter } from 'rxjs/operators';
/** Custom config. */
import { PopoverConfig } from './popover-config';
/**
* Reference to a popover opened via the Popover service.
*/
export class PopoverRef<T = any> {
private afterClosedSubject = new Subject<T>();
/**
* @param {OverlayRef} overlayRef OverlayRef.
* @param {FlexibleConnectedPositionStrategy} positionStrategy FlexibleConnectedPositionStrategy.
* @param {PopoverConfig} config PopoverConfig.
*/
constructor(private overlayRef: OverlayRef,
private positionStrategy: FlexibleConnectedPositionStrategy,
public config: PopoverConfig) {
if (!config.disableClose) {
this.overlayRef.backdropClick().subscribe(() => {
// this.close();
});
this.overlayRef.keydownEvents().pipe(
filter(event => event.key === 'Escape')
).subscribe(() => {
// this.close();
});
}
}
/**
* Close popover
*/
close(dialogResult?: T): void {
this.afterClosedSubject.next(dialogResult);
this.afterClosedSubject.complete();
this.overlayRef.dispose();
}
/**
* @returns {Observable<T>}
*/
afterClosed(): Observable<T> {
return this.afterClosedSubject.asObservable();
}
/**
* @returns {Observable<ConnectedOverlayPositionChange>}
*/
positionChanges(): Observable<ConnectedOverlayPositionChange> {
return this.positionStrategy.positionChanges;
}
}
src/app/configuration-wizard/popover/popover.component.html
+3
View File
@@ -0,0 +1,3 @@
<ng-container cdkPortalOutlet></ng-container>
<div class="arrow" mifosxPopoverArrow></div>
src/app/configuration-wizard/popover/popover.component.scss
+50
View File
@@ -0,0 +1,50 @@
:host {
position: relative;
background: white;
border-radius: 8px;
padding: 20px;
}
.arrow {
position: absolute;
background: inherit;
z-index: -1;
}
:host-context(.center) .arrow {
left: 50%;
}
:host-context(.top.left, .top.center) .arrow {
transform-origin: top left;
transform: rotate(45deg);
}
:host-context(.top.right) .arrow {
transform-origin: top right;
transform: rotate(-45deg);
}
:host-context(.bottom.left, .bottom.center) .arrow {
transform-origin: bottom left;
transform: rotate(-45deg);
}
:host-context(.bottom.right) .arrow {
transform-origin: bottom right;
transform: rotate(45deg);
}
:host-context(.center.left) .arrow {
left: 0%;
top: 50%;
transform-origin: center left;
transform: rotate(-45deg);
}
:host-context(.center.right) .arrow {
left: 98%;
top: 50%;
transform-origin: center left;
transform: rotate(-45deg);
}
src/app/configuration-wizard/popover/popover.component.spec.ts
+25
View File
@@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PopoverComponent } from './popover.component';
describe('PopoverComponent', () => {
let component: PopoverComponent;
let fixture: ComponentFixture<PopoverComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ PopoverComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PopoverComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
src/app/configuration-wizard/popover/popover.component.ts
+33
View File
@@ -0,0 +1,33 @@
/** Angular Imports */
import { BasePortalOutlet, CdkPortalOutlet, ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
import { Component, ComponentRef, EmbeddedViewRef, ViewChild, ChangeDetectorRef } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { PortalModule } from '@angular/cdk/portal';
/** rxjs Imports */
import { Subscription } from 'rxjs';
import { map } from 'rxjs/operators';
/* Popover Ref */
import { PopoverRef } from './popover-ref';
/**
* Internal component that wraps user-provided popover content.
*/
@Component({
selector: 'mifosx-popover',
templateUrl: './popover.component.html',
styleUrls: ['./popover.component.scss']
})
export class PopoverComponent extends BasePortalOutlet {
@ViewChild(CdkPortalOutlet, { static: true }) portalOutlet: CdkPortalOutlet;
attachComponentPortal<T>(componentPortal: ComponentPortal<any>): ComponentRef<T> {
console.log(this.portalOutlet.attachComponentPortal(componentPortal));
return this.portalOutlet.attachComponentPortal(componentPortal);
}
attachTemplatePortal<C>(portal: TemplatePortal<C>): EmbeddedViewRef<C> {
return this.portalOutlet.attachTemplatePortal(portal);
}
}
src/app/configuration-wizard/popover/popover.service.ts
+226
View File
@@ -0,0 +1,226 @@
/* Angular Imports */
import { ComponentType, Overlay, OriginConnectionPosition, OverlayConnectionPosition, ConnectionPositionPair } from '@angular/cdk/overlay';
import { ComponentPortal, TemplatePortal } from '@angular/cdk/portal';
import { Injectable, InjectionToken, Injector, TemplateRef, ElementRef } from '@angular/core';
/* Custom Imports */
import { PopoverConfig } from './popover-config';
import { PopoverRef } from './popover-ref';
import { PopoverComponent } from './popover.component';
/**
* Injection token that can be used to access the data that was passed in to a popover.
*
*/
export const POPOVER_DATA = new InjectionToken('popover.data');
const defaultConfig: PopoverConfig = {
backdropClass: '',
disableClose: false,
panelClass: '',
arrowOffset: 30,
arrowSize: 20
};
/**
* Service to open modal and manage popovers.
*/
@Injectable({
providedIn: 'root'
})
export class PopoverService {
/**
* @param {Injector} injector Injector.
* @param {overlay} overlay Overlay.
*/
constructor(private overlay: Overlay, private injector: Injector) { }
/**
* Opens the popover at target element
* @param {ComponentType<any> | TemplateRef<any>} componentOrTemplate ComponentType<any> | TemplateRef<any>.
* @param {ElementRef | HTMLElement} target ElementRef | HTMLElement.
* @param {string} position String.
* @param {Partial<PopoverConfig> = {}} config Partial<PopoverConfig> = {}.
*/
open<D = any>(componentOrTemplate: ComponentType<any> | TemplateRef<any>,
target: ElementRef | HTMLElement, position: string,
backdrop: boolean,
config: Partial<PopoverConfig> = {}): PopoverRef<D> {
const popoverConfig: PopoverConfig = Object.assign({}, defaultConfig, config);
const arrowSize = popoverConfig.arrowSize;
const arrowOffset = popoverConfig.arrowOffset;
const panelOffset = arrowSize / 2;
let showbackdrop: boolean;
let positions: ConnectionPositionPair[];
// preferred positions, in order of priority
if (position === 'bottom') {
positions = [
// bottom center
{
overlayX: 'center',
overlayY: 'top',
originX: 'center',
originY: 'bottom',
panelClass: ['top', 'center'],
offsetY: panelOffset
},
// bottom left
{
overlayX: 'start',
overlayY: 'top',
originX: 'center',
originY: 'bottom',
panelClass: ['top', 'left'],
offsetX: -1 * arrowOffset,
offsetY: panelOffset
},
// bottom right
{
overlayX: 'end',
overlayY: 'top',
originX: 'center',
originY: 'bottom',
panelClass: ['top', 'right'],
offsetX: arrowOffset,
offsetY: panelOffset
}
];
} else if (position === 'top') {
positions = [
// top center
{
overlayX: 'center',
overlayY: 'bottom',
originX: 'center',
originY: 'top',
panelClass: ['bottom', 'center'],
offsetY: -1 * panelOffset
},
// top left
{
overlayX: 'start',
overlayY: 'bottom',
originX: 'center',
originY: 'top',
panelClass: ['bottom', 'left'],
offsetX: -1 * arrowOffset,
offsetY: -1 * panelOffset
},
// top right
{
overlayX: 'end',
overlayY: 'bottom',
originX: 'center',
originY: 'top',
panelClass: ['bottom', 'right'],
offsetX: arrowOffset,
offsetY: -1 * panelOffset
}
];
} else if (position === 'right') {
positions = [
// right
{
originX : 'end',
originY : 'center',
overlayX: 'start',
overlayY: 'center',
panelClass: ['center', 'left'],
offsetX: 0.5 * arrowOffset,
offsetY: -1 * panelOffset
},
];
} else if (position === 'left') {
positions = [
// left
{
originX : 'start',
originY : 'center',
overlayX: 'end',
overlayY: 'center',
panelClass: ['center', 'right'],
offsetX: -0.5 * arrowOffset,
offsetY: -1 * panelOffset
},
];
}
if (backdrop === true) {
showbackdrop = true;
} else {
showbackdrop = false;
}
const positionStrategy = this.overlay
.position()
.flexibleConnectedTo(target)
.withPush(false)
.withFlexibleDimensions(false)
.withPositions(positions);
const overlayRef = this.overlay.create({
hasBackdrop: showbackdrop,
backdropClass: config.backdropClass,
panelClass: config.panelClass,
positionStrategy,
scrollStrategy: this.overlay.scrollStrategies.reposition()
});
const popoverRef = new PopoverRef(overlayRef, positionStrategy, popoverConfig);
const popover = overlayRef.attach(new ComponentPortal(
PopoverComponent,
null,
Injector.create({
parent: this.injector,
providers: [
{ provide: PopoverRef, useValue: popoverRef }
]
})
// new PortalInjector(
// this.injector,
// new WeakMap<any, any>([
// [PopoverRef, popoverRef]
// ])
// )
)).instance;
if (componentOrTemplate instanceof TemplateRef) {
// rendering a provided template dynamically
popover.attachTemplatePortal(
new TemplatePortal(
componentOrTemplate,
null,
{
$implicit: config.data,
popover: popoverRef
}
)
);
} else {
// rendering a provided component dynamically
popover.attachComponentPortal(
new ComponentPortal(
componentOrTemplate,
null,
Injector.create({
parent: this.injector,
providers: [
{ provide: POPOVER_DATA, useValue: config.data },
{ provide: PopoverRef, useValue: popoverRef },
]
})
// new PortalInjector(
// this.injector,
// new WeakMap<any, any>([
// [POPOVER_DATA, config.data],
// [PopoverRef, popoverRef]
// ])
// )
)
);
}
return popoverRef;
}
}
src/app/core/shell/breadcrumb/breadcrumb.component.html
+11 -1
View File
@@ -1,6 +1,6 @@
<nav class="breadcrumb-wrapper">
<ul class="breadcrumb">
<span class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label }}</span>
<span #breadcrumb class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label }}</span>
<span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
<li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
<span *ngIf="!last" class="breadcrumb-link">
@@ -12,3 +12,13 @@
</span>
</ul>
</nav>
<ng-template #templateBreadcrumb let-popover="popover">
<h2>Breadcrumbs</h2>
<p class="mw300">This will show the user's current location in the app.</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();nextStep()">Next</button>
</div>
</ng-template>
src/app/core/shell/breadcrumb/breadcrumb.component.ts
+59 -3
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit , TemplateRef, ElementRef , ViewChild, AfterViewInit} from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd, Data } from '@angular/router';
/** rxjs Imports */
@@ -8,6 +8,10 @@ import { filter } from 'rxjs/operators';
/** Custom Model */
import { Breadcrumb } from './breadcrumb.model';
/** Custom Services */
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/**
* Route data property to generate breadcrumb using a static string.
*
@@ -45,18 +49,26 @@ const routeAddBreadcrumbLink = 'addBreadcrumbLink';
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent implements OnInit {
export class BreadcrumbComponent implements OnInit, AfterViewInit {
/** Array of breadcrumbs. */
breadcrumbs: Breadcrumb[];
/* Reference of breadcrumb */
@ViewChild('breadcrumb') breadcrumb: ElementRef<any>;
/* Template for popover on breadcrumb */
@ViewChild('templateBreadcrumb') templateBreadcrumb: TemplateRef<any>;
/**
* Generates the breadcrumbs.
* @param {ActivatedRoute} activatedRoute Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private activatedRoute: ActivatedRoute,
private router: Router) {
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.generateBreadcrumbs();
}
@@ -160,4 +172,48 @@ export class BreadcrumbComponent implements OnInit {
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showBreadcrumbs === true) {
setTimeout(() => {
this.showPopover(this.templateBreadcrumb, this.breadcrumb.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Home) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showBreadcrumbs = false;
this.configurationWizardService.showHome = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
/**
* Previous Step (SideNavBar) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showBreadcrumbs = false;
this.configurationWizardService.showSideNavChartofAccounts = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
}
src/app/core/shell/sidenav/sidenav.component.html
+90 -8
View File
@@ -8,7 +8,7 @@
<!-- TODO: Allow customization by organization -->
<div class="app-brand" [routerLink]="['/home']">
<img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo">
<span class="app-logo-text text-muted">Mifos</span>
<span #logo class="app-logo-text text-muted">Mifos</span>
</div>
<div class="app-user">
@@ -19,7 +19,7 @@
<span class="app-user-name mb-05">
{{ username }}
</span>
<div class="app-user-controls">
<div #userPanel class="app-user-controls">
<button class="xs-button" mat-icon-button matTooltip="Settings" [routerLink]="['/settings']">
<fa-icon icon="cog"></fa-icon>
</button>
@@ -31,10 +31,12 @@
<div class="app-sidenav">
<div #frequentlyAccessed>
<div class="mt-1 mb-1 nav-item-sep">
<mat-divider></mat-divider>
<span class="text-muted icon-menu-title">Frequently Accessed</span>
</div>
</div>
<div class="icon-menu">
<div class="icon-menu-item" *ngFor="let activity of mappedActivities">
<button mat-raised-button [matTooltip]="activity.toolTip" [routerLink]="[activity.path]">
@@ -53,13 +55,13 @@
<mat-icon matListIcon >
<fa-icon icon="tachometer-alt" size="sm"></fa-icon>
</mat-icon>
<a matLine>Dashboard</a>
<a matLine #dashboard>Dashboard</a>
</mat-list-item>
<mat-list-item [routerLink]="['/navigation']" matTooltip="Navigation">
<mat-icon matListIcon>
<fa-icon icon="location-arrow" size="sm"></fa-icon>
</mat-icon>
<a matLine>Navigation</a>
<a matLine #navigation>Navigation</a>
</mat-list-item>
<mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']" matTooltip="Checker Inbox and Tasks">
<mat-icon matListIcon>
@@ -83,19 +85,19 @@
<mat-icon matListIcon>
<fa-icon icon="sync" size="sm"></fa-icon>
</mat-icon>
<a matLine>Frequent Postings</a>
<a matLine #frequentPostings>Frequent Postings</a>
</mat-list-item>
<mat-list-item [routerLink]="['/accounting/journal-entries/create']" matTooltip="Create Journal Entry">
<mat-icon matListIcon>
<fa-icon icon="plus" size="sm"></fa-icon>
</mat-icon>
<a matLine>Create Journal Entry</a>
<a matLine #createJournalEntry>Create Journal Entry</a>
</mat-list-item>
<mat-list-item [routerLink]="['/accounting/chart-of-accounts']" matTooltip="Chart Of Accounts">
<mat-icon matListIcon>
<fa-icon icon="sitemap" size="sm"></fa-icon>
</mat-icon>
<a matLine>Chart of Accounts</a>
<a matLine #chartOfAccounts>Chart of Accounts</a>
</mat-list-item>
<mat-list-item (click)="showKeyboardShortcuts()" matTooltip="Keyboard Shortcuts">
<mat-icon matListIcon>
@@ -115,4 +117,84 @@
</div>
</div>
</div>
<ng-template #templateLogo let-popover="popover">
<p class="mw300">This logo will return the user to the welcome page from anywhere in the system..</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(templateUserPanel,userPanel,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateUserPanel let-popover="popover">
<h2>User Panel</h2>
<p class="mw300">This section contains user name, user photograph, user settings and sign out button.</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();showPopover(templateLogo,logo,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFrequentlyAccessed let-popover="popover">
<h2>Frequently Accessed</h2>
<p class="mw300">This contains shortcut to the frequently accessed components.</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();showPopover(templateUserPanel,userPanel,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateDashboard let-popover="popover">
<h2>Dashboard</h2>
<p class="mw300">This will navigate the user to dashboard component.</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();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateNavigation let-popover="popover">
<h2>Navigation</h2>
<p class="mw300">This will navigate the user to entity navigation screen.</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();showPopover(templateDashboard,dashboard,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFrequentPostings let-popover="popover">
<h2>Frequent Postings</h2>
<p class="mw300">Shortcut to Journal entry screen with accouting rules in place</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();showPopover(templateNavigation,navigation,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateCreateJournalEntry let-popover="popover">
<h2>Create Journal Entry</h2>
<p class="mw300">Shortcut to the create journal entry screen.</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();showPopover(templateFrequentPostings,frequentPostings,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateChartOfAccounts,chartOfAccounts,'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateChartOfAccounts let-popover="popover">
<h2>Chart of Accounts</h2>
<p class="mw300">Shortcut to chart of accounts screen to add/modify the ledger accounts.</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();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/core/shell/sidenav/sidenav.component.ts
+70 -3
View File
@@ -1,5 +1,6 @@
/** Angular Imports */
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, TemplateRef, ElementRef , ViewChild,
AfterViewInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
@@ -8,6 +9,8 @@ import { KeyboardShortcutsDialogComponent } from 'app/shared/keyboard-shortcuts-
/** Custom Services */
import { AuthenticationService } from '../../authentication/authentication.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Imports */
import { frequentActivities } from './frequent-activities';
@@ -20,7 +23,7 @@ import { frequentActivities } from './frequent-activities';
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {
export class SidenavComponent implements OnInit, AfterViewInit {
/** True if sidenav is in collapsed state. */
@Input() sidenavCollapsed: boolean;
@@ -34,14 +37,28 @@ export class SidenavComponent implements OnInit {
/** Collection of possible frequent activities */
frequentActivities: any[] = frequentActivities;
/* Refernce of logo */
@ViewChild('logo') logo: ElementRef<any>;
/* Template for popover on logo */
@ViewChild('templateLogo') templateLogo: TemplateRef<any>;
/* Refernce of chart of accounts */
@ViewChild('chartOfAccounts') chartOfAccounts: ElementRef<any>;
/* Template for popover on chart of accounts */
@ViewChild('templateChartOfAccounts') templateChartOfAccounts: TemplateRef<any>;
/**
* @param {Router} router Router for navigation.
* @param {MatDialog} dialog Mat Dialog
* @param {AuthenticationService} authenticationService Authentication Service.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private router: Router,
public dialog: MatDialog,
private authenticationService: AuthenticationService) {
private authenticationService: AuthenticationService,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.userActivity = JSON.parse(localStorage.getItem('mifosXLocation'));
}
@@ -140,4 +157,54 @@ export class SidenavComponent implements OnInit {
}
}
/**
* 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);
}
/**
* To show popovers
*/
ngAfterViewInit() {
if (this.configurationWizardService.showSideNav === true) {
setTimeout(() => {
this.showPopover(this.templateLogo, this.logo.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showSideNavChartofAccounts === true) {
setTimeout(() => {
this.showPopover(this.templateChartOfAccounts, this.chartOfAccounts.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Breadcrumbs) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showSideNav = false;
this.configurationWizardService.showSideNavChartofAccounts = false;
this.configurationWizardService.showBreadcrumbs = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
/**
* Previous Step (Toolbar) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showSideNav = false;
this.configurationWizardService.showSideNavChartofAccounts = false;
this.configurationWizardService.showToolbarAdmin = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
}
src/app/core/shell/toolbar/toolbar.component.html
+138 -14
View File
@@ -11,48 +11,62 @@
<nav mat-tab-nav-bar backgroundColor="primary" class="ml-1">
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger">
<a #institution mat-tab-link class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger">
<fa-icon class="mr-05" icon="university" size="lg"></fa-icon>
{{ 'Institution' | translate }}
</a>
<span fxHide.lt-lg="true">
<a mat-tab-link class="tab-link" [routerLink]="['/accounting']">
<a #accounting mat-tab-link class="tab-link" [routerLink]="['/accounting']">
<fa-icon class="mr-05" icon="money-bill-alt" size="lg"></fa-icon>
{{ 'Accounting' | translate }}
</a>
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
<a #reports mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
<fa-icon class="mr-05" icon="chart-bar" size="lg"></fa-icon>
{{ 'Reports' | translate }}
</a>
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
<a #admin mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
<fa-icon class="mr-05" icon="shield-alt" size="lg"></fa-icon>
{{ 'Admin' | translate }}
</a>
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
<a #selfService mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
<fa-icon class="mr-05" icon="users" size="lg"></fa-icon>
{{ 'Self Service' | translate }}
</a>
<a #configWizard mat-tab-link class="tab-link" (click)="openDialog()">
<fa-icon class="mr-05" icon="info" size="lg"></fa-icon>
Configuration Wizard
</a>
</span>
</nav>
<span fxFlex="auto"></span>
<mifosx-search-tool></mifosx-search-tool>
<div #globalSearch>
<mifosx-search-tool></mifosx-search-tool>
</div>
<mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
<div #languageSelector>
<mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
</div>
<mifosx-theme-picker fxHide.lt-md></mifosx-theme-picker>
<mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
<button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
<img src="assets/images/user_placeholder.png">
</button>
<div #themePicker>
<mifosx-theme-picker fxHide.lt-md></mifosx-theme-picker>
</div>
<div #notifications>
<mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
</div>
<div #appMenu>
<button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
<img src="assets/images/user_placeholder.png">
</button>
</div>
</mat-toolbar>
<mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
@@ -119,3 +133,113 @@
<span>Sign Out</span>
</button>
</mat-menu>
<ng-template #templateInstitution let-popover="popover">
<h2>Institution</h2>
<p class="mw300">This button will be used for individual accounts, 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();showPopover(templateAccounting, accounting)">Next</button>
</div>
</ng-template>
<ng-template #templateAccounting let-popover="popover">
<h2>Accounting</h2>
<p class="mw300">This button opens the menu to access the system tools required by the accounting department.</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();showPopover(templateInstitution, institution)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">Next</button>
</div>
</ng-template>
<ng-template #templateReports let-popover="popover">
<h2>Reports</h2>
<p class="mw300">Dropdown provides access to all types of system reports including the defualt reports provided by the Mifos and system reports that will be developed by the organization.</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();showPopover(templateAccounting, accounting)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">Next</button>
</div>
</ng-template>
<ng-template #templateAdmin let-popover="popover">
<h2>Admin</h2>
<p class="mw300">This is where the system is setup according to your organization including users, organization, products and templates.</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();showPopover(templateReports, reports)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">Next</button>
</div>
</ng-template>
<ng-template #templateSelfService let-popover="popover">
<h2>Self Service</h2>
<p class="mw300">Dropdown provides access to self service user administrative portal, app configuration and task management.</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();showPopover(templateAdmin, admin)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">Next</button>
</div>
</ng-template>
<ng-template #templateConfigWizard let-popover="popover">
<h2>Configuration Wizard</h2>
<p class="mw300">This buttons opens up the configuration wizard to help the user in initial setup and application tour.</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();showPopover(templateSelfService, selfService)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">Next</button>
</div>
</ng-template>
<ng-template #templateGlobalSearch let-popover="popover">
<h2>Global Search</h2>
<p class="mw300">This will allow the user to quickly navigate the system selecting entity while searching makes the navigation more robust.</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();showPopover(templateConfigWizard, configWizard)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">Next</button>
</div>
</ng-template>
<ng-template #templateLanguageSelector let-popover="popover">
<h2>Language Selector</h2>
<p class="mw300">Organization can select a language here from the available languages here.</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();showPopover(templateGlobalSearch, globalSearch)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">Next</button>
</div>
</ng-template>
<ng-template #templateThemePicker let-popover="popover">
<h2>Theme Picker</h2>
<p class="mw300">This will be used to choose a theme as per organization will.</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();showPopover( templateLanguageSelector, languageSelector)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">Next</button>
</div>
</ng-template>
<ng-template #templateNotifications let-popover="popover">
<h2>Notifications</h2>
<p class="mw300">This shows all the notifications.</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();showPopover(templateThemePicker, themePicker)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAppMenu, appMenu)">Next</button>
</div>
</ng-template>
<ng-template #templateAppMenu let-popover="popover">
<h2>Application Menu</h2>
<p class="mw300">This will have logged in user settings and sign out button.</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();showPopover(templateNotifications, notifications)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">Next</button>
</div>
</ng-template>
src/app/core/shell/toolbar/toolbar.component.ts
+102 -2
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { Component, OnInit, Input, EventEmitter, Output, ViewChild, AfterViewInit, ElementRef, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSidenav } from '@angular/material/sidenav';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@@ -11,6 +11,11 @@ import { map } from 'rxjs/operators';
/** Custom Services */
import { AuthenticationService } from '../../authentication/authentication.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Components */
import { ConfigurationWizardComponent } from '../../../configuration-wizard/configuration-wizard.component';
/**
* Toolbar component.
@@ -20,7 +25,17 @@ import { AuthenticationService } from '../../authentication/authentication.servi
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {
export class ToolbarComponent implements OnInit, AfterViewInit {
/* Reference of institution */
@ViewChild('institution') institution: ElementRef<any>;
/* Template for popover on institution */
@ViewChild('templateInstitution') templateInstitution: TemplateRef<any>;
/* Reference of appMenu */
@ViewChild('appMenu') appMenu: ElementRef<any>;
/* Template for popover on appMenu */
@ViewChild('templateAppMenu') templateAppMenu: TemplateRef<any>;
/** Subscription to breakpoint observer for handset. */
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
@@ -40,10 +55,15 @@ export class ToolbarComponent implements OnInit {
* @param {BreakpointObserver} breakpointObserver Breakpoint observer to detect screen size.
* @param {Router} router Router for navigation.
* @param {AuthenticationService} authenticationService Authentication service.
* @param {MatDialog} dialog MatDialog.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private breakpointObserver: BreakpointObserver,
private router: Router,
private authenticationService: AuthenticationService,
private popoverService: PopoverService,
private configurationWizardService: ConfigurationWizardService,
private dialog: MatDialog) { }
/**
@@ -86,5 +106,85 @@ export class ToolbarComponent implements OnInit {
help() {
window.open('https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual', '_blank');
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: ElementRef<any> | HTMLElement): void {
setTimeout(() => this.popoverService.open(template, target, 'bottom', true, {}), 200);
}
/**
* Next Step (SideNavbar) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showToolbar = false;
this.configurationWizardService.showToolbarAdmin = false;
this.configurationWizardService.showSideNav = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
/**
* Open Configuration Wizard Dialog
*/
openDialog() {
const configWizardRef = this.dialog.open(ConfigurationWizardComponent, {});
configWizardRef.afterClosed().subscribe((response: { show: number }) => {
if (response.show === 1) {
this.configurationWizardService.showToolbar = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
if (response.show === 2) {
this.configurationWizardService.showCreateOffice = true;
this.router.navigate(['/organization']);
}
if (response.show === 3) {
this.configurationWizardService.showDatatables = true;
this.router.navigate(['/system']);
}
if (response.show === 4) {
this.configurationWizardService.showChartofAccounts = true;
this.router.navigate(['/accounting']);
}
if (response.show === 5) {
this.configurationWizardService.showCharges = true;
this.router.navigate(['/products']);
}
if (response.show === 6) {
this.configurationWizardService.showManageFunds = true;
this.router.navigate(['/organization']);
}
if (response.show === 0) {
}
});
}
/**
* To show popovers
*/
ngAfterViewInit() {
if (this.configurationWizardService.showToolbar === true) {
setTimeout(() => {
this.showPopover(this.templateInstitution, this.institution.nativeElement);
});
}
if (this.configurationWizardService.showSideNav === true || this.configurationWizardService.showSideNavChartofAccounts === true) {
this.toggleSidenavCollapse();
}
if (this.configurationWizardService.showToolbarAdmin === true) {
setTimeout(() => {
this.showPopover(this.templateAppMenu, this.appMenu.nativeElement);
});
}
}
}
src/app/home/home.component.html
+27 -5
View File
@@ -1,9 +1,11 @@
<div fxLayput="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
<button mat-raised-button color="primary" [routerLink]="['/dashboard']">
<fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
Dashboard
</button>
<div #buttonDashboard class="in-block">
<button mat-raised-button color="primary" [routerLink]="['/dashboard']">
<fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
Dashboard
</button>
</div>
</div>
@@ -17,7 +19,7 @@
</mat-card-title>
</mat-card-header>
<mat-card-content>
<mat-card-content #searchActivity>
<div fxLayout="column">
<mat-form-field>
@@ -39,3 +41,23 @@
</mat-card>
</div>
<ng-template #templateButtonDashboard let-popover="popover">
<h2>Dashboard</h2>
<p class="mw300">This will navigate the user to the dashboard component.</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(templateSearchActivity, searchActivity,'bottom',true)">Next</button>
</div>
</ng-template>
<ng-template #templateSearchActivity let-popover="popover">
<h2>Search Activity</h2>
<p class="mw300">This will navigate the user to the searched activity.</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();showPopover(templateButtonDashboard, buttonDashboard,'bottom',true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/home/home.component.ts
+104 -4
View File
@@ -1,6 +1,10 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit} from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
import { FormControl } from '@angular/forms';
import { MatDialog } from '@angular/material/dialog';
/** rxjs Imports */
import { Observable } from 'rxjs';
import { startWith, map } from 'rxjs/operators';
@@ -9,6 +13,11 @@ import { activities } from './activities';
/** Custom Services */
import { AuthenticationService } from '../core/authentication/authentication.service';
import { PopoverService } from '../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
/** Custom Components */
import { NextStepDialogComponent } from '../configuration-wizard/next-step-dialog/next-step-dialog.component';
/**
* Home component.
@@ -18,7 +27,7 @@ import { AuthenticationService } from '../core/authentication/authentication.ser
templateUrl: './home.component.html',
styleUrls: ['./home.component.scss']
})
export class HomeComponent implements OnInit {
export class HomeComponent implements OnInit, AfterViewInit {
/** Username of authenticated user. */
username: string;
@@ -31,11 +40,29 @@ export class HomeComponent implements OnInit {
/** All User Activities. */
allActivities: any[] = activities;
/* Reference of dashboard button */
@ViewChild('buttonDashboard', {static: false}) buttonDashboard: ElementRef<any>;
/* Template for popover on dashboard button */
@ViewChild('templateButtonDashboard', {static: false}) templateButtonDashboard: TemplateRef<any>;
/* Reference of search activity */
@ViewChild('searchActivity', {static: false}) searchActivity: ElementRef<any>;
/* Template for popover on search activity */
@ViewChild('templateSearchActivity', {static: false}) templateSearchActivity: TemplateRef<any>;
/**
* @param {AuthenticationService} authenticationService Authentication Service.
* @param {FormBuilder} formBuilder Form Builder.
* @param {ActivatedRoute} activatedRoute ActivatedRoute.
* @param {Router} router Router.
* @param {MatDialog} dialog MatDialog.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private authenticationService: AuthenticationService) { }
constructor(private authenticationService: AuthenticationService,
private activatedRoute: ActivatedRoute,
private router: Router,
private dialog: MatDialog,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) { }
/**
* Sets the username of the authenticated user.
@@ -67,4 +94,77 @@ export class HomeComponent implements OnInit {
return this.allActivities.filter(activity => activity.activity.toLowerCase().indexOf(filterValue) === 0);
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showHome === true) {
setTimeout(() => {
this.showPopover(this.templateButtonDashboard, this.buttonDashboard.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showHomeSearchActivity === true) {
setTimeout(() => {
this.showPopover(this.templateSearchActivity, this.searchActivity.nativeElement, 'bottom', true);
});
}
}
/**
* Open Dialog for next step.
* Next Step (Organization) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showHome = false;
this.configurationWizardService.showHomeSearchActivity = false;
this.openNextStepDialog();
}
/**
* Next Step (Organization) Dialog Configuration Wizard.
*/
openNextStepDialog() {
const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
data: {
nextStepName: 'Setup Organization',
previousStepName: 'Home Tour',
stepPercentage: 10
},
});
nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
if (response.nextStep) {
this.configurationWizardService.showHome = false;
this.configurationWizardService.showHomeSearchActivity = false;
this.configurationWizardService.showCreateOffice = true;
this.router.navigate(['/organization']);
} else {
this.configurationWizardService.showHome = false;
this.configurationWizardService.showHomeSearchActivity = false;
this.router.navigate(['/home']);
}
});
}
/**
* Previous Step (Breadcrumbs) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showHome = false;
this.configurationWizardService.showHomeSearchActivity = false;
this.configurationWizardService.showBreadcrumbs = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
}
src/app/organization/currencies/currencies.component.html
+33 -3
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonAddEdit class="in-block">
<button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Add/Edit
</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>
<mat-label >Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<div #tableCurrencies class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -38,3 +40,31 @@
</div>
</div>
<ng-template #templateButtonAddEdit let-popover="popover">
<h2>Add/Edit Currency</h2>
<p class="mw300">This will display a list of all currencies currently in use.</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 currencies.</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(templateButtonAddEdit,buttonAddEdit, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCurrencies, tableCurrencies, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateTableCurrencies let-popover="popover">
<h4>List of currencies available.</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/organization/currencies/currencies.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';
/**
* Currencies component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './currencies.component.html',
styleUrls: ['./currencies.component.scss']
})
export class CurrenciesComponent implements OnInit {
export class CurrenciesComponent implements OnInit, AfterViewInit {
/** Currencies data. */
currenciesData: any;
@@ -30,11 +34,26 @@ export class CurrenciesComponent implements OnInit {
/** Sorter for currencies table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of add/edit button */
@ViewChild('buttonAddEdit') buttonAddEdit: ElementRef<any>;
/* Template for popover on add/edit button */
@ViewChild('templateButtonAddEdit') templateButtonAddEdit: TemplateRef<any>;
/* Reference of currenies table */
@ViewChild('tableCurrencies') tableCurrencies: ElementRef<any>;
/* Template for currencies table */
@ViewChild('templateTableCurrencies') templateTableCurrencies: TemplateRef<any>;
/**
* Retrieves the currencies 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: { currencies: any }) => {
this.currenciesData = data.currencies.selectedCurrencyOptions;
});
@@ -64,4 +83,52 @@ export class CurrenciesComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showCurrencyPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonAddEdit, this.buttonAddEdit.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCurrencyList === true) {
setTimeout(() => {
this.showPopover(this.templateTableCurrencies, this.tableCurrencies.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Add currency page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showCurrencyPage = false;
this.configurationWizardService.showCurrencyList = false;
this.configurationWizardService.showCurrencyForm = true;
this.router.navigate(['/organization/currencies/manage']);
}
/**
* Previous Step (Add/edit Currency) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showCurrencyPage = false;
this.configurationWizardService.showCurrencyList = false;
this.configurationWizardService.showAddEditCurrency = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/currencies/manage-currencies/manage-currencies.component.html
+12 -1
View File
@@ -2,7 +2,7 @@
<mat-card>
<div>
<div #currencyFormRef>
<form #formRef="ngForm" [formGroup]="currencyForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
fxFlex="48%" (ngSubmit)="addCurrency()">
@@ -47,3 +47,14 @@
</mat-card>
</div>
<ng-template #templateCurrencyFormRef let-popover="popover">
<h4>Add Currency Form</h4>
<p class="mw400">This form will be used to add currency. To add currency click on add currency and fill the form and then click add else click back or next. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">Currency Configuration</a></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();">Add Currency</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/currencies/manage-currencies/manage-currencies.component.ts
+64 -4
View File
@@ -1,6 +1,6 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { FormBuilder, Validators } from '@angular/forms';
@@ -9,6 +9,11 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
/** Custom Services */
import { OrganizationService } from '../../organization.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Manage Currencies component.
@@ -18,7 +23,7 @@ import { OrganizationService } from '../../organization.service';
templateUrl: './manage-currencies.component.html',
styleUrls: ['./manage-currencies.component.scss']
})
export class ManageCurrenciesComponent implements OnInit {
export class ManageCurrenciesComponent implements OnInit, AfterViewInit {
/** Selected Currencies data. */
selectedCurrencies: any[];
@@ -29,6 +34,8 @@ export class ManageCurrenciesComponent implements OnInit {
/** Currency form reference */
@ViewChild('formRef', { static: true }) formRef: any;
@ViewChild('currencyFormRef') currencyFormRef: ElementRef<any>;
@ViewChild('templateCurrencyFormRef') templateCurrencyFormRef: TemplateRef<any>;
/**
* Retrieves the currency data from `resolve`.
@@ -40,7 +47,10 @@ export class ManageCurrenciesComponent implements OnInit {
constructor(private route: ActivatedRoute,
private formBuilder: FormBuilder,
private organizationservice: OrganizationService,
public dialog: MatDialog) {
public dialog: MatDialog,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.parent.data.subscribe(( data: { currencies: any }) => {
this.selectedCurrencies = data.currencies.selectedCurrencyOptions;
this.currencyData = data.currencies.currencyOptions;
@@ -72,6 +82,10 @@ export class ManageCurrenciesComponent implements OnInit {
.subscribe((response: any) => {
this.selectedCurrencies.push(newCurrency);
this.formRef.resetForm();
if (this.configurationWizardService.showCurrencyForm === true) {
this.configurationWizardService.showCurrencyForm = false;
this.openDialog();
}
});
}
}
@@ -98,4 +112,50 @@ export class ManageCurrenciesComponent implements OnInit {
});
}
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
ngAfterViewInit() {
if (this.configurationWizardService.showCurrencyForm === true) {
setTimeout(() => {
this.showPopover(this.templateCurrencyFormRef, this.currencyFormRef.nativeElement, 'bottom', true);
});
}
}
nextStep() {
this.configurationWizardService.showCurrencyForm = false;
this.configurationWizardService.showCreateHoliday = true;
this.router.navigate(['/organization']);
}
previousStep() {
this.configurationWizardService.showCurrencyForm = false;
this.configurationWizardService.showCurrencyList = true;
this.router.navigate(['/organization/currencies']);
}
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'currency'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showCurrencyForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showCurrencyForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/currencies/manage']);
} else if (response.step === 3) {
this.configurationWizardService.showCurrencyForm = false;
this.configurationWizardService.showCreateHoliday = true;
this.router.navigate(['/organization']);
}
});
}
}
src/app/organization/employees/create-employee/create-employee.component.html
+14 -3
View File
@@ -6,8 +6,8 @@
<mat-card-content>
<div fxLayout="column">
<div #createEmployeeFormRef fxLayout="column">
<mat-form-field>
<mat-label>Office</mat-label>
<mat-select required formControlName="officeId">
@@ -19,7 +19,7 @@
Office is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>First Name</mat-label>
<input matInput required formControlName="firstname">
@@ -75,3 +75,14 @@
</mat-card>
</div>
<ng-template #templateCreateEmployeeForm let-popover="popover">
<h2>Create Employee</h2>
<p class="mw400">Click to start filling the details. * mark fields are neccessary. <br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">Manage Employees</a></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()">Create Employee</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/employees/create-employee/create-employee.component.ts
+92 -4
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit , TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@@ -7,6 +7,12 @@ import { Router, ActivatedRoute } from '@angular/router';
import { OrganizationService } from '../../organization.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { MatDialog } from '@angular/material/dialog';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Create employee component.
@@ -16,7 +22,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.scss']
})
export class CreateEmployeeComponent implements OnInit {
export class CreateEmployeeComponent implements OnInit, AfterViewInit {
/** Minimum joining date allowed. */
minDate = new Date(2000, 0, 1);
@@ -27,6 +33,11 @@ export class CreateEmployeeComponent implements OnInit {
/** Office data. */
officeData: any;
/* Reference of employee form */
@ViewChild('createEmployeeFormRef') createEmployeeFormRef: ElementRef<any>;
/* Template for popover on employee form */
@ViewChild('templateCreateEmployeeForm') templateCreateEmployeeForm: TemplateRef<any>;
/**
* Retrieves the offices data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -35,13 +46,19 @@ export class CreateEmployeeComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {Dates} dateUtils Date Utils to format date.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
* @param {MatDialog} dialog MatDialog.
*/
constructor(private formBuilder: FormBuilder,
private organizationService: OrganizationService,
private settingsService: SettingsService,
private route: ActivatedRoute,
private router: Router,
private dateUtils: Dates) {
private dateUtils: Dates,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService,
public dialog: MatDialog) {
this.route.data.subscribe((data: { offices: any }) => {
this.officeData = data.offices;
});
@@ -87,7 +104,78 @@ export class CreateEmployeeComponent implements OnInit {
locale
};
this.organizationService.createEmployee(data).subscribe((response: any) => {
this.router.navigate(['../'], { relativeTo: this.route });
if (this.configurationWizardService.showEmployeeForm === true) {
this.configurationWizardService.showEmployeeForm = false;
this.openDialog();
} else {
this.router.navigate(['../'], { relativeTo: this.route });
}
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showEmployeeForm === true) {
setTimeout(() => {
this.showPopover(this.templateCreateEmployeeForm, this.createEmployeeFormRef.nativeElement, 'right', true);
});
}
}
/**
* Next Step (Define Working Days) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showEmployeeForm = false;
this.configurationWizardService.showDefineWorkingDays = true;
this.router.navigate(['/organization']);
}
/**
* Previous Step (Employees Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showEmployeeForm = false;
this.configurationWizardService.showEmployeeTable = true;
this.router.navigate(['/organization/employees']);
}
/**
* Opens dialog if the user wants to create more employees.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'employee'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showEmployeeForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showEmployeeForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/employees/create']);
} else if (response.step === 3) {
this.configurationWizardService.showEmployeeForm = false;
this.configurationWizardService.showDefineWorkingDays = true;
this.router.navigate(['/organization']);
}
});
}
src/app/organization/employees/employees.component.html
+45 -4
View File
@@ -1,27 +1,30 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonImportEmployees>
<button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
<fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
Import Employees
</button>
</div>
<div #buttonCreateEmployee>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Employee
</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 #tableEmployees class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -63,4 +66,42 @@
</div>
</div>
</div>
<ng-template #templateButtonImportEmployees let-data let-popover="popover">
<h2>Import Employees</h2>
<p class="mw300">This button is used to import employee details from your local device.</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(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateButtonCreateEmployee let-popover="popover">
<h2>Create Employee</h2>
<p class="mw300">This option allows you to create new employees in your organization.</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();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">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 employees.</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(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateTableEmployees let-popover="popover">
<h4>List of employees in the organization.</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/organization/employees/employees.component.ts
+70 -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';
/**
* Employees component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.scss']
})
export class EmployeesComponent implements OnInit {
export class EmployeesComponent implements OnInit, AfterViewInit {
/** Employees data. */
employeesData: any;
@@ -30,11 +34,26 @@ export class EmployeesComponent implements OnInit {
/** Sorter for employees table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of import employees button */
@ViewChild('buttonImportEmployees') buttonImportEmployees: ElementRef<any>;
/* Template for popover on import employees button */
@ViewChild('templateButtonImportEmployees') templateButtonImportEmployees: TemplateRef<any>;
/* Reference of employees table */
@ViewChild('tableEmployees') tableEmployees: ElementRef<any>;
/* Template for popover on employees table */
@ViewChild('templateTableEmployees') templateTableEmployees: TemplateRef<any>;
/**
* Retrieves the employees 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: { employees: any }) => {
this.employeesData = data.employees;
});
@@ -64,4 +83,51 @@ export class EmployeesComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showEmployeeList === true) {
setTimeout(() => {
this.showPopover(this.templateButtonImportEmployees, this.buttonImportEmployees.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showEmployeeTable === true) {
setTimeout(() => {
this.showPopover(this.templateTableEmployees, this.tableEmployees.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create Employee Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showEmployeeList = false;
this.configurationWizardService.showEmployeeTable = false;
this.configurationWizardService.showEmployeeForm = true;
this.router.navigate(['/organization/employees/create']);
}
/**
* Previous Step (Manage Employees) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showEmployeeList = false;
this.configurationWizardService.showEmployeeTable = false;
this.configurationWizardService.showCreateEmployee = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/holidays/edit-holiday/edit-holiday.component.html
+1 -1
View File
@@ -40,7 +40,7 @@
<mat-label>Repayment Scheduling Type</mat-label>
<mat-select required formControlName="reschedulingType">
<mat-option *ngFor="let repayments of holidayData.repaymentSchedulingTypes" [value]="repayments.id">
{{ repayments.value }}
{{ repayments.value }}
</mat-option>
</mat-select>
<mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
src/app/organization/holidays/holidays.component.html
+22 -1
View File
@@ -1,15 +1,17 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonCreateHoliday class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Holiday
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filterRef fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
@@ -65,3 +67,22 @@
</div>
</div>
<ng-template #templateButtonCreateHoliday let-popover="popover">
<h2>Create Holiday</h2>
<p class="mw300">This option allows you to create holidays for different offices in your organization.</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(templateFilterRef,filterRef,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFilterRef let-popover="popover">
<h4>Search bar to filter holidays based on different offices.</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(templateButtonCreateHoliday,buttonCreateHoliday,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep();">Next</button>
</div>
</ng-template>
src/app/organization/holidays/holidays.component.ts
+68 -4
View File
@@ -1,9 +1,9 @@
/** 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 { FormControl } from '@angular/forms';
/** rxjs Imports */
@@ -11,6 +11,8 @@ import { of } from 'rxjs';
/** Custom Services */
import { OrganizationService } from '../organization.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Holidays component.
@@ -20,7 +22,7 @@ import { OrganizationService } from '../organization.service';
templateUrl: './holidays.component.html',
styleUrls: ['./holidays.component.scss']
})
export class HolidaysComponent implements OnInit {
export class HolidaysComponent implements OnInit, AfterViewInit {
/** Office selector. */
officeSelector = new FormControl();
@@ -38,14 +40,29 @@ export class HolidaysComponent implements OnInit {
/** Sorter for holidays table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create holiday button */
@ViewChild('buttonCreateHoliday') buttonCreateHoliday: ElementRef<any>;
/* Template for popover on create holiday button */
@ViewChild('templateButtonCreateHoliday') templateButtonCreateHoliday: TemplateRef<any>;
/* Reference of filter */
@ViewChild('filterRef') filterRef: ElementRef<any>;
/* Template to show popover on filter */
@ViewChild('templateFilterRef') templateFilterRef: TemplateRef<any>;
/**
* Retrieves the offices data from `resolve`.
* @param {OrganizationService} organizationService Organization Service.
* @param {ActivatedRoute} route Activated Route.
* @param {FormBuilder} formBuilder Form Builder.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private organizationService: OrganizationService,
private route: ActivatedRoute) {
private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { offices: any }) => {
this.officeData = data.offices;
});
@@ -88,4 +105,51 @@ export class HolidaysComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showHolidayPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateHoliday, this.buttonCreateHoliday.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showHolidayFilter === true) {
setTimeout(() => {
this.showPopover(this.templateFilterRef, this.filterRef.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Create Employee) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showHolidayPage = false;
this.configurationWizardService.showHolidayFilter = false;
this.configurationWizardService.showCreateEmployee = true;
this.router.navigate(['/organization']);
}
/**
* Previous Step (Manage Holidays) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showHolidayPage = false;
this.configurationWizardService.showHolidayFilter = false;
this.configurationWizardService.showCreateHoliday = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/manage-funds/manage-funds.component.html
+18 -4
View File
@@ -2,7 +2,7 @@
<mat-card>
<div>
<div #fundFormRef>
<form #formRef="ngForm" [formGroup]="fundForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
(ngSubmit)="addFund()" *mifosxHasPermission="'CREATE_FUND'">
@@ -14,9 +14,11 @@
</mat-error>
</mat-form-field>
<button mat-raised-button fxFlex color="primary" [disabled]="!fundForm.valid">
<fa-icon icon="plus"></fa-icon>
</button>
<div #buttonAddFund fxFlex>
<button mat-raised-button color="primary" [disabled]="!fundForm.valid">
<fa-icon icon="plus"></fa-icon>
</button>
</div>
</form>
@@ -41,3 +43,15 @@
</mat-card>
</div>
<ng-template #templateFundFormRef let-popover="popover">
<h2>Manage Funds</h2>
<p class="mw300">This form will be used to add fund. If you would like to add fund click on add funds button and fill the fund name then click on + button else click Next or Back. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141736/Manage+Funds" target="_blank">Manage Funds</a></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();">Add Funds</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/manage-funds/manage-funds.component.ts
+87 -4
View File
@@ -1,6 +1,6 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { FormBuilder, Validators } from '@angular/forms';
@@ -13,6 +13,11 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
/** Custom Services */
import { OrganizationService } from '../organization.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Manage Funds component.
@@ -22,7 +27,7 @@ import { OrganizationService } from '../organization.service';
templateUrl: './manage-funds.component.html',
styleUrls: ['./manage-funds.component.scss']
})
export class ManageFundsComponent implements OnInit {
export class ManageFundsComponent implements OnInit, AfterViewInit {
/** Manage Funds data. */
fundsData: any;
@@ -31,17 +36,28 @@ export class ManageFundsComponent implements OnInit {
/** Funds form reference */
@ViewChild('formRef') formRef: any;
/* Refernce of funds form */
@ViewChild('fundFormRef') fundFormRef: ElementRef<any>;
/* Template for popover on funds form */
@ViewChild('templateFundFormRef') templateFundFormRef: TemplateRef<any>;
/**
* Retrieves the manage funds data from `resolve`.
* @param {ActivatedRoute} route Activated Route
* @param {FormBuilder} formBuilder Form Builder
* @param {OrganizationService} organizationservice Organization Service
* @param {MatDialog} dialog Mat Dialog
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute,
private formBuilder: FormBuilder,
private organizationservice: OrganizationService,
public dialog: MatDialog) {
public dialog: MatDialog,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { funds: any }) => {
this.fundsData = data.funds;
});
@@ -71,6 +87,10 @@ export class ManageFundsComponent implements OnInit {
name: newFund.name
});
this.formRef.resetForm();
if (this.configurationWizardService.showManageFunds === true) {
this.configurationWizardService.showManageFunds = false;
this.openDialog();
}
});
}
@@ -105,4 +125,67 @@ export class ManageFundsComponent implements OnInit {
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showManageFunds === true) {
setTimeout(() => {
this.showPopover(this.templateFundFormRef, this.fundFormRef.nativeElement, 'bottom', true);
});
}
}
/**
* Previous Step (Organization Page) Dialog Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/organization']);
}
/**
* Next Step (Manage Reports) Dialog Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showManageFunds = false;
this.configurationWizardService.showManageReports = true;
this.router.navigate(['/system']);
}
/**
* Opens dialog if the user wants to edit more funds.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'fund'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showManageFunds = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showManageFunds = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/manage-funds']);
} else if (response.step === 3) {
this.configurationWizardService.showManageFunds = false;
this.configurationWizardService.showManageReports = true;
this.router.navigate(['/system']);
}
});
}
}
src/app/organization/offices/create-office/create-office.component.html
+13 -2
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="column">
<div #createOfficeFormRef fxLayout="column">
<mat-form-field>
<mat-label>Office</mat-label>
@@ -19,7 +19,7 @@
<mat-form-field>
<mat-label>Parent Office</mat-label>
<mat-select required formControlName="parentId">
<mat-option *ngFor="let office of officeData" [value]="office.id">
<mat-option *ngFor="let office of officeData" [value]="office.id" >
{{ office.name }}
</mat-option>
</mat-select>
@@ -57,3 +57,14 @@
</mat-card>
</div>
<ng-template #templateCreateOfficeForm let-popover="popover">
<h2>Create Office</h2>
<p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141727/Manage+Offices" target="_blank">Manage Offices</a></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()">Create Office</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next Step</button>
</div>
</ng-template>
src/app/organization/offices/create-office/create-office.component.ts
+93 -4
View File
@@ -1,5 +1,6 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef , ViewChild,
AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@@ -7,6 +8,12 @@ import { Router, ActivatedRoute } from '@angular/router';
import { OrganizationService } from '../../organization.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { MatDialog } from '@angular/material/dialog';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Create Office component.
@@ -16,7 +23,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './create-office.component.html',
styleUrls: ['./create-office.component.scss']
})
export class CreateOfficeComponent implements OnInit {
export class CreateOfficeComponent implements OnInit, AfterViewInit {
/** Office form. */
officeForm: FormGroup;
@@ -27,6 +34,11 @@ export class CreateOfficeComponent implements OnInit {
/** Maximum Date allowed. */
maxDate = new Date();
/* Reference of create office form */
@ViewChild('createOfficeFormRef') createOfficeFormRef: ElementRef<any>;
/* template for popover on create office form */
@ViewChild('templateCreateOfficeForm') templateCreateOfficeForm: TemplateRef<any>;
/**
* Retrieves the offices data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -35,13 +47,19 @@ export class CreateOfficeComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {Dates} dateUtils Date Utils to format date.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private organizationService: OrganizationService,
private settingsService: SettingsService,
private router: Router,
private route: ActivatedRoute,
private dateUtils: Dates) {
private dateUtils: Dates,
private popoverService: PopoverService,
private configurationWizardService: ConfigurationWizardService,
public dialog: MatDialog) {
this.route.data.subscribe((data: { offices: any }) => {
this.officeData = data.offices;
});
@@ -82,7 +100,78 @@ export class CreateOfficeComponent implements OnInit {
locale
};
this.organizationService.createOffice(data).subscribe(response => {
this.router.navigate(['../'], { relativeTo: this.route });
if (this.configurationWizardService.showOfficeForm === true) {
this.configurationWizardService.showOfficeForm = false;
this.openDialog();
} else {
this.router.navigate(['../'], { relativeTo: this.route });
}
});
}
/**
* Opens dialog if users wants to create more offices.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'office'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showOfficeForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showOfficeForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/offices/create']);
} else if (response.step === 3) {
this.configurationWizardService.showOfficeForm = false;
this.configurationWizardService.showAddEditCurrency = true;
this.router.navigate(['/organization']);
}
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showOfficeForm === true) {
setTimeout(() => {
this.showPopover(this.templateCreateOfficeForm, this.createOfficeFormRef.nativeElement, 'right', true);
});
}
}
/**
* Next Step (Add Edit Currency) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showOfficeForm = false;
this.configurationWizardService.showAddEditCurrency = true;
this.router.navigate(['/organization']);
}
/**
* Previous Step (Manage Offices Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showOfficeForm = false;
this.configurationWizardService.showOfficeTable = true;
this.router.navigate(['/organization/offices']);
}
}
src/app/organization/offices/offices.component.html
+60 -6
View File
@@ -1,32 +1,38 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<button mat-raised-button color="primary">
<fa-icon icon="sitemap"></fa-icon>&nbsp;&nbsp;
Tree View
</button>
<div #buttonTreeView class="in-block">
<button mat-raised-button color="primary">
<fa-icon icon="sitemap"></fa-icon>&nbsp;&nbsp;
Tree View
</button>
</div>
<div #buttonCreateOffice class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Office
</button>
</div>
<div #buttonImportOffices class="in-block">
<button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'" [routerLink]="['/organization', 'bulk-import', 'Offices']">
<fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
Import Offices
</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 #tableOffices class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -60,3 +66,51 @@
</div>
</div>
<ng-template #templateButtonTreeView let-popover="popover">
<h2>Tree View</h2>
<p class="mw300">This will launch an alternative view which allows you to view the office hierarchy for your organization.</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(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateButtonCreateOffice let-popover="popover">
<h2>Create Office</h2>
<p class="mw300">This option allows you to create new offices in your organization.</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();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateButtonImportOffices let-popover="popover">
<h2>Import Offices</h2>
<p class="mw300">This will launch the Bulk import/Offices page.</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();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">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 offices.</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(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateTableOffices let-popover="popover">
<h4>List of offices in the organization.</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/organization/offices/offices.component.ts
+70 -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';
/**
* Offices component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './offices.component.html',
styleUrls: ['./offices.component.scss']
})
export class OfficesComponent implements OnInit {
export class OfficesComponent implements OnInit, AfterViewInit {
/** Offices data. */
officesData: any;
@@ -30,11 +34,26 @@ export class OfficesComponent implements OnInit {
/** Sorter for offices table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of tree view button */
@ViewChild('buttonTreeView') buttonTreeView: ElementRef<any>;
/* Template for popover on tree view button */
@ViewChild('templateButtonTreeView') templateButtonTreeView: TemplateRef<any>;
/* Reference of offices table */
@ViewChild('tableOffices') tableOffices: ElementRef<any>;
/* Template for popover on offices table */
@ViewChild('templateTableOffices') templateTableOffices: TemplateRef<any>;
/**
* Retrieves the offices 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: { offices: any }) => {
this.officesData = data.offices;
});
@@ -64,4 +83,51 @@ export class OfficesComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showOfficeList === true) {
setTimeout(() => {
this.showPopover(this.templateButtonTreeView, this.buttonTreeView.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showOfficeTable === true) {
setTimeout(() => {
this.showPopover(this.templateTableOffices, this.tableOffices.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create Office Form) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showOfficeList = false;
this.configurationWizardService.showOfficeTable = false;
this.configurationWizardService.showOfficeForm = true;
this.router.navigate(['/organization/offices/create']);
}
/**
* Previous Step ( Manage Offices Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showOfficeList = false;
this.configurationWizardService.showOfficeTable = false;
this.configurationWizardService.showCreateOffice = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/organization.component.html
+72 -1
View File
@@ -8,6 +8,7 @@
<mat-nav-list>
<div #office>
<mat-list-item [routerLink]="['offices']" *mifosxHasPermission="'READ_OFFICE'">
<mat-icon matListIcon>
<fa-icon icon="building" size="sm"></fa-icon>
@@ -15,7 +16,9 @@
<h4 matLine>Manage Offices</h4>
<p matLine>Add new office or modify or deactivate office or modify hierarchy</p>
</mat-list-item>
</div>
<div #holidays>
<mat-list-item [routerLink]="['holidays']" *mifosxHasPermission="'READ_HOLIDAY'">
<mat-icon matListIcon>
<fa-icon icon="calendar-alt" size="sm"></fa-icon>
@@ -23,7 +26,9 @@
<h4 matLine>Manage Holidays</h4>
<p matLine>Define holidays for office</p>
</mat-list-item>
</div>
<div #employee>
<mat-list-item [routerLink]="['employees']" *mifosxHasPermission="'READ_STAFF'">
<mat-icon matListIcon>
<fa-icon icon="user" size="sm"></fa-icon>
@@ -31,6 +36,7 @@
<h4 matLine>Manage Employees</h4>
<p matLine>An employee represents loan officers with no access to systems</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['standing-instructions-history']" *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
<mat-icon matListIcon>
@@ -80,6 +86,7 @@
<mat-nav-list>
<div #addEditCurrency>
<mat-list-item [routerLink]="['currencies']" *mifosxHasPermission="'READ_CURRENCY'">
<mat-icon matListIcon>
<fa-icon icon="cogs" size="sm"></fa-icon>
@@ -87,8 +94,9 @@
<h4 matLine>Currency Configuration</h4>
<p matLine>Currencies available across organization for different products</p>
</mat-list-item>
</div>
<div #manageFunds>
<mat-list-item [routerLink]="['manage-funds']" *mifosxHasPermission="'READ_FUND'">
<mat-icon matListIcon>
<fa-icon icon="money-bill-alt" size="sm"></fa-icon>
@@ -96,6 +104,7 @@
<h4 matLine>Manage Funds</h4>
<p matLine>Funds are associated with loans</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['bulkloan']" *mifosxHasPermission="'BULKREASSIGN_LOAN'">
<mat-icon matListIcon>
@@ -113,6 +122,7 @@
<p matLine>Manage Tellers / Cashiers and Cash Allocation and Settlement</p>
</mat-list-item>
<div #workingDays>
<mat-list-item [routerLink]="['working-days']" *mifosxHasPermission="'READ_WORKINGDAYS'">
<mat-icon matListIcon>
<fa-icon icon="calendar-alt" size="sm"></fa-icon>
@@ -120,6 +130,7 @@
<h4 matLine>Working Days</h4>
<p matLine>Define working days and configure behaviour of payments due on holidays</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['payment-types']" *mifosxHasPermission="'READ_PAYMENTTYPE'">
<mat-icon matListIcon>
@@ -162,3 +173,63 @@
</mat-card>
</div>
<ng-template #templateOffice let-popover="popover">
<h2>Manage Offices</h2>
<p class="mw300">The Manage Offices page allows you to create, edit and add the offices within your organization.</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();previousStepOffice()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepOffice()">Next</button>
</div>
</ng-template>
<ng-template #templateAddEditCurrency let-popover="popover">
<h2>Currency Configuration</h2>
<p class="mw300">This section allows an organization to define what currencies will be used throughout their interactions within the Mifos X system.</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();previousStepAddEditCurrency()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepAddEditCurrency()">Next</button>
</div>
</ng-template>
<ng-template #templateHolidays let-popover="popover">
<h2>Manage Holidays</h2>
<p class="mw300">The ability to manage holidays for individual offices is a very useful tool for an organization spanning multiple locations.Use this option to customize holidays for each office of your organization.</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();previousStepHolidays()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepHolidays()">Next</button>
</div>
</ng-template>
<ng-template #templateEmployee let-popover="popover">
<h2>Manage Employees</h2>
<p class="mw300">With this option, you may view, edit and/or delete your organization's employees.</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();previousStepEmployee()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepEmployee()">Next</button>
</div>
</ng-template>
<ng-template #templateWorkingDays let-popover="popover">
<h2>Working Days</h2>
<p class="mw300">Working days page allows you to define which days of the week are working days.</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();previousStepWorkingDays()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepWorkingDays()">Next</button>
</div>
</ng-template>
<ng-template #templateManageFunds let-popover="popover">
<h2>Manage Funds</h2>
<p class="mw300">This allows you to manage funds associated with loans.</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();previousStepManageFunds()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepManageFunds()">Next</button>
</div>
</ng-template>
src/app/organization/organization.component.ts
+192 -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 { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
/** Custom Services */
import { PopoverService } from '../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
/**
* Organization component.
@@ -9,11 +14,195 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './organization.component.html',
styleUrls: ['./organization.component.scss']
})
export class OrganizationComponent implements OnInit {
export class OrganizationComponent implements OnInit, AfterViewInit {
constructor() { }
/* Reference of manage offices */
@ViewChild('office') office: ElementRef<any>;
/* Template for popover on manage offices */
@ViewChild('templateOffice') templateOffice: TemplateRef<any>;
/* Reference of add/edit currency */
@ViewChild('addEditCurrency') addEditCurrency: ElementRef<any>;
/* Template for popover on add/edit currency */
@ViewChild('templateAddEditCurrency') templateAddEditCurrency: TemplateRef<any>;
/* Reference of manage holidays */
@ViewChild('holidays') holidays: ElementRef<any>;
/* Template for popover on manage holidays */
@ViewChild('templateHolidays') templateHolidays: TemplateRef<any>;
/* Reference of manage employees */
@ViewChild('employee') employee: ElementRef<any>;
/* Template for popover on manage employee */
@ViewChild('templateEmployee') templateEmployee: TemplateRef<any>;
/* Reference of define working days */
@ViewChild('workingDays') workingDays: ElementRef<any>;
/* Template for popover on define working days */
@ViewChild('templateWorkingDays') templateWorkingDays: TemplateRef<any>;
/* Reference of manage funds */
@ViewChild('manageFunds') manageFunds: ElementRef<any>;
/* Template for popover on manage funds */
@ViewChild('templateManageFunds') templateManageFunds: TemplateRef<any>;
/**
* @param {ActivatedRoute} activatedRoute ActivatedRoute.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private activatedRoute: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) { }
ngOnInit() {
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showCreateOffice === true) {
setTimeout(() => {
this.showPopover(this.templateOffice, this.office.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showAddEditCurrency === true) {
setTimeout(() => {
this.showPopover(this.templateAddEditCurrency, this.addEditCurrency.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCreateHoliday === true) {
setTimeout(() => {
this.showPopover(this.templateHolidays, this.holidays.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCreateEmployee === true) {
setTimeout(() => {
this.showPopover(this.templateEmployee, this.employee.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showDefineWorkingDays === true) {
setTimeout(() => {
this.showPopover(this.templateWorkingDays, this.workingDays.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showManageFunds === true) {
setTimeout(() => {
this.showPopover(this.templateManageFunds, this.manageFunds.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Manage Offices Page) Configuration Wizard.
*/
nextStepOffice() {
this.configurationWizardService.showCreateOffice = false;
this.configurationWizardService.showOfficeList = true;
this.router.navigate(['/organization/offices']);
}
/**
* Previous Step (Home component) Configuration Wizard.
*/
previousStepOffice() {
this.configurationWizardService.showCreateOffice = false;
this.configurationWizardService.showHomeSearchActivity = true;
this.router.navigate(['/home']);
}
/**
* Next Step (Add/Edit Currency Page) Configuration Wizard.
*/
nextStepAddEditCurrency() {
this.configurationWizardService.showAddEditCurrency = false;
this.configurationWizardService.showCurrencyPage = true;
this.router.navigate(['/organization/currencies']);
}
/**
* Previous Step (Office Form) Configuration Wizard.
*/
previousStepAddEditCurrency() {
this.configurationWizardService.showAddEditCurrency = false;
this.configurationWizardService.showOfficeForm = true;
this.router.navigate(['/organization/offices/create']);
}
/**
* Next Step (manage Holidays Page) Configuration Wizard.
*/
nextStepHolidays() {
this.configurationWizardService.showCreateHoliday = false;
this.configurationWizardService.showHolidayPage = true;
this.router.navigate(['/organization/holidays']);
}
/**
* Previous Step (Currency Form) Configuration Wizard.
*/
previousStepHolidays() {
this.configurationWizardService.showCreateHoliday = false;
this.configurationWizardService.showCurrencyForm = true;
this.router.navigate(['/organization/currencies/manage']);
}
/**
* Next Step (Manage Employees Page) Configuration Wizard.
*/
nextStepEmployee() {
this.configurationWizardService.showCreateEmployee = false;
this.configurationWizardService.showEmployeeList = true;
this.router.navigate(['/organization/employees']);
}
/**
* Previous Step (Holiday Form) Configuration Wizard.
*/
previousStepEmployee() {
this.configurationWizardService.showCreateEmployee = false;
this.configurationWizardService.showHolidayFilter = true;
this.router.navigate(['/organization/holidays']);
}
/**
* Next Step (Define Working Days Page) Configuration Wizard.
*/
nextStepWorkingDays() {
this.router.navigate(['/organization/working-days']);
}
/**
* Previous Step (Employee Form) Configuration Wizard.
*/
previousStepWorkingDays() {
this.configurationWizardService.showDefineWorkingDays = false;
this.configurationWizardService.showEmployeeForm = true;
this.router.navigate(['/organization/employees/create']);
}
/**
* Next Step (Manage Funds Page) Configuration Wizard.
*/
nextStepManageFunds() {
this.router.navigate(['/organization/manage-funds']);
}
/**
* Previous Step (Recurring Deposit Page) Configuration Wizard.
*/
previousStepManageFunds() {
this.configurationWizardService.showManageFunds = false;
this.configurationWizardService.showRecurringDepositProductsList = true;
this.router.navigate(['/products/recurring-deposit-products']);
}
}
src/app/organization/tellers/cashiers/cashiers.component.html
+1 -1
View File
@@ -49,7 +49,7 @@
<button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions"
(click)="routeEdit($event)" [routerLink]="[cashier.id, 'transactions']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
<i class="fa fa-eye"></i>
</button>
</button>
</td>
</ng-container>
src/app/organization/tellers/cashiers/transactions/transactions.component.html
+11 -11
View File
@@ -67,7 +67,7 @@
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
<mat-form-field>
<mat-label> Select Currency </mat-label>
<mat-select [formControl]="currencySelector" required>
@@ -87,41 +87,41 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate | dateFormat }} </td>
</ng-container>
<ng-container matColumnDef="transactions">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transactions </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value }} </td>
</ng-container>
<ng-container matColumnDef="allocation">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Allocation ({{cashierData.sumCashAllocation | number}}) </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<ng-container matColumnDef="cashIn">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | number}}) </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<ng-container matColumnDef="cashOut">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | number}}) </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<ng-container matColumnDef="settlement">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | number}})</th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</mat-card>
</div>
src/app/organization/tellers/teller-transaction-template.resolver.ts
+32
View File
@@ -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 { OrganizationService } from 'app/organization/organization.service';
/**
* Cashier transaction data resolver.
*/
@Injectable()
export class CashierTransactionTemplateResolver implements Resolve<Object> {
/**
* @param {OrganizationService} organizationService Organization service.
*/
constructor(private organizationService: OrganizationService) {}
/**
* Returns the cashier transaction data.
* @returns {Observable<any>}
*/
resolve(route: ActivatedRouteSnapshot): Observable<any> {
const cashierId = route.parent.paramMap.get('id');
const tellerId = route.parent.parent.paramMap.get('id');
return this.organizationService.getCashierTransactionTemplate(tellerId, cashierId);
}
}
src/app/organization/working-days/working-days.component.html
+12 -1
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="column">
<div #workingDaysFormRef fxLayout="column">
<div fxLayout="row" fxLayout.lt-md="column">
<mat-label fxFlex="50%" class="mat-h4">Working Days</mat-label>
@@ -46,3 +46,14 @@
</mat-card>
</div>
<ng-template #templateWorkingDaysFormRef let-data let-popover="popover">
<h2>Working Days</h2>
<p class="mw400">Click (Define Working Days) to define working days. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243212/Working+Days" target="_blank">Working Days</a></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()">Define Working Days</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next Step</button>
</div>
</ng-template>
src/app/organization/working-days/working-days.component.ts
+86 -4
View File
@@ -1,11 +1,17 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
/** Custom Services */
import { OrganizationService } from '../organization.service';
import { SettingsService } from 'app/settings/settings.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Components */
import { NextStepDialogComponent } from '../../configuration-wizard/next-step-dialog/next-step-dialog.component';
/** Recurrence default value. */
const recurrenceDefaultValue = 'FREQ=WEEKLY;INTERVAL=1;BYDAY=';
@@ -18,7 +24,7 @@ const recurrenceDefaultValue = 'FREQ=WEEKLY;INTERVAL=1;BYDAY=';
templateUrl: './working-days.component.html',
styleUrls: ['./working-days.component.scss']
})
export class WorkingDaysComponent implements OnInit {
export class WorkingDaysComponent implements OnInit, AfterViewInit {
/** Working days form. */
workingDaysForm: FormGroup;
@@ -37,6 +43,11 @@ export class WorkingDaysComponent implements OnInit {
/** Repayment schedule type data. */
repaymentRescheduleTypeData: any;
/* Reference of define working days form */
@ViewChild('workingDaysFormRef') workingDaysFormRef: ElementRef<any>;
/* Template for popover on define working days form */
@ViewChild('templateWorkingDaysFormRef') templateWorkingDaysFormRef: TemplateRef<any>;
/**
* Retrieves the working days data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -44,12 +55,18 @@ export class WorkingDaysComponent implements OnInit {
* @param {OrganizationService} organizationService Organization Service.
* @param {SettingsService} settingsService Settings Service.
* @param {Router} router Router for navigation.
* @param {MatDialog} dialog MatDialog.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private route: ActivatedRoute,
private organizationService: OrganizationService,
private settingsService: SettingsService,
private router: Router) {
private router: Router,
private dialog: MatDialog,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: { workingDays: any }) => {
this.workingDaysData = data.workingDays;
});
@@ -115,8 +132,73 @@ export class WorkingDaysComponent implements OnInit {
}
workingDays.recurrence = recurrence;
this.organizationService.updateWorkingDays(workingDays).subscribe(response => {
this.router.navigate(['../'], { relativeTo: this.route });
if (this.configurationWizardService.showDefineWorkingDays === true) {
this.configurationWizardService.showDefineWorkingDays = false;
this.openNextStepDialog();
} else {
this.router.navigate(['../'], { relativeTo: this.route });
}
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showDefineWorkingDays === true) {
setTimeout(() => {
this.showPopover(this.templateWorkingDaysFormRef, this.workingDaysFormRef.nativeElement, 'right', true);
});
}
}
/**
* Open Dialog for next step.
* Next Step (System) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showDefineWorkingDays = false;
this.openNextStepDialog();
}
/**
* Previous Step (Organization Page) Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/organization']);
}
/**
* Next Step (System) Dialog Configuration Wizard.
*/
openNextStepDialog() {
const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
data: {
nextStepName: 'Setup System',
previousStepName: 'Organization',
stepPercentage: 30
},
});
nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
if (response.nextStep) {
this.configurationWizardService.showDefineWorkingDays = false;
this.configurationWizardService.showDatatables = true;
this.router.navigate(['/system']);
} else {
this.configurationWizardService.showDefineWorkingDays = false;
this.router.navigate(['/home']);
}
});
}
}
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']);
}
}
src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts
+4
View File
@@ -58,6 +58,10 @@ export class SavingsAccountDetailsStepComponent implements OnInit {
'submittedOnDate': this.savingsAccountTemplate.timeline.submittedOnDate && new Date(this.savingsAccountTemplate.timeline.submittedOnDate),
'externalId': this.savingsAccountTemplate.externalId
});
} else {
this.savingsAccountDetailsForm.patchValue({
'submittedOnDate': new Date()
});
}
}
}
src/app/shared/icons.module.ts
+4 -2
View File
@@ -96,7 +96,8 @@ import {
faFolderOpen,
faIdBadge,
faAddressCard,
faKeyboard
faKeyboard,
faInfo
} from '@fortawesome/free-solid-svg-icons';
/**
@@ -203,7 +204,8 @@ export class IconsModule {
faFolderOpen,
faIdBadge,
faAddressCard,
faKeyboard
faKeyboard,
faInfo
);
}
src/app/system/codes/codes.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_CODE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Code
</button>
<div #buttonCreateCode>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Code
</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 #tableCodes class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Code Name </th>
@@ -37,3 +39,31 @@
</div>
</div>
<ng-template #templateButtonCreateCode let-popover="popover">
<h2>Manage Codes</h2>
<p class="mw300">To create additional codes.</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 codes.</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(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateTableCodes let-popover="popover">
<h4>List of all codes in the Mifos system for your organization.</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/system/codes/codes.component.ts
+70 -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-codes',
templateUrl: './codes.component.html',
styleUrls: ['./codes.component.scss']
})
export class CodesComponent implements OnInit {
export class CodesComponent implements OnInit, AfterViewInit {
/** Codes data. */
codesData: any;
@@ -24,11 +28,26 @@ export class CodesComponent implements OnInit {
/** Sorter for codes table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create code button */
@ViewChild('buttonCreateCode') buttonCreateCode: ElementRef<any>;
/* Template for popover on create code button */
@ViewChild('templateButtonCreateCode') templateButtonCreateCode: TemplateRef<any>;
/* Reference of codes table */
@ViewChild('tableCodes') tableCodes: ElementRef<any>;
/* Template for popover on codes table */
@ViewChild('templateTableCodes') templateTableCodes: TemplateRef<any>;
/**
* Retrieves the codes 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: { codes: any }) => {
this.codesData = data.codes;
});
@@ -58,4 +77,51 @@ export class CodesComponent implements OnInit {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showSystemCodesPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateCode, this.buttonCreateCode.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showSystemCodesList === true) {
setTimeout(() => {
this.showPopover(this.templateTableCodes, this.tableCodes.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create Codes Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showSystemCodesPage = false;
this.configurationWizardService.showSystemCodesList = false;
this.configurationWizardService.showSystemCodesForm = true;
this.router.navigate(['/system/codes/create']);
}
/**
* Previous Step (manage Codes System Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showSystemCodesPage = false;
this.configurationWizardService.showSystemCodesList = false;
this.configurationWizardService.showSystemCodes = true;
this.router.navigate(['/system']);
}
}
src/app/system/codes/create-code/create-code.component.html
+12 -1
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="column">
<div #codeFormRef fxLayout="column">
<mat-form-field>
<mat-label>Code Name</mat-label>
@@ -30,3 +30,14 @@
</mat-card>
</div>
<ng-template #templateCodeFormRef let-data let-popover="popover">
<h2>Create Code</h2>
<p class="mw400">To create code, click on create code and enter the code name.<br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">Manage Codes</a></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()">Create Code</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/system/codes/create-code/create-code.component.ts
+60 -3
View File
@@ -1,31 +1,43 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
/** Custom Services */
import { SystemService } from '../../system.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { PopoverRef } from '../../../configuration-wizard/popover/popover-ref';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
@Component({
selector: 'mifosx-create-code',
templateUrl: './create-code.component.html',
styleUrls: ['./create-code.component.scss']
})
export class CreateCodeComponent implements OnInit {
export class CreateCodeComponent implements OnInit, AfterViewInit {
/** Code form. */
codeForm: FormGroup;
/* Reference of create code form */
@ViewChild('codeFormRef') codeFormRef: ElementRef<any>;
/* Template for popover on create code form */
@ViewChild('templateCodeFormRef') templateCodeFormRef: TemplateRef<any>;
/**
* @param {FormBuilder} formBuilder Form Builder.
* @param {SystemService} systemService Accounting Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private systemService: SystemService,
private route: ActivatedRoute,
private router: Router) { }
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) { }
/**
* Creates the code form.
@@ -50,8 +62,53 @@ export class CreateCodeComponent implements OnInit {
submit() {
this.systemService.createCode(this.codeForm.value)
.subscribe((response: any) => {
if (this.configurationWizardService.showSystemCodesForm === true) {
this.configurationWizardService.showSystemCodesForm = false;
this.configurationWizardService.showRolesandPermission = true;
this.router.navigate(['/system']);
} else {
this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
}
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showSystemCodesForm === true) {
setTimeout(() => {
this.showPopover(this.templateCodeFormRef, this.codeFormRef.nativeElement, 'right', true);
});
}
}
/**
* Next Step (Roles and Permission) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showSystemCodesForm = false;
this.configurationWizardService.showRolesandPermission = true;
this.router.navigate(['/system']);
}
/**
* Previous Step (Manage Codes Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showSystemCodesForm = false;
this.configurationWizardService.showSystemCodesList = true;
this.router.navigate(['/system/codes']);
}
}
src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html
+20 -2
View File
@@ -1,13 +1,13 @@
<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 #configurationsTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -54,3 +54,21 @@
</div>
</div>
<ng-template #templateFilter let-data let-popover="popover">
<h4>Search bar to filter configurations.</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();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigurationsTable, configurationsTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateConfigurationsTable let-data let-popover="popover">
<h4 class="mw300">Global Configuration options and their current status. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895362/Global+Configuration" target="_blank">Global Configurations</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/system/configurations/global-configurations-tab/global-configurations-tab.component.ts
+70 -4
View File
@@ -1,20 +1,23 @@
/** 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 { AlertService } from 'app/core/alert/alert.service';
import { SettingsService } from 'app/settings/settings.service';
import { ActivatedRoute, Router } from '@angular/router';
/** Custom Services */
import { SystemService } from '../../system.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
@Component({
selector: 'mifosx-global-configurations-tab',
templateUrl: './global-configurations-tab.component.html',
styleUrls: ['./global-configurations-tab.component.scss']
})
export class GlobalConfigurationsTabComponent implements OnInit {
export class GlobalConfigurationsTabComponent implements OnInit, AfterViewInit {
/** Configuration data. */
configurationData: any;
@@ -28,14 +31,29 @@ export class GlobalConfigurationsTabComponent implements OnInit {
/** Sorter for configurations table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of filter */
@ViewChild('filter') filter: ElementRef<any>;
/* Template for popover on filter */
@ViewChild('templateFilter') templateFilter: TemplateRef<any>;
/* Reference of configurations table */
@ViewChild('configurationsTable') configurationsTable: ElementRef<any>;
/* Template for popover on configurations table */
@ViewChild('templateConfigurationsTable') templateConfigurationsTable: TemplateRef<any>;
/**
* Retrieves the configurations data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {SystemService} systemService System Service.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private alertService: AlertService,
private systemService: SystemService) {
constructor(private route: ActivatedRoute,
private alertService: AlertService,
private systemService: SystemService,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.configurationData = this.systemService.getConfigurations();
}
@@ -80,4 +98,52 @@ export class GlobalConfigurationsTabComponent implements OnInit {
}
});
}
/**
* 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);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showConfigurationsPage === true) {
setTimeout(() => {
this.showPopover(this.templateFilter, this.filter.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showConfigurationsList === true) {
setTimeout(() => {
this.showPopover(this.templateConfigurationsTable, this.configurationsTable.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Scheduler Jobs System Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showConfigurationsPage = false;
this.configurationWizardService.showConfigurationsList = false;
this.configurationWizardService.showSchedulerJobs = true;
this.router.navigate(['/system']);
}
/**
* Previous Step (Global Configurations System Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showConfigurationsPage = false;
this.configurationWizardService.showConfigurationsList = false;
this.configurationWizardService.showConfigurations = true;
this.router.navigate(['/system']);
}
}

Some files were not shown because too many files have changed in this diff Show More