diff --git a/src/app/accounting/accounting.component.html b/src/app/accounting/accounting.component.html index 5d6e72530..8ff4a63f1 100644 --- a/src/app/accounting/accounting.component.html +++ b/src/app/accounting/accounting.component.html @@ -16,13 +16,15 @@

These are predefined postings

- - - - -

Create Journal Entries

-

Manual journal entry transactions recorded in a journal

- +
+ + + + +

Create Journal Entries

+

Manual journal entry transactions recorded in a journal

+ +
@@ -32,21 +34,25 @@

Advanced search option for journal entries

 - - - - -

Accounts Linked to Financial Activities

-

List of Financial Activities and GL Account Mappings

- +
+ + + + +

Accounts Linked to Financial Activities

+

List of Financial Activities and GL Account Mappings

+ +
- - - - -

Migrate Opening Balances (Office-wise)

-

Set or update office-level opening balances for GL accounts

- +
+ + + + +

Migrate Opening Balances (Office-wise)

+

Set or update office-level opening balances for GL accounts

+ +
@@ -56,21 +62,25 @@ - - - - -

Chart of Accounts

-

List of accounts used by the organization

- +
+ + + + +

Chart of Accounts

+

List of accounts used by the organization

+ +
- - - - -

Closing Entries

-

Journal entries made at the end of accounting period

- +
+ + + + +

Closing Entries

+

Journal entries made at the end of accounting period

+ +
@@ -105,3 +115,53 @@ + + +

Chart of Accounts

+

The Chart of Accounts - General Ledger Setup allows you to organize your different accounts within Mifos X.

+
+ + + +
+ + + +

Accounts linked to Financial Activities

+

Accounts linked to Financial Activities are mapped accounts which are needed to do system generating accounting transaction.

+
+ + + +
+ + + +

Migrate opening balances (Office-wise)

+

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.

+
+ + + +
+ + + +

Closing Entries

+

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.

+
+ + + +
+ + + +

Create Journal Entries

+

Journal Entries are essentially logs of all the transactions in your organization that have accounting implications.

+
+ + + +
+ diff --git a/src/app/accounting/accounting.component.ts b/src/app/accounting/accounting.component.ts index 588ab7ba9..104c2088b 100644 --- a/src/app/accounting/accounting.component.ts +++ b/src/app/accounting/accounting.component.ts @@ -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; + /* Template for popover on Chart of Accounts */ + @ViewChild('templateChartofAccounts') templateChartofAccounts: TemplateRef; + /* Reference of Accounts Linked */ + @ViewChild('accountsLinked') accountsLinked: ElementRef; + /* Template for popover on Accounts Linked */ + @ViewChild('templateAccountsLinked') templateAccountsLinked: TemplateRef; + /* Reference of Migrate Opening Balances */ + @ViewChild('migrateOpeningBalances') migrateOpeningBalances: ElementRef; + /* Template for popover on Migrate Opening Balances */ + @ViewChild('templateMigrateOpeningBalances') templateMigrateOpeningBalances: TemplateRef; + /* Reference of Closing Entries */ + @ViewChild('closingEntries') closingEntries: ElementRef; + /* Template for popover on Closing Entries */ + @ViewChild('templateClosingEntries') templateClosingEntries: TemplateRef; + /* Reference of Create Journal Entries */ + @ViewChild('createJournalEntries') createJournalEntries: ElementRef; + /* Template for popover on Create Journal Entries */ + @ViewChild('templateCreateJournalEntries') templateCreateJournalEntries: TemplateRef; + + /** + * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html index 321c41d48..6e0246003 100644 --- a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html +++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.html @@ -1,30 +1,34 @@
- - - - - - - - - +
+ + + + + + + + +
+
+ +
-
+
Filter
-
+
@@ -194,3 +198,41 @@ + + +

Tree View

+

There is an alternative way to view your accounts - using the Tree View.

+
+ + + +
+ + + +

Add Account

+

This option allows you to create new GL accounts.

+
+ + + +
+ + + +

Search bar to filter GL accounts.

+
+ + + +
+ + + +

List of chart of all the accounts being used by your organization.

+
+ + + +
+ diff --git a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts index 13d744626..089682c58 100644 --- a/src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts +++ b/src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts @@ -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; + /* Template for popover on tree view button */ + @ViewChild('templateButtonTreeView') templateButtonTreeView: TemplateRef; + /* Reference of Accounts Table */ + @ViewChild('accountsTable') accountsTable: ElementRef; + /* Template for popover on accounts table */ + @ViewChild('templateAccountsTable') templateAccountsTable: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html index 4793ad277..5b447d81b 100644 --- a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html +++ b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html @@ -2,7 +2,7 @@ -
+ @@ -91,3 +91,14 @@ + + +

Create GL account

+

Click to start filling the details. * mark fields are neccessary. For more details click: Chart of Accounts

+
+ + + + +
+ diff --git a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts index b7a72c8e9..7c96bdfca 100644 --- a/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts +++ b/src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts @@ -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; + /* Template for popover on accounts form */ + @ViewChild('templateAccountFormRef') templateAccountFormRef: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + }); + } } diff --git a/src/app/accounting/closing-entries/closing-entries.component.html b/src/app/accounting/closing-entries/closing-entries.component.html index d32ecd671..2c6f146e7 100644 --- a/src/app/accounting/closing-entries/closing-entries.component.html +++ b/src/app/accounting/closing-entries/closing-entries.component.html @@ -1,11 +1,13 @@
- +
+ +
-
+
Office Name @@ -21,7 +23,7 @@
-
+
@@ -55,3 +57,31 @@ + + +

Create Closure

+

This option allows you to create new closure.

+
+ + + +
+ + + +

Search bar to filter closures by office.

+
+ + + +
+ + + +

List of closures. To know more click: Closing Entries

+
+ + + +
+ diff --git a/src/app/accounting/closing-entries/closing-entries.component.ts b/src/app/accounting/closing-entries/closing-entries.component.ts index b37327d0f..4e381e9e4 100644 --- a/src/app/accounting/closing-entries/closing-entries.component.ts +++ b/src/app/accounting/closing-entries/closing-entries.component.ts @@ -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; + /* Template for popover on create closure button */ + @ViewChild('templateButtonCreateClosure') templateButtonCreateClosure: TemplateRef; + /* Reference of closures table */ + @ViewChild('closuresTable') closuresTable: ElementRef; + /* Template for popover on closures table */ + @ViewChild('templateClosuresTable') templateClosuresTable: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/accounting/create-journal-entry/create-journal-entry.component.html b/src/app/accounting/create-journal-entry/create-journal-entry.component.html index 5b9b0aa1c..476b7d836 100644 --- a/src/app/accounting/create-journal-entry/create-journal-entry.component.html +++ b/src/app/accounting/create-journal-entry/create-journal-entry.component.html @@ -6,7 +6,7 @@ -
+
Office @@ -176,3 +176,13 @@
+ + +

Add Journal Entry Form

+

Fields with a red asterisk (*) are required. To know more click: Add Journal Entries

+
+ + + +
+ diff --git a/src/app/accounting/create-journal-entry/create-journal-entry.component.ts b/src/app/accounting/create-journal-entry/create-journal-entry.component.ts index 34b0f2ce4..c85656e81 100644 --- a/src/app/accounting/create-journal-entry/create-journal-entry.component.ts +++ b/src/app/accounting/create-journal-entry/create-journal-entry.component.ts @@ -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; + /* Template for popover on create journal form */ + @ViewChild('templateCreateJournalFormRef') templateCreateJournalFormRef: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + }); + } } diff --git a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html index 291716d81..52b5e2631 100644 --- a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html +++ b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html @@ -1,10 +1,12 @@
- +
+ +
-
+
@@ -31,3 +33,22 @@ + + +

Define New Mapping

+

To define new mapping.

+
+ + + +
+ + + +

List of accounts linked to different financial activities. To know more click: Accounts linked to Financial Activities

+
+ + + +
+ diff --git a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts index 6c6a3015c..5cc9add0b 100644 --- a/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts +++ b/src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts @@ -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; + /* Template for popover on define mapping button */ + @ViewChild('templateButtonDefineMapping') templateButtonDefineMapping: TemplateRef; + /* Reference of Activities table */ + @ViewChild('activitiesTable') activitiesTable: ElementRef; + /* Template for popover on Activities table */ + @ViewChild('templateActivitiesTable') templateActivitiesTable: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html index 48aecff00..50f56d4d0 100644 --- a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html +++ b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html @@ -7,7 +7,7 @@ -
+
Office @@ -21,7 +21,9 @@ - +
+ +
@@ -124,3 +126,13 @@
+ + +

Migrate opening balances (Office-wise)

+

This form will be used to migrate opening balances. To know more click: Migrate opening balances (Office-wise)

+
+ + + +
+ diff --git a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts index b63b660a6..c24aab44b 100644 --- a/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts +++ b/src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts @@ -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; + /* Template for popover on search form */ + @ViewChild('templateSearchFormRef') templateSearchFormRef: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 207b10821..598b492c1 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -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], diff --git a/src/app/configuration-wizard/completion-dialog/completion-dialog.component.html b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.html new file mode 100644 index 000000000..b650e630a --- /dev/null +++ b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.html @@ -0,0 +1,17 @@ +

Welcome to Mifos

+ + + +

Following guide tour will help you configure Mifos according to your organization needs.

+ +

You have successfully completed the setup of Configuration Wizard.

+ +

Progress Bar : 100 %

+ + + + + + + + diff --git a/src/app/configuration-wizard/completion-dialog/completion-dialog.component.scss b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/configuration-wizard/completion-dialog/completion-dialog.component.spec.ts b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.spec.ts new file mode 100644 index 000000000..4312060ef --- /dev/null +++ b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ CompletionDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(CompletionDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/configuration-wizard/completion-dialog/completion-dialog.component.ts b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.ts new file mode 100644 index 000000000..9b8f1ae27 --- /dev/null +++ b/src/app/configuration-wizard/completion-dialog/completion-dialog.component.ts @@ -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, + @Inject(MAT_DIALOG_DATA) public data: any) { } + + ngOnInit() { + } + +} diff --git a/src/app/configuration-wizard/configuration-wizard.component.html b/src/app/configuration-wizard/configuration-wizard.component.html new file mode 100644 index 000000000..ff3db770e --- /dev/null +++ b/src/app/configuration-wizard/configuration-wizard.component.html @@ -0,0 +1,39 @@ +

Welcome to Mifos

+ + + +

Following guide tour will help you configure Mifos according to your organization needs.

+ + + + + + + + + + + + + + + + + + + + + + + + + +

Progress Bar : 0%

+ + + + + + + + diff --git a/src/app/configuration-wizard/configuration-wizard.component.scss b/src/app/configuration-wizard/configuration-wizard.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/configuration-wizard/configuration-wizard.component.spec.ts b/src/app/configuration-wizard/configuration-wizard.component.spec.ts new file mode 100644 index 000000000..02969eeb4 --- /dev/null +++ b/src/app/configuration-wizard/configuration-wizard.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ConfigurationWizardComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfigurationWizardComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/configuration-wizard/configuration-wizard.component.ts b/src/app/configuration-wizard/configuration-wizard.component.ts new file mode 100644 index 000000000..34caae5aa --- /dev/null +++ b/src/app/configuration-wizard/configuration-wizard.component.ts @@ -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} dialogRef MatDialogRef. + */ + constructor(public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any) { } + + ngOnInit() { + } + +} diff --git a/src/app/configuration-wizard/configuration-wizard.module.ts b/src/app/configuration-wizard/configuration-wizard.module.ts new file mode 100644 index 000000000..fca30ba74 --- /dev/null +++ b/src/app/configuration-wizard/configuration-wizard.module.ts @@ -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 { } diff --git a/src/app/configuration-wizard/configuration-wizard.service.spec.ts b/src/app/configuration-wizard/configuration-wizard.service.spec.ts new file mode 100644 index 000000000..b5373ec08 --- /dev/null +++ b/src/app/configuration-wizard/configuration-wizard.service.spec.ts @@ -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(); + }); +}); diff --git a/src/app/configuration-wizard/configuration-wizard.service.ts b/src/app/configuration-wizard/configuration-wizard.service.ts new file mode 100644 index 000000000..1a6a778c7 --- /dev/null +++ b/src/app/configuration-wizard/configuration-wizard.service.ts @@ -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; + } +} diff --git a/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html new file mode 100644 index 000000000..98a32e639 --- /dev/null +++ b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.html @@ -0,0 +1,13 @@ +

Configuration Wizard

+ + + +

You have created {{stepName}} successfully. Please select from the options below to proceed furthur.

+ + + + + + + + diff --git a/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.scss b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.spec.ts b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.spec.ts new file mode 100644 index 000000000..096e0a897 --- /dev/null +++ b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ContinueSetupDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ContinueSetupDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.ts b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.ts new file mode 100644 index 000000000..1735e8542 --- /dev/null +++ b/src/app/configuration-wizard/continue-setup-dialog/continue-setup-dialog.component.ts @@ -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} dialogRef MatDialogRef. + */ + constructor(public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any) { + this.stepName = data.stepName; + } + + ngOnInit() { + } + +} diff --git a/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html new file mode 100644 index 000000000..ebcbcb92c --- /dev/null +++ b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.html @@ -0,0 +1,18 @@ +

Welcome to Mifos

+ + + +

Following guide tour will help you configure Mifos according to your organization needs.

+ +

You have successfully completed the setup of {{ previousStepName }}

+ +

Progress Bar : {{stepPercentage}}%

+ + + + + + + + + diff --git a/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.scss b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.spec.ts b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.spec.ts new file mode 100644 index 000000000..88842cf36 --- /dev/null +++ b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NextStepDialogComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NextStepDialogComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.ts b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.ts new file mode 100644 index 000000000..3f0109be9 --- /dev/null +++ b/src/app/configuration-wizard/next-step-dialog/next-step-dialog.component.ts @@ -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} dialogRef MatDialogRef. + */ + constructor(public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: any) { + this.stepPercentage = data.stepPercentage; + this.nextStepName = data.nextStepName; + this.previousStepName = data.previousStepName; + } + + ngOnInit() { + } + +} diff --git a/src/app/configuration-wizard/popover/popover-arrow.directive.ts b/src/app/configuration-wizard/popover/popover-arrow.directive.ts new file mode 100644 index 000000000..77e17fff6 --- /dev/null +++ b/src/app/configuration-wizard/popover/popover-arrow.directive.ts @@ -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(); + } +} diff --git a/src/app/configuration-wizard/popover/popover-close.directive.ts b/src/app/configuration-wizard/popover/popover-close.directive.ts new file mode 100644 index 000000000..70ac8d1ef --- /dev/null +++ b/src/app/configuration-wizard/popover/popover-close.directive.ts @@ -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 { + @Input('mifosxPopoverClose') popoverResult: T; + + /** + * @param {PopoverRef} popoverRef PopoverRef. + */ + constructor( + @Optional() private popoverRef: PopoverRef + ) {} + + @HostListener('click') onClick(): void { + if (!this.popoverRef) { + console.error('PopoverClose is not supported within a template'); + + return; + } + + this.popoverRef.close(this.popoverResult); + } +} diff --git a/src/app/configuration-wizard/popover/popover-config.ts b/src/app/configuration-wizard/popover/popover-config.ts new file mode 100644 index 000000000..8371665cb --- /dev/null +++ b/src/app/configuration-wizard/popover/popover-config.ts @@ -0,0 +1,11 @@ +/** + * Configuration for opening a popover with the Popover service. + */ +export interface PopoverConfig { + backdropClass: string; + data?: T; + disableClose: boolean; + panelClass: string | string[]; + arrowOffset?: number; + arrowSize?: number; +} diff --git a/src/app/configuration-wizard/popover/popover-ref.ts b/src/app/configuration-wizard/popover/popover-ref.ts new file mode 100644 index 000000000..92bc7d544 --- /dev/null +++ b/src/app/configuration-wizard/popover/popover-ref.ts @@ -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 { + private afterClosedSubject = new Subject(); + + /** + * @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} + */ + afterClosed(): Observable { + return this.afterClosedSubject.asObservable(); + } + + /** + * @returns {Observable} + */ + positionChanges(): Observable { + return this.positionStrategy.positionChanges; + } +} diff --git a/src/app/configuration-wizard/popover/popover.component.html b/src/app/configuration-wizard/popover/popover.component.html new file mode 100644 index 000000000..df859fcf2 --- /dev/null +++ b/src/app/configuration-wizard/popover/popover.component.html @@ -0,0 +1,3 @@ + + +
diff --git a/src/app/configuration-wizard/popover/popover.component.scss b/src/app/configuration-wizard/popover/popover.component.scss new file mode 100644 index 000000000..be793e201 --- /dev/null +++ b/src/app/configuration-wizard/popover/popover.component.scss @@ -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); +} diff --git a/src/app/configuration-wizard/popover/popover.component.spec.ts b/src/app/configuration-wizard/popover/popover.component.spec.ts new file mode 100644 index 000000000..c5392f6c2 --- /dev/null +++ b/src/app/configuration-wizard/popover/popover.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ PopoverComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(PopoverComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/configuration-wizard/popover/popover.component.ts b/src/app/configuration-wizard/popover/popover.component.ts new file mode 100644 index 000000000..9617f6107 --- /dev/null +++ b/src/app/configuration-wizard/popover/popover.component.ts @@ -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(componentPortal: ComponentPortal): ComponentRef { + console.log(this.portalOutlet.attachComponentPortal(componentPortal)); + return this.portalOutlet.attachComponentPortal(componentPortal); + } + + attachTemplatePortal(portal: TemplatePortal): EmbeddedViewRef { + return this.portalOutlet.attachTemplatePortal(portal); + } +} diff --git a/src/app/configuration-wizard/popover/popover.service.ts b/src/app/configuration-wizard/popover/popover.service.ts new file mode 100644 index 000000000..e1fb25678 --- /dev/null +++ b/src/app/configuration-wizard/popover/popover.service.ts @@ -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 | TemplateRef} componentOrTemplate ComponentType | TemplateRef. + * @param {ElementRef | HTMLElement} target ElementRef | HTMLElement. + * @param {string} position String. + * @param {Partial = {}} config Partial = {}. + */ + open(componentOrTemplate: ComponentType | TemplateRef, + target: ElementRef | HTMLElement, position: string, + backdrop: boolean, + config: Partial = {}): PopoverRef { + 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([ + // [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([ + // [POPOVER_DATA, config.data], + // [PopoverRef, popoverRef] + // ]) + // ) + ) + ); + + } + + return popoverRef; + } +} diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.html b/src/app/core/shell/breadcrumb/breadcrumb.component.html index 48bb085db..fab3e596b 100644 --- a/src/app/core/shell/breadcrumb/breadcrumb.component.html +++ b/src/app/core/shell/breadcrumb/breadcrumb.component.html @@ -1,6 +1,6 @@ + + +

Breadcrumbs

+

This will show the user's current location in the app.

+
+ + + +
+ diff --git a/src/app/core/shell/breadcrumb/breadcrumb.component.ts b/src/app/core/shell/breadcrumb/breadcrumb.component.ts index 48e31fa66..0199f7845 100644 --- a/src/app/core/shell/breadcrumb/breadcrumb.component.ts +++ b/src/app/core/shell/breadcrumb/breadcrumb.component.ts @@ -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; + /* Template for popover on breadcrumb */ + @ViewChild('templateBreadcrumb') templateBreadcrumb: TemplateRef; /** * 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(); } @@ -161,4 +173,48 @@ export class BreadcrumbComponent implements OnInit { }); } + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/core/shell/sidenav/sidenav.component.html b/src/app/core/shell/sidenav/sidenav.component.html index 6f88e20cc..d2c5df4ba 100644 --- a/src/app/core/shell/sidenav/sidenav.component.html +++ b/src/app/core/shell/sidenav/sidenav.component.html @@ -8,7 +8,7 @@
- Mifos + Mifos
@@ -19,7 +19,7 @@ {{ username }} -
+
@@ -31,10 +31,12 @@
+
Frequently Accessed
+
-
\ No newline at end of file +
+ + + +

This logo will return the user to the welcome page from anywhere in the system..

+
+ + + +
+ + + +

User Panel

+

This section contains user name, user photograph, user settings and sign out button.

+
+ + + +
+ + + +

Frequently Accessed

+

This contains shortcut to the frequently accessed components.

+
+ + + +
+ + + +

Dashboard

+

This will navigate the user to dashboard component.

+
+ + + +
+ + + +

Navigation

+

This will navigate the user to entity navigation screen.

+
+ + + +
+ + + +

Frequent Postings

+

Shortcut to Journal entry screen with accouting rules in place

+
+ + + +
+ + + +

Create Journal Entry

+

Shortcut to the create journal entry screen.

+
+ + + +
+ + + +

Chart of Accounts

+

Shortcut to chart of accounts screen to add/modify the ledger accounts.

+
+ + + +
+ diff --git a/src/app/core/shell/sidenav/sidenav.component.ts b/src/app/core/shell/sidenav/sidenav.component.ts index 4cb6aa594..7c706495c 100644 --- a/src/app/core/shell/sidenav/sidenav.component.ts +++ b/src/app/core/shell/sidenav/sidenav.component.ts @@ -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; + /* Template for popover on logo */ + @ViewChild('templateLogo') templateLogo: TemplateRef; + /* Refernce of chart of accounts */ + @ViewChild('chartOfAccounts') chartOfAccounts: ElementRef; + /* Template for popover on chart of accounts */ + @ViewChild('templateChartOfAccounts') templateChartOfAccounts: TemplateRef; + + /** * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/core/shell/toolbar/toolbar.component.html b/src/app/core/shell/toolbar/toolbar.component.html index 3f80721fa..61d412280 100644 --- a/src/app/core/shell/toolbar/toolbar.component.html +++ b/src/app/core/shell/toolbar/toolbar.component.html @@ -11,48 +11,62 @@ - +
+ +
- +
+ +
- - - - - +
+ +
+ +
+ +
+
+ +
@@ -119,3 +133,113 @@ Sign Out + + + +

Institution

+

This button will be used for individual accounts, groups and centers

+
+ + +
+ + + +

Accounting

+

This button opens the menu to access the system tools required by the accounting department.

+
+ + + +
+ + + +

Reports

+

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.

+
+ + + +
+ + + +

Admin

+

This is where the system is setup according to your organization including users, organization, products and templates.

+
+ + + +
+ + + +

Self Service

+

Dropdown provides access to self service user administrative portal, app configuration and task management.

+
+ + + +
+ + + +

Configuration Wizard

+

This buttons opens up the configuration wizard to help the user in initial setup and application tour.

+
+ + + +
+ + + +

Global Search

+

This will allow the user to quickly navigate the system selecting entity while searching makes the navigation more robust.

+
+ + + +
+ + + +

Language Selector

+

Organization can select a language here from the available languages here.

+
+ + + +
+ + + +

Theme Picker

+

This will be used to choose a theme as per organization will.

+
+ + + +
+ + + +

Notifications

+

This shows all the notifications.

+
+ + + +
+ + + +

Application Menu

+

This will have logged in user settings and sign out button.

+
+ + + +
+ diff --git a/src/app/core/shell/toolbar/toolbar.component.ts b/src/app/core/shell/toolbar/toolbar.component.ts index 14453c378..80c83bc6c 100644 --- a/src/app/core/shell/toolbar/toolbar.component.ts +++ b/src/app/core/shell/toolbar/toolbar.component.ts @@ -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; + /* Template for popover on institution */ + @ViewChild('templateInstitution') templateInstitution: TemplateRef; + /* Reference of appMenu */ + @ViewChild('appMenu') appMenu: ElementRef; + /* Template for popover on appMenu */ + @ViewChild('templateAppMenu') templateAppMenu: TemplateRef; + /** Subscription to breakpoint observer for handset. */ isHandset$: Observable = 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: ElementRef | 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); + }); + } + } } diff --git a/src/app/home/home.component.html b/src/app/home/home.component.html index 2fd9c9523..ef4f99cde 100644 --- a/src/app/home/home.component.html +++ b/src/app/home/home.component.html @@ -1,9 +1,11 @@
- +
+ +
@@ -17,7 +19,7 @@ - +
@@ -39,3 +41,23 @@
+ + +

Dashboard

+

This will navigate the user to the dashboard component.

+
+ + + +
+ + + +

Search Activity

+

This will navigate the user to the searched activity.

+
+ + + +
+ diff --git a/src/app/home/home.component.ts b/src/app/home/home.component.ts index d4f54bda0..f8ed515c8 100644 --- a/src/app/home/home.component.ts +++ b/src/app/home/home.component.ts @@ -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; + /* Template for popover on dashboard button */ + @ViewChild('templateButtonDashboard', {static: false}) templateButtonDashboard: TemplateRef; + /* Reference of search activity */ + @ViewChild('searchActivity', {static: false}) searchActivity: ElementRef; + /* Template for popover on search activity */ + @ViewChild('templateSearchActivity', {static: false}) templateSearchActivity: TemplateRef; + /** * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/organization/currencies/currencies.component.html b/src/app/organization/currencies/currencies.component.html index 46d5809a7..f0c39505a 100644 --- a/src/app/organization/currencies/currencies.component.html +++ b/src/app/organization/currencies/currencies.component.html @@ -1,20 +1,22 @@
+
+
-
+
- Filter + Filter
-
+
@@ -38,3 +40,31 @@ + + +

Add/Edit Currency

+

This will display a list of all currencies currently in use.

+
+ + + +
+ + + +

Search bar to filter currencies.

+
+ + + +
+ + + +

List of currencies available.

+
+ + + +
+ diff --git a/src/app/organization/currencies/currencies.component.ts b/src/app/organization/currencies/currencies.component.ts index a8816d434..ffe6f1fe8 100644 --- a/src/app/organization/currencies/currencies.component.ts +++ b/src/app/organization/currencies/currencies.component.ts @@ -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; + /* Template for popover on add/edit button */ + @ViewChild('templateButtonAddEdit') templateButtonAddEdit: TemplateRef; + /* Reference of currenies table */ + @ViewChild('tableCurrencies') tableCurrencies: ElementRef; + /* Template for currencies table */ + @ViewChild('templateTableCurrencies') templateTableCurrencies: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/organization/currencies/manage-currencies/manage-currencies.component.html b/src/app/organization/currencies/manage-currencies/manage-currencies.component.html index d6e64c2c2..61b10bdd3 100644 --- a/src/app/organization/currencies/manage-currencies/manage-currencies.component.html +++ b/src/app/organization/currencies/manage-currencies/manage-currencies.component.html @@ -2,7 +2,7 @@ -
+
@@ -47,3 +47,14 @@
+ + +

Add Currency Form

+

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: Currency Configuration

+
+ + + + +
+ diff --git a/src/app/organization/currencies/manage-currencies/manage-currencies.component.ts b/src/app/organization/currencies/manage-currencies/manage-currencies.component.ts index f177f7bf8..8ea56250e 100644 --- a/src/app/organization/currencies/manage-currencies/manage-currencies.component.ts +++ b/src/app/organization/currencies/manage-currencies/manage-currencies.component.ts @@ -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; + @ViewChild('templateCurrencyFormRef') templateCurrencyFormRef: TemplateRef; /** * 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, target: HTMLElement | ElementRef, 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']); + } + }); + } } diff --git a/src/app/organization/employees/create-employee/create-employee.component.html b/src/app/organization/employees/create-employee/create-employee.component.html index 59fa4b26a..7a105ccb2 100644 --- a/src/app/organization/employees/create-employee/create-employee.component.html +++ b/src/app/organization/employees/create-employee/create-employee.component.html @@ -6,8 +6,8 @@ -
- +
+ Office @@ -19,7 +19,7 @@ Office is required - + First Name @@ -75,3 +75,14 @@
+ + +

Create Employee

+

Click to start filling the details. * mark fields are neccessary.
For more details click: Manage Employees

+
+ + + + +
+ diff --git a/src/app/organization/employees/create-employee/create-employee.component.ts b/src/app/organization/employees/create-employee/create-employee.component.ts index fdaf32d5b..e284be1a5 100644 --- a/src/app/organization/employees/create-employee/create-employee.component.ts +++ b/src/app/organization/employees/create-employee/create-employee.component.ts @@ -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; + /* Template for popover on employee form */ + @ViewChild('templateCreateEmployeeForm') templateCreateEmployeeForm: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } }); } diff --git a/src/app/organization/employees/employees.component.html b/src/app/organization/employees/employees.component.html index b0a5f5cb0..2545ce94c 100644 --- a/src/app/organization/employees/employees.component.html +++ b/src/app/organization/employees/employees.component.html @@ -1,27 +1,30 @@
+
- +
+
+
-
+
Filter
-
+
@@ -63,4 +66,42 @@ - \ No newline at end of file + + + +

Import Employees

+

This button is used to import employee details from your local device.

+
+ + + +
+ + + +

Create Employee

+

This option allows you to create new employees in your organization.

+
+ + + +
+ + + +

Search bar to filter employees.

+
+ + + +
+ + + +

List of employees in the organization.

+
+ + + +
+ diff --git a/src/app/organization/employees/employees.component.ts b/src/app/organization/employees/employees.component.ts index 2e7b0db22..542d47e04 100644 --- a/src/app/organization/employees/employees.component.ts +++ b/src/app/organization/employees/employees.component.ts @@ -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; + /* Template for popover on import employees button */ + @ViewChild('templateButtonImportEmployees') templateButtonImportEmployees: TemplateRef; + /* Reference of employees table */ + @ViewChild('tableEmployees') tableEmployees: ElementRef; + /* Template for popover on employees table */ + @ViewChild('templateTableEmployees') templateTableEmployees: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/organization/holidays/edit-holiday/edit-holiday.component.html b/src/app/organization/holidays/edit-holiday/edit-holiday.component.html index 17803ff48..61bb84405 100644 --- a/src/app/organization/holidays/edit-holiday/edit-holiday.component.html +++ b/src/app/organization/holidays/edit-holiday/edit-holiday.component.html @@ -40,7 +40,7 @@ Repayment Scheduling Type - {{ repayments.value }} + {{ repayments.value }} diff --git a/src/app/organization/holidays/holidays.component.html b/src/app/organization/holidays/holidays.component.html index 87f77c41a..a6244ec96 100644 --- a/src/app/organization/holidays/holidays.component.html +++ b/src/app/organization/holidays/holidays.component.html @@ -1,15 +1,17 @@
+
+
-
+
Filter @@ -65,3 +67,22 @@
+ + +

Create Holiday

+

This option allows you to create holidays for different offices in your organization.

+
+ + + +
+ + + +

Search bar to filter holidays based on different offices.

+
+ + + +
+ diff --git a/src/app/organization/holidays/holidays.component.ts b/src/app/organization/holidays/holidays.component.ts index b3fc71b5d..f2f321786 100644 --- a/src/app/organization/holidays/holidays.component.ts +++ b/src/app/organization/holidays/holidays.component.ts @@ -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; + /* Template for popover on create holiday button */ + @ViewChild('templateButtonCreateHoliday') templateButtonCreateHoliday: TemplateRef; + /* Reference of filter */ + @ViewChild('filterRef') filterRef: ElementRef; + /* Template to show popover on filter */ + @ViewChild('templateFilterRef') templateFilterRef: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/organization/manage-funds/manage-funds.component.html b/src/app/organization/manage-funds/manage-funds.component.html index 9896bb815..dbba02ff2 100644 --- a/src/app/organization/manage-funds/manage-funds.component.html +++ b/src/app/organization/manage-funds/manage-funds.component.html @@ -2,7 +2,7 @@ -
+
@@ -14,9 +14,11 @@ - +
+ +
@@ -41,3 +43,15 @@
+ + +

Manage Funds

+

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: Manage Funds

+
+ + + + +
+ + diff --git a/src/app/organization/manage-funds/manage-funds.component.ts b/src/app/organization/manage-funds/manage-funds.component.ts index 048587328..0a506fa86 100644 --- a/src/app/organization/manage-funds/manage-funds.component.ts +++ b/src/app/organization/manage-funds/manage-funds.component.ts @@ -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; + /* Template for popover on funds form */ + @ViewChild('templateFundFormRef') templateFundFormRef: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + }); + } } diff --git a/src/app/organization/offices/create-office/create-office.component.html b/src/app/organization/offices/create-office/create-office.component.html index 64416a8d3..978a41e23 100644 --- a/src/app/organization/offices/create-office/create-office.component.html +++ b/src/app/organization/offices/create-office/create-office.component.html @@ -6,7 +6,7 @@ -
+
Office @@ -19,7 +19,7 @@ Parent Office - + {{ office.name }} @@ -57,3 +57,14 @@
+ + +

Create Office

+

Click to start filling the details. * mark fields are neccessary. For more details click: Manage Offices

+
+ + + + +
+ diff --git a/src/app/organization/offices/create-office/create-office.component.ts b/src/app/organization/offices/create-office/create-office.component.ts index e51b865e8..9cdac4a07 100644 --- a/src/app/organization/offices/create-office/create-office.component.ts +++ b/src/app/organization/offices/create-office/create-office.component.ts @@ -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; + /* template for popover on create office form */ + @ViewChild('templateCreateOfficeForm') templateCreateOfficeForm: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/organization/offices/offices.component.html b/src/app/organization/offices/offices.component.html index f347fa55a..92cdf820e 100644 --- a/src/app/organization/offices/offices.component.html +++ b/src/app/organization/offices/offices.component.html @@ -1,32 +1,38 @@
- +
+ +
+
+
+
+
-
+
Filter
-
+
@@ -60,3 +66,51 @@ + + +

Tree View

+

This will launch an alternative view which allows you to view the office hierarchy for your organization.

+
+ + + +
+ + + +

Create Office

+

This option allows you to create new offices in your organization.

+
+ + + +
+ + + +

Import Offices

+

This will launch the Bulk import/Offices page.

+
+ + + +
+ + + +

Search bar to filter offices.

+
+ + + +
+ + + +

List of offices in the organization.

+
+ + + +
+ diff --git a/src/app/organization/offices/offices.component.ts b/src/app/organization/offices/offices.component.ts index 2061cbaf4..12e232578 100644 --- a/src/app/organization/offices/offices.component.ts +++ b/src/app/organization/offices/offices.component.ts @@ -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; + /* Template for popover on tree view button */ + @ViewChild('templateButtonTreeView') templateButtonTreeView: TemplateRef; + /* Reference of offices table */ + @ViewChild('tableOffices') tableOffices: ElementRef; + /* Template for popover on offices table */ + @ViewChild('templateTableOffices') templateTableOffices: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/organization/organization.component.html b/src/app/organization/organization.component.html index 890520647..caee573d1 100644 --- a/src/app/organization/organization.component.html +++ b/src/app/organization/organization.component.html @@ -8,6 +8,7 @@ +
@@ -15,7 +16,9 @@

Manage Offices

Add new office or modify or deactivate office or modify hierarchy

 +
+
@@ -23,7 +26,9 @@

Manage Holidays

Define holidays for office

 +
+
@@ -31,6 +36,7 @@

Manage Employees

An employee represents loan officers with no access to systems

 +
@@ -80,6 +86,7 @@ +
@@ -87,8 +94,9 @@

Currency Configuration

Currencies available across organization for different products

 +
- +
@@ -96,6 +104,7 @@

Manage Funds

Funds are associated with loans

 +
@@ -113,6 +122,7 @@

Manage Tellers / Cashiers and Cash Allocation and Settlement

 +
@@ -120,6 +130,7 @@

Working Days

Define working days and configure behaviour of payments due on holidays

 +
@@ -162,3 +173,63 @@ + + +

Manage Offices

+

The Manage Offices page allows you to create, edit and add the offices within your organization.

+
+ + + +
+ + + +

Currency Configuration

+

This section allows an organization to define what currencies will be used throughout their interactions within the Mifos X system.

+
+ + + +
+ + + +

Manage Holidays

+

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.

+
+ + + +
+ + + +

Manage Employees

+

With this option, you may view, edit and/or delete your organization's employees.

+
+ + + +
+ + + +

Working Days

+

Working days page allows you to define which days of the week are working days.

+
+ + + +
+ + + +

Manage Funds

+

This allows you to manage funds associated with loans.

+
+ + + +
+ diff --git a/src/app/organization/organization.component.ts b/src/app/organization/organization.component.ts index 46e746deb..7d630d6a7 100644 --- a/src/app/organization/organization.component.ts +++ b/src/app/organization/organization.component.ts @@ -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; + /* Template for popover on manage offices */ + @ViewChild('templateOffice') templateOffice: TemplateRef; + /* Reference of add/edit currency */ + @ViewChild('addEditCurrency') addEditCurrency: ElementRef; + /* Template for popover on add/edit currency */ + @ViewChild('templateAddEditCurrency') templateAddEditCurrency: TemplateRef; + /* Reference of manage holidays */ + @ViewChild('holidays') holidays: ElementRef; + /* Template for popover on manage holidays */ + @ViewChild('templateHolidays') templateHolidays: TemplateRef; + /* Reference of manage employees */ + @ViewChild('employee') employee: ElementRef; + /* Template for popover on manage employee */ + @ViewChild('templateEmployee') templateEmployee: TemplateRef; + /* Reference of define working days */ + @ViewChild('workingDays') workingDays: ElementRef; + /* Template for popover on define working days */ + @ViewChild('templateWorkingDays') templateWorkingDays: TemplateRef; + /* Reference of manage funds */ + @ViewChild('manageFunds') manageFunds: ElementRef; + /* Template for popover on manage funds */ + @ViewChild('templateManageFunds') templateManageFunds: TemplateRef; + + /** + * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/organization/tellers/cashiers/cashiers.component.html b/src/app/organization/tellers/cashiers/cashiers.component.html index cc558ee1d..a5ca8091f 100644 --- a/src/app/organization/tellers/cashiers/cashiers.component.html +++ b/src/app/organization/tellers/cashiers/cashiers.component.html @@ -49,7 +49,7 @@ + diff --git a/src/app/organization/tellers/cashiers/transactions/transactions.component.html b/src/app/organization/tellers/cashiers/transactions/transactions.component.html index f886015ed..671a6bd5f 100644 --- a/src/app/organization/tellers/cashiers/transactions/transactions.component.html +++ b/src/app/organization/tellers/cashiers/transactions/transactions.component.html @@ -67,7 +67,7 @@ Filter - + Select Currency @@ -87,41 +87,41 @@ - + - + - + - + - + - + - +
Date {{ transaction.txnDate | dateFormat }} Transactions {{ transaction.txnType.value }} Allocation ({{cashierData.sumCashAllocation | number}}) {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | number) : '-' }} Cash In ({{cashierData.sumInwardCash | number}}) {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | number) : '-' }} Cash Out ({{cashierData.sumOutwardCash | number}}) {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | number) : '-' }} Settlement ({{cashierData.sumCashSettlement | number}}) {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | number) : '-' }}
- - + +
- +
diff --git a/src/app/organization/tellers/teller-transaction-template.resolver.ts b/src/app/organization/tellers/teller-transaction-template.resolver.ts new file mode 100644 index 000000000..507b1771b --- /dev/null +++ b/src/app/organization/tellers/teller-transaction-template.resolver.ts @@ -0,0 +1,32 @@ +/** Angular Imports */ +import { Injectable } from '@angular/core'; +import { Resolve, ActivatedRouteSnapshot } from '@angular/router'; + +/** rxjs Imports */ +import { Observable } from 'rxjs'; + +/** Custom Services */ +import { OrganizationService } from 'app/organization/organization.service'; + +/** + * Cashier transaction data resolver. + */ +@Injectable() +export class CashierTransactionTemplateResolver implements Resolve { + + /** + * @param {OrganizationService} organizationService Organization service. + */ + constructor(private organizationService: OrganizationService) {} + + /** + * Returns the cashier transaction data. + * @returns {Observable} + */ + resolve(route: ActivatedRouteSnapshot): Observable { + const cashierId = route.parent.paramMap.get('id'); + const tellerId = route.parent.parent.paramMap.get('id'); + return this.organizationService.getCashierTransactionTemplate(tellerId, cashierId); + } + +} diff --git a/src/app/organization/working-days/working-days.component.html b/src/app/organization/working-days/working-days.component.html index d10feff08..730c066ff 100644 --- a/src/app/organization/working-days/working-days.component.html +++ b/src/app/organization/working-days/working-days.component.html @@ -6,7 +6,7 @@ -
+
Working Days @@ -46,3 +46,14 @@
+ + +

Working Days

+

Click (Define Working Days) to define working days. For more details click: Working Days

+
+ + + + +
+ diff --git a/src/app/organization/working-days/working-days.component.ts b/src/app/organization/working-days/working-days.component.ts index 1923f96ba..0bd2f91f0 100644 --- a/src/app/organization/working-days/working-days.component.ts +++ b/src/app/organization/working-days/working-days.component.ts @@ -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; + /* Template for popover on define working days form */ + @ViewChild('templateWorkingDaysFormRef') templateWorkingDaysFormRef: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + }); + } } diff --git a/src/app/products/charges/charges.component.html b/src/app/products/charges/charges.component.html index 99511e34e..f778bb27a 100644 --- a/src/app/products/charges/charges.component.html +++ b/src/app/products/charges/charges.component.html @@ -1,20 +1,22 @@
- +
+ +
-
+
Filter
-
+
@@ -55,3 +57,31 @@ + + +

Create Charge

+

This option allows you to create new charges. It supports Loan charges, Savings & deposits charges and Client charges.

+
+ + + +
+ + + +

Search bar to filter charges.

+
+ + + +
+ + + +

List of charges in the organization. For more details click: Charges

+
+ + + +
+ diff --git a/src/app/products/charges/charges.component.ts b/src/app/products/charges/charges.component.ts index 32c352a3a..283ac35de 100644 --- a/src/app/products/charges/charges.component.ts +++ b/src/app/products/charges/charges.component.ts @@ -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; + /* Template for popover on create charges button */ + @ViewChild('templateButtonCreateCharge') templateButtonCreateCharge: TemplateRef; + /* Reference of charges table */ + @ViewChild('chargesTable') chargesTable: ElementRef; + /* Template for popover on charges table */ + @ViewChild('templateChargesTable') templateChargesTable: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html index f5050814a..ea163ba7d 100644 --- a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html +++ b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.html @@ -1,20 +1,22 @@
+
+
-
+
Filter
-
+
@@ -38,3 +40,31 @@ + + +

Create fixed deposit product

+

This option allows you to create new fixed deposit product.

+
+ + + +
+ + + +

Search bar to filter fixed deposit products.

+
+ + + +
+ + + +

List of fixed deposit products in the organization. For more details click: Fixed Deposit Products

+
+ + + +
+ diff --git a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.ts b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.ts index 0ac289d4c..c14d6a5d5 100644 --- a/src/app/products/fixed-deposit-products/fixed-deposit-products.component.ts +++ b/src/app/products/fixed-deposit-products/fixed-deposit-products.component.ts @@ -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; + /* Template for popover on create fixed product button */ + @ViewChild('templateButtonCreateFixedProduct') templateButtonCreateFixedProduct: TemplateRef; + /* Reference of fixed deposit products table */ + @ViewChild('fixedProductsTable') fixedProductsTable: ElementRef; + /* Template for popover on fixed deposit products table */ + @ViewChild('templateFixedProductsTable') templateFixedProductsTable: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/products/loan-products/loan-products.component.html b/src/app/products/loan-products/loan-products.component.html index 5b5a1be71..55a29b18b 100644 --- a/src/app/products/loan-products/loan-products.component.html +++ b/src/app/products/loan-products/loan-products.component.html @@ -1,20 +1,22 @@
+
+
-
+
Filter
-
+
@@ -52,3 +54,31 @@ + + +

Create loan product

+

This option allows you to create new loan product.

+
+ + + +
+ + + +

Search bar to filter loan products.

+
+ + + +
+ + + +

List of loan products in the organization. For more details click: Loan Products

+
+ + + +
+ diff --git a/src/app/products/loan-products/loan-products.component.ts b/src/app/products/loan-products/loan-products.component.ts index 9efa2a442..f18a2123c 100644 --- a/src/app/products/loan-products/loan-products.component.ts +++ b/src/app/products/loan-products/loan-products.component.ts @@ -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; + /* Template for popover on create loan product button */ + @ViewChild('templateButtonCreateLoanProduct') templateButtonCreateLoanProduct: TemplateRef; + /* Reference of loan products table */ + @ViewChild('loanProductsTable') loanProductsTable: ElementRef; + /* Template for popover on loan products table */ + @ViewChild('templateLoanProductsTable') templateLoanProductsTable: TemplateRef; + + /** + * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/products/products.component.html b/src/app/products/products.component.html index c79b835e3..81211cdfa 100644 --- a/src/app/products/products.component.html +++ b/src/app/products/products.component.html @@ -8,6 +8,7 @@ +
@@ -15,7 +16,9 @@

Loan Products

Add new loan product or modify or inactivate loan product

 +
+
@@ -23,7 +26,9 @@

Savings Products

Add new savings product or modify or inactivate savings product

 +
+
@@ -31,7 +36,9 @@

Share Products

Add new share product or modify or inactivate share product

 +
+
@@ -39,6 +46,7 @@

Charges

Define charges/penalties for loan products, savings and deposit products

 +
@@ -72,6 +80,7 @@

Defines rules for taking multiple rules

 +
@@ -79,7 +88,9 @@

Fixed Deposit Products

Add, modify or inactivate a Fixed deposit product

 +
+
@@ -87,6 +98,7 @@

Recurring Deposit Products

Add, modify or inactivate a Recurring Deposit product

 +
@@ -113,3 +125,63 @@ + + +

Charges

+

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

+
+ + + +
+ + + +

Loan Products

+

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.

+
+ + + +
+ + + +

Savings Products

+

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.

+
+ + + +
+ + + +

Share Products

+

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.

+
+ + + +
+ + + +

Fixed Deposit Products

+

Fixed Deposit Products defines the rules, default settings, and constraints for a financial institution's
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.

+
+ + + +
+ + + +

Recurring Deposit Products

+

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.

+
+ + + +
+ diff --git a/src/app/products/products.component.ts b/src/app/products/products.component.ts index bfe1a472f..b7b4c8d1f 100644 --- a/src/app/products/products.component.ts +++ b/src/app/products/products.component.ts @@ -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; + /* Template for popover on charges */ + @ViewChild('templateCharges') templateCharges: TemplateRef; + /* Reference of loan products */ + @ViewChild('loanProducts') loanProducts: ElementRef; + /* Template for popover on loan products */ + @ViewChild('templateLoanProducts') templateLoanProducts: TemplateRef; + /* Reference of saving products */ + @ViewChild('savingsProducts') savingsProducts: ElementRef; + /* Template for popover on savings products */ + @ViewChild('templateSavingsProducts') templateSavingsProducts: TemplateRef; + /* Reference of share products */ + @ViewChild('shareProducts') shareProducts: ElementRef; + /* Template for popover on share products */ + @ViewChild('templateShareProducts') templateShareProducts: TemplateRef; + /* Reference of fixed deposit products */ + @ViewChild('fixedDepositProducts') fixedDepositProducts: ElementRef; + /* Template for popover on fixed deposit products */ + @ViewChild('templateFixedDepositProducts') templateFixedDepositProducts: TemplateRef; + /* Reference of recurring deposit products */ + @ViewChild('recurringDepositProducts') recurringDepositProducts: ElementRef; + /* Template for popover on recurring deposit products */ + @ViewChild('templateRecurringDepositProducts') templateRecurringDepositProducts: TemplateRef; + + /** + * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/products/products.module.ts b/src/app/products/products.module.ts index 7872fef26..04407ea9b 100644 --- a/src/app/products/products.module.ts +++ b/src/app/products/products.module.ts @@ -221,6 +221,9 @@ import { EditBucketComponent } from './manage-delinquency-buckets/delinquency-bu CreateBucketComponent, EditBucketComponent ], - providers: [ ] + entryComponents: [ + DepositProductIncentiveFormDialogComponent, + FloatingRatePeriodDialogComponent + ], }) export class ProductsModule { } diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html index a12975f4e..386f1f321 100644 --- a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html +++ b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.html @@ -1,20 +1,22 @@
+
+
-
+
Filter
-
+
@@ -38,3 +40,31 @@ + + +

Create recurring deposit product

+

This option allows you to create new recurring product.

+
+ + + +
+ + + +

Search bar to filter recurring deposit products.

+
+ + + +
+ + + +

List of recurring deposit products in the organization. For more details click: Recurring Deposit Products

+
+ + + +
+ diff --git a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.ts b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.ts index 69df9af06..88a60cca8 100644 --- a/src/app/products/recurring-deposit-products/recurring-deposit-products.component.ts +++ b/src/app/products/recurring-deposit-products/recurring-deposit-products.component.ts @@ -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; + /* Template for popover on create recurring deposit product button */ + @ViewChild('templateButtonCreateRecurringProduct') templateButtonCreateRecurringProduct: TemplateRef; + /* Reference of recurring deposit products table */ + @ViewChild('recurringProductsTable') recurringProductsTable: ElementRef; + /* Template for popover on recurring deposit products table */ + @ViewChild('templateRecurringProductsTable') templateRecurringProductsTable: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + }); + } } diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html index c1619ec09..d4680dfa8 100644 --- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html +++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.html @@ -140,31 +140,31 @@

Interest Rate Charts

- + - +
- +
Name: {{ recurringDepositProduct.activeChart.name }}
- +
Valid from Date: {{ recurringDepositProduct.activeChart.fromDate | dateFormat }}
- +
End Date: {{ recurringDepositProduct.activeChart.endDate | dateFormat }}
- +
Description: {{ recurringDepositProduct.activeChart.description }}
- +
Primary Grouping by Amount: {{ recurringDepositProduct.activeChart.isPrimaryGroupingByAmount ? 'Yes' : 'No' }} @@ -231,34 +231,34 @@
@@ -298,9 +298,11 @@
- +

Incentives

- + - + - + - + - + - + - + - + - +
Entity Type {{ incentive.entityType | find:recurringDepositProductTemplate.chartTemplate.entityTypeOptions:'id':'value' }} Attribute Name {{ incentive.attributeName | find:recurringDepositProductTemplate.chartTemplate.attributeNameOptions:'id':'value' }} Condition Type {{ incentive.conditionType | find:recurringDepositProductTemplate.chartTemplate.conditionTypeOptions:'id':'value' }} Attribute Value @@ -268,26 +268,26 @@ {{ incentive.attributeValue | find:recurringDepositProductTemplate.chartTemplate.clientClassificationOptions:'id':'name' }} Incentive Type {{ incentive.incentiveType | find:recurringDepositProductTemplate.chartTemplate.incentiveTypeOptions:'id':'value'}} Amount {{ incentive.amount }}
- +
- + + +
- +
@@ -356,16 +358,16 @@
- +

Assets

- +
Saving reference: {{ recurringDepositProduct.accountingMappings.savingsReferenceAccount.name }}

Liabilities

- +
Saving control: {{ recurringDepositProduct.accountingMappings.savingsControlAccount.name }} @@ -374,14 +376,16 @@

Expenses

- +
Interest on savings: {{ recurringDepositProduct.accountingMappings.interestOnSavingsAccount.name }} + Write-off: + {{ recurringDepositProduct.accountingMappings.writeOffAccount.name }}

Income

- +
Income from fees: {{ recurringDepositProduct.accountingMappings.incomeFromFeeAccount.name }} @@ -392,96 +396,96 @@

Advanced Accounting Rules

- + - +

Configure Fund Sources for Payment Channels

- + - + - + - + - +
Payment Type {{ paymentFundSource.paymentType.name }} Fund Source {{ paymentFundSource.fundSourceAccount.name }}
- - + +
- - + +

Fees to Specific Income Accounts

- + - + - + - + - +
Fees {{ feesIncome.charge.name }} Income Account {{ feesIncome.incomeAccount.name }}
- +
- +
- +

Penalties to Specific Income Accounts

- + - + - + - + - +
Penalty {{ penaltyIncome.charge.name }} Income Account {{ penaltyIncome.incomeAccount.name }}
- +
- +
diff --git a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.scss b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.scss index 71b93450a..edcf8f5c1 100644 --- a/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.scss +++ b/src/app/products/recurring-deposit-products/view-recurring-deposit-product/view-recurring-deposit-product.component.scss @@ -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; + } diff --git a/src/app/products/saving-products/saving-products.component.html b/src/app/products/saving-products/saving-products.component.html index 1c2495873..76f5bbf98 100644 --- a/src/app/products/saving-products/saving-products.component.html +++ b/src/app/products/saving-products/saving-products.component.html @@ -1,20 +1,22 @@
+
+
-
+
Filter
-
+
@@ -38,3 +40,31 @@ + + +

Create saving product

+

This option allows you to create new savings product.

+
+ + + +
+ + + +

Search bar to filter saving products.

+
+ + + +
+ + + +

List of saving products in the organization. For more details click: Savings Products

+
+ + + +
+ diff --git a/src/app/products/saving-products/saving-products.component.ts b/src/app/products/saving-products/saving-products.component.ts index 04964ad59..da0c2670e 100644 --- a/src/app/products/saving-products/saving-products.component.ts +++ b/src/app/products/saving-products/saving-products.component.ts @@ -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; + /* Template for popover on creare saving products button */ + @ViewChild('templateButtonSavingProduct') templateButtonSavingProduct: TemplateRef; + /* Reference of saving products table */ + @ViewChild('savingProductTable') savingProductTable: ElementRef; + /* Template for popover on saving products table */ + @ViewChild('templateSavingProductTable') templateSavingProductTable: TemplateRef; + + /** + * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/products/share-products/share-products.component.html b/src/app/products/share-products/share-products.component.html index 2e8188a5a..ea34532fa 100644 --- a/src/app/products/share-products/share-products.component.html +++ b/src/app/products/share-products/share-products.component.html @@ -1,20 +1,22 @@
+
+
-
+
Filter
-
+
@@ -43,3 +45,31 @@ + + +

Create share product

+

This option allows you to create new share product.

+
+ + + +
+ + + +

Search bar to filter share products.

+
+ + + +
+ + + +

List of share products in the organization. For more details click: Share Products

+
+ + + +
+ diff --git a/src/app/products/share-products/share-products.component.ts b/src/app/products/share-products/share-products.component.ts index 8b4fc7800..06730c43b 100644 --- a/src/app/products/share-products/share-products.component.ts +++ b/src/app/products/share-products/share-products.component.ts @@ -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; + /* Template for popover on create share product button */ + @ViewChild('templateButtonCreateShareProduct') templateButtonCreateShareProduct: TemplateRef; + /* Reference of share products table */ + @ViewChild('shareProductsTable') shareProductsTable: ElementRef; + /* Template for popover on share products table */ + @ViewChild('templateShareProductsTable') templateShareProductsTable: TemplateRef; + + /** + * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts index 7854e0bf4..4f03e5063 100644 --- a/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts +++ b/src/app/savings/savings-account-stepper/savings-account-details-step/savings-account-details-step.component.ts @@ -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() + }); } } } diff --git a/src/app/shared/icons.module.ts b/src/app/shared/icons.module.ts index 7c64154f7..b460462fe 100644 --- a/src/app/shared/icons.module.ts +++ b/src/app/shared/icons.module.ts @@ -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 ); } diff --git a/src/app/system/codes/codes.component.html b/src/app/system/codes/codes.component.html index 45e9631ee..6b22ea0b4 100644 --- a/src/app/system/codes/codes.component.html +++ b/src/app/system/codes/codes.component.html @@ -1,20 +1,22 @@
- +
+ +
-
+
Filter
-
+
@@ -37,3 +39,31 @@ + + +

Manage Codes

+

To create additional codes.

+
+ + + +
+ + + +

Search bar to filter codes.

+
+ + + +
+ + + +

List of all codes in the Mifos system for your organization.

+
+ + + +
+ diff --git a/src/app/system/codes/codes.component.ts b/src/app/system/codes/codes.component.ts index 5a7409cf6..d1334db79 100644 --- a/src/app/system/codes/codes.component.ts +++ b/src/app/system/codes/codes.component.ts @@ -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; + /* Template for popover on create code button */ + @ViewChild('templateButtonCreateCode') templateButtonCreateCode: TemplateRef; + /* Reference of codes table */ + @ViewChild('tableCodes') tableCodes: ElementRef; + /* Template for popover on codes table */ + @ViewChild('templateTableCodes') templateTableCodes: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } + } diff --git a/src/app/system/codes/create-code/create-code.component.html b/src/app/system/codes/create-code/create-code.component.html index 4a84c0097..9b29cd5a5 100644 --- a/src/app/system/codes/create-code/create-code.component.html +++ b/src/app/system/codes/create-code/create-code.component.html @@ -6,7 +6,7 @@ -
+
Code Name @@ -30,3 +30,14 @@
+ + +

Create Code

+

To create code, click on create code and enter the code name.
For more details click: Manage Codes

+
+ + + + +
+ diff --git a/src/app/system/codes/create-code/create-code.component.ts b/src/app/system/codes/create-code/create-code.component.ts index a9f283a3b..e1f194c09 100644 --- a/src/app/system/codes/create-code/create-code.component.ts +++ b/src/app/system/codes/create-code/create-code.component.ts @@ -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; + /* Template for popover on create code form */ + @ViewChild('templateCodeFormRef') templateCodeFormRef: TemplateRef; + /** * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html b/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html index c0b913b64..30690e528 100644 --- a/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html +++ b/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.html @@ -1,13 +1,13 @@
-
+
Filter
-
+
Code Name
@@ -54,3 +54,21 @@ + + +

Search bar to filter configurations.

+
+ + + +
+ + + +

Global Configuration options and their current status. For more details click: Global Configurations

+
+ + + +
+ diff --git a/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts b/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts index 2bf925cf3..e50e0d72b 100644 --- a/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts +++ b/src/app/system/configurations/global-configurations-tab/global-configurations-tab.component.ts @@ -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; + /* Template for popover on filter */ + @ViewChild('templateFilter') templateFilter: TemplateRef; + /* Reference of configurations table */ + @ViewChild('configurationsTable') configurationsTable: ElementRef; + /* Template for popover on configurations table */ + @ViewChild('templateConfigurationsTable') templateConfigurationsTable: TemplateRef; + /** * 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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, 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']); + } } diff --git a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html index 6b6cfede2..491f6bdb4 100644 --- a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html +++ b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html @@ -1,8 +1,11 @@
- + +
+ +
@@ -13,7 +16,7 @@
-
+
@@ -54,3 +57,22 @@
+ + +

Edit

+

To add or remove a task from the Maker-Checker list.

+
+ + + +
+ + + +

List of all maker checker tasks. For more details click: Configure Maker-Checker Tasks

+
+ + + +
+ diff --git a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.ts b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.ts index de3b3de10..980057dd5 100644 --- a/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.ts +++ b/src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.ts @@ -1,7 +1,11 @@ -import { Component, OnInit } 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 { FormGroup, FormBuilder, Validators } from '@angular/forms'; import * as _ from 'lodash'; + +/** Custom Services */ +import { PopoverService } from '../../configuration-wizard/popover/popover.service'; +import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service'; import { SystemService } from '../system.service'; @Component({ @@ -9,7 +13,7 @@ import { SystemService } from '../system.service'; templateUrl: './configure-maker-checker-tasks.component.html', styleUrls: ['./configure-maker-checker-tasks.component.scss'] }) -export class ConfigureMakerCheckerTasksComponent implements OnInit { +export class ConfigureMakerCheckerTasksComponent implements OnInit, AfterViewInit { permissionsData: any; groupings: string[] = []; @@ -30,9 +34,29 @@ export class ConfigureMakerCheckerTasksComponent implements OnInit { permissions: { code: string }[] }[]; + /* Reference of edit button */ + @ViewChild('buttonEdit') buttonEdit: ElementRef; + /* Template for popover on edit button */ + @ViewChild('templateButtonEdit') templateButtonEdit: TemplateRef; + /* Reference of maker checker taks table */ + @ViewChild('mcTable') mcTable: ElementRef; + /* Template for popover on maker checker taks table */ + @ViewChild('templateMcTable') templateMcTable: TemplateRef; + + /** + * @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 route: ActivatedRoute, private systemService: SystemService, - private formBuilder: FormBuilder, ) { + private formBuilder: FormBuilder, + private router: Router, + private configurationWizardService: ConfigurationWizardService, + private popoverService: PopoverService ) { this.route.data.subscribe((data: { permissions: any }) => { this.permissionsData = data.permissions; }); @@ -160,4 +184,50 @@ export class ConfigureMakerCheckerTasksComponent implements OnInit { }); } + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showMakerCheckerTablePage === true) { + setTimeout(() => { + this.showPopover(this.templateButtonEdit, this.buttonEdit.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showMakerCheckerTableList === true) { + setTimeout(() => { + this.showPopover(this.templateMcTable, this.mcTable.nativeElement, 'top', true); + }); + } + } + + /** + * Next Step (Global Configurations System Page) Configuration Wizard. + */ + nextStep() { + this.configurationWizardService.showMakerCheckerTablePage = false; + this.configurationWizardService.showMakerCheckerTableList = false; + this.configurationWizardService.showConfigurations = true; + this.router.navigate(['/system']); + } + + /** + * Previous Step (Maker Checker Tasks System Page) Configuration Wizard. + */ + previousStep() { + this.configurationWizardService.showMakerCheckerTablePage = false; + this.configurationWizardService.showMakerCheckerTableList = false; + this.configurationWizardService.showMakerCheckerTable = true; + this.router.navigate(['/system']); + } } diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html index 68f86efb0..056e96d19 100644 --- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html +++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.html @@ -2,7 +2,7 @@ -
+ @@ -116,3 +116,14 @@
+ + +

Create Datatable

+

Click to start filling the details. * mark fields are neccessary. For more details click: Manage Datatables

+
+ + + + +
+ diff --git a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts index 5053cf803..7f95edf8a 100644 --- a/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts +++ b/src/app/system/manage-data-tables/create-data-table/create-data-table.component.ts @@ -1,5 +1,5 @@ /** Angular Imports */ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { ActivatedRoute, Router } from '@angular/router'; import { MatDialog } from '@angular/material/dialog'; @@ -9,6 +9,8 @@ import { MatTableDataSource } from '@angular/material/table'; /** Custom Services */ import { SystemService } from '../../system.service'; +import { PopoverService } from '../../../configuration-wizard/popover/popover.service'; +import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service'; /** Data Imports */ import { appTableData, entitySubTypeData } from '../app-table-data'; @@ -17,6 +19,9 @@ import { appTableData, entitySubTypeData } from '../app-table-data'; import { ColumnDialogComponent } from '../column-dialog/column-dialog.component'; import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.component'; +/** Custom Dialog Component */ +import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component'; + /** * Create Data Table Component. */ @@ -25,7 +30,7 @@ import { DeleteDialogComponent } from 'app/shared/delete-dialog/delete-dialog.co templateUrl: './create-data-table.component.html', styleUrls: ['./create-data-table.component.scss'] }) -export class CreateDataTableComponent implements OnInit { +export class CreateDataTableComponent implements OnInit, AfterViewInit { /** Data Table Form */ dataTableForm: FormGroup; @@ -62,6 +67,11 @@ export class CreateDataTableComponent implements OnInit { /** Sorter for columns table. */ @ViewChild(MatSort, { static: true }) sort: MatSort; + /* Reference of create datatables form */ + @ViewChild('dataTableFormRef') dataTableFormRef: ElementRef; + /* Template for popover on create datatables form */ + @ViewChild('templateDataTableFormRef') templateDataTableFormRef: TemplateRef; + /** * Retrieves the column codes data from `resolve`. * @param {FormBuilder} formBuilder Form Builder. @@ -69,12 +79,16 @@ export class CreateDataTableComponent implements OnInit { * @param {ActivatedRoute} route Activated Route. * @param {Router} router Router for navigation. * @param {MatDialog} dialog Dialog Reference. + * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service. + * @param {PopoverService} popoverService PopoverService. */ constructor(private formBuilder: FormBuilder, private systemService: SystemService, private route: ActivatedRoute, private router: Router, - private dialog: MatDialog) { + private dialog: MatDialog, + private configurationWizardService: ConfigurationWizardService, + private popoverService: PopoverService) { this.route.data.subscribe((data: { columnCodes: any }) => { this.dataForDialog.columnCodes = data.columnCodes; }); @@ -189,9 +203,81 @@ export class CreateDataTableComponent implements OnInit { */ submit() { this.dataTableForm.value.columns = this.columnData; - this.systemService.createDataTable(this.dataTableForm.value) - .subscribe((response: any) => { + this.systemService.createDataTable(this.dataTableForm.value).subscribe((response: any) => { + if (this.configurationWizardService.showDatatablesForm === true) { + this.configurationWizardService.showDatatablesForm = false; + this.openDialog(); + } else { this.router.navigate(['../', response.resourceIdentifier], { relativeTo: this.route }); + } + }); + } + + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showDatatablesForm === true) { + setTimeout(() => { + this.showPopover(this.templateDataTableFormRef, this.dataTableFormRef.nativeElement, 'bottom', true); }); + } + } + + /** + * Next Step (System Codes Page) Configuration Wizard. + */ + nextStep() { + this.configurationWizardService.showDatatablesForm = false; + this.configurationWizardService.showSystemCodes = true; + this.router.navigate(['/system']); + } + + /** + * Previous Step (Manage Datatables Page) Configuration Wizard. + */ + previousStep() { + this.configurationWizardService.showDatatablesForm = false; + this.configurationWizardService.showDatatablesList = true; + this.router.navigate(['/system/data-tables']); + } + + /** + * Opens dialog if the user wants to create more datatables Configuration Wizard. + */ + openDialog() { + const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, { + data: { + stepName: 'data table' + }, + }); + continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => { + if (response.step === 1) { + this.configurationWizardService.showDatatablesForm = false; + this.router.navigate(['../'], { relativeTo: this.route }); + } else if (response.step === 2) { + this.configurationWizardService.showDatatablesForm = true; + this.router.routeReuseStrategy.shouldReuseRoute = () => false; + this.router.onSameUrlNavigation = 'reload'; + this.router.navigate(['/organization/data-tables/create']); + } else if (response.step === 3) { + this.configurationWizardService.showDatatablesForm = false; + this.configurationWizardService.showSystemCodes = true; + this.router.navigate(['/system']); + } + }); } } + + diff --git a/src/app/system/manage-data-tables/manage-data-tables.component.html b/src/app/system/manage-data-tables/manage-data-tables.component.html index 0804fe829..4045f4d5f 100644 --- a/src/app/system/manage-data-tables/manage-data-tables.component.html +++ b/src/app/system/manage-data-tables/manage-data-tables.component.html @@ -1,20 +1,22 @@
- +
+ +
-
+
Filter
-
+
@@ -38,3 +40,31 @@ + + +

Create Data Table

+

This will launch a page that will allow you to create a new data table.

+
+ + + +
+ + + +

Search bar to filter datatables.

+
+ + + +
+ + + +

List of all currently available data tables.

+
+ + + +
+ diff --git a/src/app/system/manage-data-tables/manage-data-tables.component.ts b/src/app/system/manage-data-tables/manage-data-tables.component.ts index c86aaf565..800ff6481 100644 --- a/src/app/system/manage-data-tables/manage-data-tables.component.ts +++ b/src/app/system/manage-data-tables/manage-data-tables.component.ts @@ -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'; + /** * Manage Data Tables component. */ @@ -16,7 +20,7 @@ import { of } from 'rxjs'; templateUrl: './manage-data-tables.component.html', styleUrls: ['./manage-data-tables.component.scss'] }) -export class ManageDataTablesComponent implements OnInit { +export class ManageDataTablesComponent implements OnInit, AfterViewInit { /** Data table data. */ dataTableData: any; @@ -30,11 +34,26 @@ export class ManageDataTablesComponent implements OnInit { /** Sorter for manage data tables table. */ @ViewChild(MatSort, { static: true }) sort: MatSort; + /* Reference of create datatables button */ + @ViewChild('createDatatableRef') createDatatableRef: ElementRef; + /* Template for popover on create datatables button */ + @ViewChild('templateCreateDatatableRef') templateCreateDatatableRef: TemplateRef; + /* Reference of list of datatables */ + @ViewChild('datatablesList') datatablesList: ElementRef; + /* Template for popover on list of datatables */ + @ViewChild('templateDatatablesList') templateDatatablesList: TemplateRef; + /** * Retrieves the data tables 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: { dataTables: any }) => { this.dataTableData = data.dataTables; }); @@ -64,4 +83,50 @@ export class ManageDataTablesComponent implements OnInit { this.dataSource.sort = this.sort; } + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showDatatablesPage === true) { + setTimeout(() => { + this.showPopover(this.templateCreateDatatableRef, this.createDatatableRef.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showDatatablesList === true) { + setTimeout(() => { + this.showPopover(this.templateDatatablesList, this.datatablesList.nativeElement, 'top', true); + }); + } + } + + /** + * Next Step (Create data tables Page) Configuration Wizard. + */ + nextStep() { + this.configurationWizardService.showDatatablesPage = false; + this.configurationWizardService.showDatatablesList = false; + this.configurationWizardService.showDatatablesForm = true; + this.router.navigate(['/system/data-tables/create']); + } + + /** + * Previous Step (Manage Datables system Page) Configuration Wizard. + */ + previousStep() { + this.configurationWizardService.showDatatablesPage = false; + this.configurationWizardService.showDatatablesList = false; + this.configurationWizardService.showDatatables = true; + this.router.navigate(['/system']); + } } diff --git a/src/app/system/manage-reports/manage-reports.component.html b/src/app/system/manage-reports/manage-reports.component.html index fc162ab7c..3a1fb49c4 100644 --- a/src/app/system/manage-reports/manage-reports.component.html +++ b/src/app/system/manage-reports/manage-reports.component.html @@ -1,20 +1,22 @@
+
+
-
+
Filter
-
+
@@ -67,3 +69,31 @@ + + +

Create Report

+

This option allows you to create new report.

+
+ + + +
+ + + +

Search bar to filter reports by name.

+
+ + + +
+ + + +

List of all currently available reports. For more details click: Manage Reports

+
+ + + +
+ diff --git a/src/app/system/manage-reports/manage-reports.component.ts b/src/app/system/manage-reports/manage-reports.component.ts index b62505aaf..152b349e3 100644 --- a/src/app/system/manage-reports/manage-reports.component.ts +++ b/src/app/system/manage-reports/manage-reports.component.ts @@ -1,9 +1,17 @@ /** 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 { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; +import { ActivatedRoute, Router } from '@angular/router'; +import { MatDialog } from '@angular/material/dialog'; + +/* Custom Services */ +import { PopoverService } from '../../configuration-wizard/popover/popover.service'; +import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service'; + +/** Custom Dialog Component */ +import { CompletionDialogComponent } from '../../configuration-wizard/completion-dialog/completion-dialog.component'; /** * Manage Reports Component. @@ -13,7 +21,7 @@ import { MatTableDataSource } from '@angular/material/table'; templateUrl: './manage-reports.component.html', styleUrls: ['./manage-reports.component.scss'] }) -export class ManageReportsComponent implements OnInit { +export class ManageReportsComponent implements OnInit, AfterViewInit { /** Reports Data. */ reportsData: any; @@ -27,11 +35,24 @@ export class ManageReportsComponent implements OnInit { /** Sorter for reports table. */ @ViewChild(MatSort, { static: true }) sort: MatSort; + /* Reference of Create Report Button */ + @ViewChild('buttonCreateReport') buttonCreateReport: ElementRef; + /* Template for popover on Create Report Button */ + @ViewChild('templateButtonCreateReport') templateButtonCreateReport: TemplateRef; + /** * Retrieves the reports data from `resolve`. * @param {ActivatedRoute} route Activated Route. + * @param {Router} router Router for navigation. + * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service. + * @param {PopoverService} popoverService PopoverService. + * @param {Matdialog} matdialog Matdialog. */ - constructor(private route: ActivatedRoute) { + constructor(private route: ActivatedRoute, + private router: Router, + private configurationWizardService: ConfigurationWizardService, + private popoverService: PopoverService, + private dialog: MatDialog) { this.route.data.subscribe((data: { reports: any }) => { this.reportsData = data.reports; }); @@ -61,4 +82,50 @@ export class ManageReportsComponent implements OnInit { this.dataSource.filter = filterValue.trim().toLowerCase(); } + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showManageReports === true) { + setTimeout(() => { + this.showPopover(this.templateButtonCreateReport, this.buttonCreateReport.nativeElement, 'bottom', true); + }); + } + } + + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * Next Step (Home) Configuration Wizard Tour Complete. + */ + nextStep() { + this.configurationWizardService.showManageReports = false; + this.openNextStepDialog(); + } + + /** + * Previous Step (Manage Reports System Page) Configuration Wizard. + */ + previousStep() { + this.router.navigate(['/system']); + } + + /** + * Completed Configuration Wizard Tour Dialog. + */ + openNextStepDialog() { + const completionDialogRef = this.dialog.open( CompletionDialogComponent ); + completionDialogRef.afterClosed().subscribe(() => { + this.router.navigate(['/home']); + }); + } } diff --git a/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.html b/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.html index 23cceb271..deffd58b6 100644 --- a/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.html +++ b/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.html @@ -1,25 +1,28 @@
-

Scheduler Status: {{ schedulerActive ? 'Active' : 'Inactive' }}

- - +
+

Scheduler Status: {{ schedulerActive ? 'Active' : 'Inactive' }}

+
+ + +
-
+
Filter
-
+
@@ -95,10 +98,41 @@
+
+ + +

Scheduler Status. Button will be used to change the status.

+
+ + + +
+ + + +

Search bar to filter jobs.

+
+ + + +
+ + + +

List of all scheduled batch jobs Schedular Jobs

+
+ + + +
+ diff --git a/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.ts b/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.ts index 58e26a6fb..3312ef2c4 100644 --- a/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.ts +++ b/src/app/system/manage-scheduler-jobs/manage-scheduler-jobs.component.ts @@ -1,14 +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 { ActivatedRoute, Router } from '@angular/router'; import { SelectionModel } from '@angular/cdk/collections'; +import { MatDialog } from '@angular/material/dialog'; /** rxjs Imports */ import { of } from 'rxjs'; import { SystemService } from '../system.service'; +/** 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'; + /** * Manage scheduler jobs component. */ @@ -17,7 +26,7 @@ import { SystemService } from '../system.service'; templateUrl: './manage-scheduler-jobs.component.html', styleUrls: ['./manage-scheduler-jobs.component.scss'] }) -export class ManageSchedulerJobsComponent implements OnInit { +export class ManageSchedulerJobsComponent implements OnInit, AfterViewInit { /** Jobs data. */ jobData: any; @@ -39,11 +48,34 @@ export class ManageSchedulerJobsComponent implements OnInit { /** Sorter for manage scheduler jobs table. */ @ViewChild(MatSort, { static: true }) sort: MatSort; + /* Reference of scheduler status */ + @ViewChild('schedulerStatus', { static: true }) schedulerStatus: ElementRef; + /* Template for popover on scheduler status */ + @ViewChild('templateSchedulerStatus', { static: true }) templateSchedulerStatus: TemplateRef; + /* Reference of jobs table */ + @ViewChild('jobsTable', { static: true }) jobsTable: ElementRef; + /* Template for popover on jobs table */ + @ViewChild('templateJobsTable') templateJobsTable: TemplateRef; + /** * Retrieves the scheduler jobs data from `resolve`. * @param {ActivatedRoute} route Activated Route. + * @param {Matdialog} matdialog Matdialog. + * @param {Router} router Router for navigation. + * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service. + * @param {PopoverService} popoverService PopoverService. */ - constructor(private systemService: SystemService) {} + constructor(private route: ActivatedRoute, + private systemService: SystemService, + private router: Router, + private dialog: MatDialog, + private configurationWizardService: ConfigurationWizardService, + private popoverService: PopoverService) { + this.route.data.subscribe((data: { jobsScheduler: any }) => { + this.jobData = data.jobsScheduler[0]; + this.schedulerData = data.jobsScheduler[1]; + }); + } /** * Filters data in manage scheduler jobs table based on passed value. @@ -132,4 +164,74 @@ export class ManageSchedulerJobsComponent implements OnInit { refresh(): void { this.setJobs(); } + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showSchedulerJobsPage === true) { + setTimeout(() => { + this.showPopover(this.templateSchedulerStatus, this.schedulerStatus.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showSchedulerJobsList === true) { + setTimeout(() => { + this.showPopover(this.templateJobsTable, this.jobsTable.nativeElement, 'top', true); + }); + } + } + + /** + * Opens Dialog for next step. + */ + nextStep() { + this.configurationWizardService.showSchedulerJobsPage = false; + this.configurationWizardService.showSchedulerJobsList = false; + this.openNextStepDialog(); + } + + /** + * Previous Step (Scheduler Jobs) Configuration Wizard. + */ + previousStep() { + this.configurationWizardService.showSchedulerJobsPage = false; + this.configurationWizardService.showSchedulerJobsList = false; + this.configurationWizardService.showSchedulerJobs = true; + this.router.navigate(['/system']); + } + + /** + * Next Step (Accounting) Dialog Configuration Wizard. + */ + openNextStepDialog() { + const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, { + data: { + nextStepName: 'Setup Accounting', + previousStepName: 'System', + stepPercentage: 60 + }, + }); + nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => { + if (response.nextStep) { + this.configurationWizardService.showSchedulerJobsPage = false; + this.configurationWizardService.showSchedulerJobsList = false; + this.configurationWizardService.showChartofAccounts = true; + this.router.navigate(['/accounting']); + } else { + this.configurationWizardService.showSchedulerJobsPage = false; + this.configurationWizardService.showSchedulerJobsList = false; + this.router.navigate(['/home']); + } + }); +} } diff --git a/src/app/system/roles-and-permissions/roles-and-permissions.component.html b/src/app/system/roles-and-permissions/roles-and-permissions.component.html index 2bab8d90b..c0b13a754 100644 --- a/src/app/system/roles-and-permissions/roles-and-permissions.component.html +++ b/src/app/system/roles-and-permissions/roles-and-permissions.component.html @@ -1,20 +1,22 @@
- +
+ +
-
+
Filter
-
+
@@ -56,3 +58,31 @@ + + +

Add Role

+

To create a new role.

+
+ + + +
+ + + +

Search bar to filter roles.

+
+ + + +
+ + + +

List of roles defined within the organization. or more details click: Manage Roles and Permission

+
+ + + +
+ diff --git a/src/app/system/roles-and-permissions/roles-and-permissions.component.ts b/src/app/system/roles-and-permissions/roles-and-permissions.component.ts index b5a6b2e09..0c7aea3a0 100644 --- a/src/app/system/roles-and-permissions/roles-and-permissions.component.ts +++ b/src/app/system/roles-and-permissions/roles-and-permissions.component.ts @@ -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'; + /** * Roles and Permissions component. */ @@ -16,7 +20,7 @@ import { of } from 'rxjs'; templateUrl: './roles-and-permissions.component.html', styleUrls: ['./roles-and-permissions.component.scss'] }) -export class RolesAndPermissionsComponent implements OnInit { +export class RolesAndPermissionsComponent implements OnInit, AfterViewInit { /** Role data. */ roleData: any; @@ -30,11 +34,25 @@ export class RolesAndPermissionsComponent implements OnInit { /** Sorter for roles and permissions table. */ @ViewChild(MatSort, { static: true }) sort: MatSort; + /* Reference of add role button */ + @ViewChild('buttonAddRole') buttonAddRole: ElementRef; + /* Template for popovver on add role button */ + @ViewChild('templateButtonAddRole') templateButtonAddRole: TemplateRef; + /* Reference of roles and permission table */ + @ViewChild('tableRolesandPermissions') tableRolesandPermissions: ElementRef; + /* Template for roles and permission table */ + @ViewChild('templateTableRolesandPermissions') templateTableRolesandPermissions: TemplateRef; /** * Retrieves the roles data from `resolve`. * @param {ActivatedRoute} route Activated Route. + * @param {Router} router Router for navigation. + * @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: { roles: any }) => { this.roleData = data.roles; }); @@ -72,4 +90,51 @@ export class RolesAndPermissionsComponent implements OnInit { this.dataSource.sort = this.sort; } + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showRolesandPermissionPage === true) { + setTimeout(() => { + this.showPopover(this.templateButtonAddRole, this.buttonAddRole.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showRolesandPermissionList === true) { + setTimeout(() => { + this.showPopover(this.templateTableRolesandPermissions, this.tableRolesandPermissions.nativeElement, 'top', true); + }); + } + } + + /** + * Next Step (Users) Configuration Wizard. + */ + nextStep() { + this.configurationWizardService.showRolesandPermissionPage = false; + this.configurationWizardService.showRolesandPermissionList = false; + this.configurationWizardService.showUsers = true; + this.router.navigate(['/users']); + } + + /** + * Previous Step (Roles and Permission System Page) Configuration Wizard. + */ + previousStep() { + this.configurationWizardService.showRolesandPermissionPage = false; + this.configurationWizardService.showRolesandPermissionList = false; + this.configurationWizardService.showRolesandPermission = true; + this.router.navigate(['/system']); + } + } diff --git a/src/app/system/system.component.html b/src/app/system/system.component.html index 20e3d9963..4a3e04595 100644 --- a/src/app/system/system.component.html +++ b/src/app/system/system.component.html @@ -8,37 +8,45 @@ - - - - -

Manage Data tables

-

Add new extra fields to any entity in the form of data table

- +
+ + + + +

Manage Data tables

+

Add new extra fields to any entity in the form of data table

+ +
- - - - -

Manage Codes

-

Codes are used to define drop down values

- +
+ + + + +

Manage Codes

+

Codes are used to define drop down values

+ +
- - - - -

Manage Roles and Permissions

-

Define or modify roles and associated permissions

- +
+ + + + +

Manage Roles and Permissions

+

Define or modify roles and associated permissions

+ +
- - - - -

Configure Maker Checker Tasks

-

Define or modify Maker Checker tasks

- +
+ + + + +

Configure Maker Checker Tasks

+

Define or modify Maker Checker tasks

+ +
@@ -80,22 +88,27 @@

Audit logs of all the activities, such as create client, disburse loans etc

 - - - - -

Manage Reports

-

Add new report and classify reports

- +
+ + + + +

Manage Reports

+

Add new report and classify reports

+ +
- - - - -

Scheduler Jobs

-

Schedule a job, modify or delete jobs

- +
+ + + + +

Scheduler Jobs

+

Schedule a job, modify or delete jobs

+ +
+
@@ -103,6 +116,8 @@

Configurations

Global configurations, Cache and Business Date settings

 +
+ @@ -137,3 +152,73 @@ + + +

Manage Data Tables

+

Mifos X data-tables allow the user to add custom fields in addition to the built-in fields to a client profile, loan/saving account, group, center or an office.

+
+ + + +
+ + + +

Manage Codes

+

From this selection you can create new drop-downs and edit their values as well as edit the values for system-generated codes and drop-downs.

+
+ + + +
+ + + +

Manage Roles and Permissions

+

Roles and Permissions allow the administrator to control access to Mifos based on what roles are assigned to Users and what Permissions are assigned to roles.

+
+ + + +
+ + + +

Configure Maker-Checker Tasks

+

The “Maker-Checker” principle requires every tasks to be completed by two people to reduce the chance of errors and misuse. One person initiates the process and the second completes it.

+
+ + + +
+ + + +

Configuration

+

The Configurations page allows you to further customize the way your organization uses the Mifos system.

+
+ + + +
+ + + +

Manage Scheduler Jobs

+

By using Scheduler Jobs, you can set batch jobs to be completed at regular intervals. From this page you can schedule, modify or delete jobs.

+
+ + + +
+ + + +

Manage Reports

+

You may add customized reports and edit core reports for your organization.

+
+ + + +
+ diff --git a/src/app/system/system.component.ts b/src/app/system/system.component.ts index afb10409e..4d08701a4 100644 --- a/src/app/system/system.component.ts +++ b/src/app/system/system.component.ts @@ -1,15 +1,232 @@ -import { Component, OnInit } from '@angular/core'; +/** Angular Imports */ +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'; @Component({ selector: 'mifosx-system', templateUrl: './system.component.html', styleUrls: ['./system.component.scss'] }) -export class SystemComponent implements OnInit { +export class SystemComponent implements OnInit, AfterViewInit { - constructor() { } + /* Reference of manage datatables */ + @ViewChild('datatables') datatables: ElementRef; + /* Template for popover on manage datables */ + @ViewChild('templateDatatables') templateDatatables: TemplateRef; + /* Reference of manage codes */ + @ViewChild('codes') codes: ElementRef; + /* Template for popover on manage codes */ + @ViewChild('templateCodes') templateCodes: TemplateRef; + /* Reference of roles and permission */ + @ViewChild('rolesandpermission') rolesandpermission: ElementRef; + /* Template for popover on roles and permission */ + @ViewChild('templateRolesandPermission') templateRolesandPermission: TemplateRef; + /* Reference of makerchecker tasks */ + @ViewChild('makerCheckerTable') makerCheckerTable: ElementRef; + /* Template for popover on maker checker tasks */ + @ViewChild('templateMakerCheckerTable') templateMakerCheckerTable: TemplateRef; + /* Reference of global configurations */ + @ViewChild('configurations') configurations: ElementRef; + /* Template for popover on configurations */ + @ViewChild('templateConfigurations') templateConfigurations: TemplateRef; + /* Reference of scheduler jobs */ + @ViewChild('schedulerJobs') schedulerJobs: ElementRef; + /* Template for popover on scheduler jobs */ + @ViewChild('templateSchedulerJobs') templateSchedulerJobs: TemplateRef; + /* Reference of manage reports */ + @ViewChild('manageReports') manageReports: ElementRef; + /* Template for popover on manage reports */ + @ViewChild('templateManageReports') templateManageReports: TemplateRef; + + /** + * @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. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showDatatables === true) { + setTimeout(() => { + this.showPopover(this.templateDatatables, this.datatables.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showSystemCodes === true) { + setTimeout(() => { + this.showPopover(this.templateCodes, this.codes.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showRolesandPermission === true) { + setTimeout(() => { + this.showPopover(this.templateRolesandPermission, this.rolesandpermission.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showMakerCheckerTable === true) { + setTimeout(() => { + this.showPopover(this.templateMakerCheckerTable, this.makerCheckerTable.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showConfigurations === true) { + setTimeout(() => { + this.showPopover(this.templateConfigurations, this.configurations.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showSchedulerJobs === true) { + setTimeout(() => { + this.showPopover(this.templateSchedulerJobs, this.schedulerJobs.nativeElement, 'bottom', true); + }); + } + if (this.configurationWizardService.showManageReports === true) { + setTimeout(() => { + this.showPopover(this.templateManageReports, this.manageReports.nativeElement, 'bottom', true); + }); + } + } + + /** + * Next Step (Manage Datatables Page) Configuration Wizard. + */ + nextStepDatatables() { + this.configurationWizardService.showDatatables = false; + this.configurationWizardService.showDatatablesPage = true; + this.router.navigate(['/system/data-tables']); + } + + /** + * Previous Step (Define working days Page) Configuration Wizard. + */ + previousStepDatatables() { + this.configurationWizardService.showDatatables = false; + this.configurationWizardService.showDefineWorkingDays = true; + this.router.navigate(['/organization/working-days']); + } + + /** + * Next Step (Manage Codes Page) Configuration Wizard. + */ + nextStepCodes() { + this.configurationWizardService.showSystemCodes = false; + this.configurationWizardService.showSystemCodesPage = true; + this.router.navigate(['/system/codes']); + } + + /** + * Previous Step (Create Datatables Page) Configuration Wizard. + */ + previousStepCodes() { + this.configurationWizardService.showSystemCodes = false; + this.configurationWizardService.showDatatablesForm = true; + this.router.navigate(['/system/data-tables/create']); + } + + /** + * Next Step (Manage Roles and Permission Page) Configuration Wizard. + */ + nextStepRolesandPermission() { + this.configurationWizardService.showRolesandPermission = false; + this.configurationWizardService.showRolesandPermissionPage = true; + this.router.navigate(['/system/roles-and-permissions']); + } + + /** + * Previous Step (Create Codes Page) Configuration Wizard. + */ + previousStepRolesandPermission() { + this.configurationWizardService.showRolesandPermission = false; + this.configurationWizardService.showSystemCodesForm = true; + this.router.navigate(['/system/codes/create']); + } + + /** + * Next Step (Maker Checker Tasks Page) Configuration Wizard. + */ + nextStepMakerCheckerTable() { + this.configurationWizardService.showMakerCheckerTable = false; + this.configurationWizardService.showMakerCheckerTablePage = true; + this.router.navigate(['/system/configure-mc-tasks']); + } + + /** + * Previous Step (Create User Page) Configuration Wizard. + */ + previousStepMakerCheckerTable() { + this.configurationWizardService.showMakerCheckerTable = false; + this.configurationWizardService.showUsersForm = true; + this.router.navigate(['/users/create']); + } + + /** + * Next Step (Configurations Page) Configuration Wizard. + */ + nextStepConfigurations() { + this.configurationWizardService.showConfigurations = false; + this.configurationWizardService.showConfigurationsPage = true; + this.router.navigate(['/system/configurations']); + } + + /** + * Previous Step (Makerchecker Tasks Page) Configuration Wizard. + */ + previousStepConfigurations() { + this.configurationWizardService.showConfigurations = false; + this.configurationWizardService.showMakerCheckerTableList = true; + this.router.navigate(['/system/configure-mc-tasks']); + } + + /** + * Next Step (Manage Scheduler Jobs Page) Configuration Wizard. + */ + nextStepSchedulerJobs() { + this.configurationWizardService.showSchedulerJobs = false; + this.configurationWizardService.showSchedulerJobsPage = true; + this.router.navigate(['/system/scheduler-jobs']); + } + + /** + * Previous Step (Global Configurations Page) Configuration Wizard. + */ + previousStepSchedulerJobs() { + this.configurationWizardService.showSchedulerJobs = false; + this.configurationWizardService.showConfigurationsList = true; + this.router.navigate(['/system/global-configurations']); + } + + /** + * Next Step (Manage Reports Page) Configuration Wizard. + */ + nextStepManageReports() { + this.router.navigate(['/system/reports']); + } + + /** + * Previous Step (Manage Funds Page) Configuration Wizard. + */ + previousStepManageReports() { + this.configurationWizardService.showManageReports = false; + this.configurationWizardService.showManageFunds = true; + this.router.navigate(['/organization/manage-funds']); + } } diff --git a/src/app/users/create-user/create-user.component.html b/src/app/users/create-user/create-user.component.html index 21fbfb449..0862d739c 100644 --- a/src/app/users/create-user/create-user.component.html +++ b/src/app/users/create-user/create-user.component.html @@ -6,7 +6,7 @@ -
+
Username @@ -129,3 +129,15 @@
+ + +

Create User

+

Click to start filling the details. * mark fields are neccessary. For more details click: Users

+
+ + + + +
+ + diff --git a/src/app/users/create-user/create-user.component.ts b/src/app/users/create-user/create-user.component.ts index 5997138a9..c223e77ab 100644 --- a/src/app/users/create-user/create-user.component.ts +++ b/src/app/users/create-user/create-user.component.ts @@ -1,14 +1,21 @@ /** Angular Imports */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, TemplateRef, ElementRef , ViewChild, + AfterViewInit } from '@angular/core'; import { FormGroup, FormBuilder, FormControl, Validators } from '@angular/forms'; import { Router, ActivatedRoute } from '@angular/router'; +import { MatDialog } from '@angular/material/dialog'; /** Custom Services */ import { UsersService } from '../users.service'; +import { PopoverService } from '../../configuration-wizard/popover/popover.service'; +import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service'; /** Custom Validators */ import { confirmPasswordValidator } from '../../login/reset-password/confirm-password.validator'; +/** Custom Dialog Component */ +import { ContinueSetupDialogComponent } from '../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component'; + /** * Create user component. */ @@ -17,7 +24,7 @@ import { confirmPasswordValidator } from '../../login/reset-password/confirm-pas templateUrl: './create-user.component.html', styleUrls: ['./create-user.component.scss'] }) -export class CreateUserComponent implements OnInit { +export class CreateUserComponent implements OnInit, AfterViewInit { /** User form. */ userForm: FormGroup; @@ -28,17 +35,27 @@ export class CreateUserComponent implements OnInit { /** Staff data. */ staffData: any; + /* Reference of create user form */ + @ViewChild('userFormRef') userFormRef: ElementRef; + /* Template for popover on create user form */ + @ViewChild('templateUserFormRef') templateUserFormRef: TemplateRef; + /** * Retrieves the offices and roles data from `resolve`. * @param {FormBuilder} formBuilder Form Builder. * @param {UsersService} UsersService Users 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 usersService: UsersService, private route: ActivatedRoute, - private router: Router) { + private router: Router, + private popoverService: PopoverService, + private configurationWizardService: ConfigurationWizardService, + public dialog: MatDialog) { this.route.data.subscribe((data: { usersTemplate: any }) => { @@ -110,8 +127,78 @@ export class CreateUserComponent implements OnInit { submit() { const user = this.userForm.value; this.usersService.createUser(user).subscribe((response: any) => { - this.router.navigate(['../', response.resourceId], { relativeTo: this.route }); + if (this.configurationWizardService.showUsersForm === true) { + this.configurationWizardService.showUsersForm = false; + this.openDialog(); + } else { + this.router.navigate(['../', response.resourceId], { relativeTo: this.route }); + } }); } + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showUsersForm === true) { + setTimeout(() => { + this.showPopover(this.templateUserFormRef, this.userFormRef.nativeElement, 'top', true); + }); + } + } + + /** + * Next Step (Maker Checker Tasks System Page) Configuration Wizard. + */ + nextStep() { + this.configurationWizardService.showUsersForm = false; + this.configurationWizardService.showMakerCheckerTable = true; + this.router.navigate(['/system']); + } + + /** + * Previous Step (Users page) Configuration Wizard. + */ + previousStep() { + this.configurationWizardService.showUsersForm = false; + this.configurationWizardService.showUsersList = true; + this.router.navigate(['/users']); + } + + /** + * Opens dialog if the user wants to create more users. + */ + openDialog() { + const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, { + data: { + stepName: 'user' + }, + }); + continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => { + if (response.step === 1) { + this.configurationWizardService.showUsersForm = false; + this.router.navigate(['../'], { relativeTo: this.route }); + } else if (response.step === 2) { + this.configurationWizardService.showUsersForm = true; + this.router.routeReuseStrategy.shouldReuseRoute = () => false; + this.router.onSameUrlNavigation = 'reload'; + this.router.navigate(['/organization/users/create']); + } else if (response.step === 3) { + this.configurationWizardService.showUsersForm = false; + this.configurationWizardService.showMakerCheckerTable = true; + this.router.navigate(['/system']); + } + }); + } } diff --git a/src/app/users/users.component.html b/src/app/users/users.component.html index 0de9c43d8..b689fd1f2 100644 --- a/src/app/users/users.component.html +++ b/src/app/users/users.component.html @@ -1,20 +1,22 @@
- +
+ +
-
+
Filter
-
+
@@ -48,3 +50,31 @@ + + +

Create User

+

This option allows you to create new users in your organization.

+
+ + + +
+ + + +

Search bar to filter users.

+
+ + + +
+ + + +

List of Users with their details.

+
+ + + +
+ diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts index bf9bf8147..0b187a534 100644 --- a/src/app/users/users.component.ts +++ b/src/app/users/users.component.ts @@ -1,13 +1,17 @@ /** Angular Imports */ -import { Component, OnInit, ViewChild } from '@angular/core'; +import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core'; +import { ActivatedRoute, Router } from '@angular/router'; import { MatPaginator } from '@angular/material/paginator'; import { MatSort } from '@angular/material/sort'; import { MatTableDataSource } from '@angular/material/table'; -import { ActivatedRoute } 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'; + /** * Users component. */ @@ -16,7 +20,7 @@ import { of } from 'rxjs'; templateUrl: './users.component.html', styleUrls: ['./users.component.scss'] }) -export class UsersComponent implements OnInit { +export class UsersComponent implements OnInit, AfterViewInit { /** Users data. */ usersData: any; @@ -30,11 +34,26 @@ export class UsersComponent implements OnInit { /** Sorter for users table. */ @ViewChild(MatSort, { static: true }) sort: MatSort; + /* Reference of create user button */ + @ViewChild('buttonCreateUser') buttonCreateUser: ElementRef; + /* Template for popover create user button */ + @ViewChild('templateButtonCreateUser') templateButtonCreateUser: TemplateRef; + /* Reference of users table */ + @ViewChild('usersTable') usersTable: ElementRef; + /* Template for popover on users table */ + @ViewChild('templateUsersTable') templateUsersTable: TemplateRef; + /** * Retrieves the users data from `resolve`. * @param {ActivatedRoute} route Activated Route. + * @param {Router} router Router for navigation. + * @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: { users: any }) => { this.usersData = data.users; }); @@ -64,4 +83,52 @@ export class UsersComponent implements OnInit { this.dataSource.sort = this.sort; } + /** + * Popover function + * @param template TemplateRef. + * @param target HTMLElement | ElementRef. + * @param position String. + * @param backdrop Boolean. + */ + showPopover(template: TemplateRef, target: HTMLElement | ElementRef, position: string, backdrop: boolean): void { + setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200); + } + + /** + * To show popover. + */ + ngAfterViewInit() { + if (this.configurationWizardService.showUsers === true) { + setTimeout(() => { + this.showPopover(this.templateButtonCreateUser, this.buttonCreateUser.nativeElement, 'bottom', true); + }); + } + + if (this.configurationWizardService.showUsersList === true) { + setTimeout(() => { + this.showPopover(this.templateUsersTable, this.usersTable.nativeElement, 'top', true); + }); + } + } + + /** + * Next Step (Create User Page) Configuration Wizard. + */ + nextStep() { + this.configurationWizardService.showUsers = false; + this.configurationWizardService.showUsersList = false; + this.configurationWizardService.showUsersForm = true; + this.router.navigate(['/users/create']); + } + + /** + * Previous Step (Roles and Permission Page) Configuration Wizard. + */ + previousStep() { + this.configurationWizardService.showUsers = false; + this.configurationWizardService.showUsersList = false; + this.configurationWizardService.showRolesandPermissionList = true; + this.router.navigate(['/system/roles-and-permissions']); + } + } diff --git a/src/assets/styles/_width-height.scss b/src/assets/styles/_width-height.scss index 27d8e68f1..f8373eff3 100644 --- a/src/assets/styles/_width-height.scss +++ b/src/assets/styles/_width-height.scss @@ -32,6 +32,10 @@ body { width: 90%; } +.mw300 { + max-width: 300px; +} + .mw400 { max-width: 400px; }