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

feat: tour integration

Browse Source 
Tour Integration
This commit is contained in:
Ramveer
2022-09-02 17:03:13 +05:30
committed by GitHub
parent 52b7a3274e
commit f1be9ab5b1
119 changed files with 6360 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/accounting/accounting.component.html
+95 -35
View File
@@ -16,13 +16,15 @@
<p matLine>These are predefined postings</p>
</mat-list-item>
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'" [routerLink]="['journal-entries/create']">
<mat-icon matListIcon>
<fa-icon icon="plus" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Create Journal Entries</h4>
<p matLine>Manual journal entry transactions recorded in a journal</p>
</mat-list-item>
<div #createJournalEntries>
<mat-list-item *mifosxHasPermission="'CREATE_JOURNALENTRY'" [routerLink]="['journal-entries/create']">
<mat-icon matListIcon>
<fa-icon icon="plus" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Create Journal Entries</h4>
<p matLine>Manual journal entry transactions recorded in a journal</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['journal-entries']">
<mat-icon matListIcon>
@@ -32,21 +34,25 @@
<p matLine>Advanced search option for journal entries</p>
</mat-list-item>
<mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'" [routerLink]="['financial-activity-mappings']">
<mat-icon matListIcon>
<fa-icon icon="link" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Accounts Linked to Financial Activities</h4>
<p matLine>List of Financial Activities and GL Account Mappings</p>
</mat-list-item>
<div #accountsLinked>
<mat-list-item *mifosxHasPermission="'READ_FINANCIALACTIVITYACCOUNT'" [routerLink]="['financial-activity-mappings']">
<mat-icon matListIcon>
<fa-icon icon="link" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Accounts Linked to Financial Activities</h4>
<p matLine>List of Financial Activities and GL Account Mappings</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['migrate-opening-balances']">
<mat-icon matListIcon>
<fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Migrate Opening Balances (Office-wise)</h4>
<p matLine>Set or update office-level opening balances for GL accounts</p>
</mat-list-item>
<div #migrateOpeningBalances>
<mat-list-item *mifosxHasPermission="'READ_JOURNALENTRY'" [routerLink]="['migrate-opening-balances']">
<mat-icon matListIcon>
<fa-icon icon="hand-holding-usd" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Migrate Opening Balances (Office-wise)</h4>
<p matLine>Set or update office-level opening balances for GL accounts</p>
</mat-list-item>
</div>
</mat-nav-list>
@@ -56,21 +62,25 @@
<mat-nav-list>
<mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'" [routerLink]="['chart-of-accounts']">
<mat-icon matListIcon>
<fa-icon icon="sitemap" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Chart of Accounts</h4>
<p matLine>List of accounts used by the organization</p>
</mat-list-item>
<div #chartofAccounts>
<mat-list-item *mifosxHasPermission="'READ_GLACCOUNT'" [routerLink]="['chart-of-accounts']">
<mat-icon matListIcon>
<fa-icon icon="sitemap" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Chart of Accounts</h4>
<p matLine>List of accounts used by the organization</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" [routerLink]="['closing-entries']">
<mat-icon matListIcon>
<fa-icon icon="archive" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Closing Entries</h4>
<p matLine>Journal entries made at the end of accounting period</p>
</mat-list-item>
<div #closingEntries>
<mat-list-item *mifosxHasPermission="'READ_GLCLOSURE'" [routerLink]="['closing-entries']">
<mat-icon matListIcon>
<fa-icon icon="archive" size="sm"></fa-icon>
</mat-icon>
<h4 matLine>Closing Entries</h4>
<p matLine>Journal entries made at the end of accounting period</p>
</mat-list-item>
</div>
<mat-list-item *mifosxHasPermission="'READ_ACCOUNTINGRULE'" [routerLink]="['accounting-rules']">
<mat-icon matListIcon>
@@ -105,3 +115,53 @@
</mat-card>
</div>
<ng-template #templateChartofAccounts let-popover="popover">
<h2>Chart of Accounts</h2>
<p class="mw300">The Chart of Accounts - General Ledger Setup allows you to organize your different accounts within Mifos X.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepChartofAccounts()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepChartofAccounts()">Next</button>
</div>
</ng-template>
<ng-template #templateAccountsLinked let-popover="popover">
<h2>Accounts linked to Financial Activities</h2>
<p class="mw400">Accounts linked to Financial Activities are mapped accounts which are needed to do system generating accounting transaction.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepAccountsLinked()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepAccountsLinked()">Next</button>
</div>
</ng-template>
<ng-template #templateMigrateOpeningBalances let-popover="popover">
<h2>Migrate opening balances (Office-wise)</h2>
<p class="mw400">This makes it easier for an organization wanting to move to Mifos to transfer GL account balances (from their existing accounting application or manual system) to Mifos X Accounting.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepMigrateOpeningBalances()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepMigrateOpeningBalances()">Next</button>
</div>
</ng-template>
<ng-template #templateClosingEntries let-popover="popover">
<h2>Closing Entries</h2>
<p class="mw300">In Mifos X, you can close accounting to journal entries. Closures can be applied to all branches or to each branch separately. It is important for organizations to close accounting periodically to prevent transactions that affect the accounting books.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepClosingEntries()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepClosingEntries()">Next</button>
</div>
</ng-template>
<ng-template #templateCreateJournalEntries let-popover="popover">
<h2>Create Journal Entries</h2>
<p class="mw300">Journal Entries are essentially logs of all the transactions in your organization that have accounting implications.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepCreateJournalEntries()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepCreateJournalEntries()">Next</button>
</div>
</ng-template>
src/app/accounting/accounting.component.ts
+164 -3
View File
@@ -1,5 +1,10 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
/** Custom Services */
import { PopoverService } from '../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
/**
* Accounting component.
@@ -9,11 +14,167 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './accounting.component.html',
styleUrls: ['./accounting.component.scss']
})
export class AccountingComponent implements OnInit {
export class AccountingComponent implements OnInit, AfterViewInit {
constructor() { }
/* Reference of Chart of Accounts */
@ViewChild('chartofAccounts') chartofAccounts: ElementRef<any>;
/* Template for popover on Chart of Accounts */
@ViewChild('templateChartofAccounts') templateChartofAccounts: TemplateRef<any>;
/* Reference of Accounts Linked */
@ViewChild('accountsLinked') accountsLinked: ElementRef<any>;
/* Template for popover on Accounts Linked */
@ViewChild('templateAccountsLinked') templateAccountsLinked: TemplateRef<any>;
/* Reference of Migrate Opening Balances */
@ViewChild('migrateOpeningBalances') migrateOpeningBalances: ElementRef<any>;
/* Template for popover on Migrate Opening Balances */
@ViewChild('templateMigrateOpeningBalances') templateMigrateOpeningBalances: TemplateRef<any>;
/* Reference of Closing Entries */
@ViewChild('closingEntries') closingEntries: ElementRef<any>;
/* Template for popover on Closing Entries */
@ViewChild('templateClosingEntries') templateClosingEntries: TemplateRef<any>;
/* Reference of Create Journal Entries */
@ViewChild('createJournalEntries') createJournalEntries: ElementRef<any>;
/* Template for popover on Create Journal Entries */
@ViewChild('templateCreateJournalEntries') templateCreateJournalEntries: TemplateRef<any>;
/**
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) { }
ngOnInit() {
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showChartofAccounts === true) {
setTimeout(() => {
this.showPopover(this.templateChartofAccounts, this.chartofAccounts.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showAccountsLinked === true) {
setTimeout(() => {
this.showPopover(this.templateAccountsLinked, this.accountsLinked.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showMigrateOpeningBalances === true) {
setTimeout(() => {
this.showPopover(this.templateMigrateOpeningBalances, this.migrateOpeningBalances.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showClosingEntries === true) {
setTimeout(() => {
this.showPopover(this.templateClosingEntries, this.closingEntries.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCreateJournalEntries === true) {
setTimeout(() => {
this.showPopover(this.templateCreateJournalEntries, this.createJournalEntries.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Charts of Accounts Page) Configuration Wizard.
*/
nextStepChartofAccounts() {
this.configurationWizardService.showChartofAccounts = false;
this.configurationWizardService.showChartofAccountsPage = true;
this.router.navigate(['/accounting/chart-of-accounts']);
}
/**
* Previous Step (Scheduler Jobs Page) Configuration Wizard.
*/
previousStepChartofAccounts() {
this.configurationWizardService.showChartofAccounts = false;
this.configurationWizardService.showSchedulerJobsList = true;
this.router.navigate(['/system/scheduler-jobs']);
}
/**
* Next Step (Accounts Linked Page) Configuration Wizard.
*/
nextStepAccountsLinked() {
this.configurationWizardService.showAccountsLinked = false;
this.configurationWizardService.showAccountsLinkedPage = true;
this.router.navigate(['/accounting/financial-activity-mappings']);
}
/**
* Previous Step (Create Chart of Accounts Page) Configuration Wizard.
*/
previousStepAccountsLinked() {
this.configurationWizardService.showAccountsLinked = false;
this.configurationWizardService.showChartofAccountsForm = true;
this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/create']);
}
/**
* Next Step (Migrate Opening Balances) Configuration Wizard.
*/
nextStepMigrateOpeningBalances() {
this.router.navigate(['/accounting/migrate-opening-balances']);
}
/**
* Previous Step (Accounts Linked Page) Configuration Wizard.
*/
previousStepMigrateOpeningBalances() {
this.configurationWizardService.showMigrateOpeningBalances = false;
this.configurationWizardService.showAccountsLinkedList = true;
this.router.navigate(['accounting/financial-activity-mappings']);
}
/**
* Next Step (Closing Entries Page) Configuration Wizard.
*/
nextStepClosingEntries() {
this.configurationWizardService.showClosingEntries = false;
this.configurationWizardService.showClosingEntriesPage = true;
this.router.navigate(['/accounting/closing-entries']);
}
/**
* Previous Step (Migrate Opening Balances Page) Configuration Wizard.
*/
previousStepClosingEntries() {
this.configurationWizardService.showClosingEntries = false;
this.configurationWizardService.showMigrateOpeningBalances = true;
this.router.navigate(['/accounting/migrate-opening-balances']);
}
/**
* Next Step (Create Journal Entries Page) Configuration Wizard.
*/
nextStepCreateJournalEntries() {
this.router.navigate(['/accounting/journal-entries/create']);
}
/**
* Previous Step (Closing Entries Page) Configuration Wizard.
*/
previousStepCreateJournalEntries() {
this.configurationWizardService.showCreateJournalEntries = false;
this.configurationWizardService.showClosingEntriesList = true;
this.router.navigate(['/accounting/closing-entries']);
}
}
src/app/accounting/chart-of-accounts/chart-of-accounts.component.html
+56 -14
View File
@@ -1,30 +1,34 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<mat-button-toggle-group [formControl]="viewGroup">
<mat-button-toggle value="listView">
<fa-icon icon="list"></fa-icon>
</mat-button-toggle>
<mat-button-toggle value="treeView">
<fa-icon icon="sitemap"></fa-icon>
</mat-button-toggle>
</mat-button-toggle-group>
<button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Add Account
</button>
<div #buttonTreeView>
<mat-button-toggle-group [formControl]="viewGroup">
<mat-button-toggle value="listView">
<fa-icon icon="list"></fa-icon>
</mat-button-toggle>
<mat-button-toggle value="treeView">
<fa-icon icon="sitemap"></fa-icon>
</mat-button-toggle>
</mat-button-toggle-group>
</div>
<div #buttonAddAccount>
<button mat-raised-button color="primary" [routerLink]="['gl-accounts/create']" *mifosxHasPermission="'CREATE_GLACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Add Account
</button>
</div>
</div>
<!-- List View -->
<div class="container" [hidden]="viewGroup.value !== 'listView'">
<div fxLayout="row" fxLayoutGap="20px">
<div #filter fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<div #accountsTable class="mat-elevation-z8">
<table mat-table [dataSource]="tableDataSource" matSort>
@@ -194,3 +198,41 @@
</div>
</div>
<ng-template #templateButtonTreeView let-popover="popover">
<h2>Tree View</h2>
<p class="mw300">There is an alternative way to view your accounts - using the Tree View.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateButtonAddAccount let-popover="popover">
<h2>Add Account</h2>
<p class="mw300">This option allows you to create new GL accounts.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView, buttonTreeView , 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter GL accounts.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover( templateButtonAddAccount, buttonAddAccount, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccountsTable, accountsTable, 'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateAccountsTable let-popover="popover">
<h4 class="mw300">List of chart of all the accounts being used by your organization.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/chart-of-accounts/chart-of-accounts.component.ts
+61 -3
View File
@@ -1,12 +1,12 @@
/** Angular Imports */
import { Component, ViewChild, OnInit, AfterViewInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { MatTreeNestedDataSource } from '@angular/material/tree';
import { NestedTreeControl } from '@angular/cdk/tree';
import { FormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { of } from 'rxjs';
@@ -16,6 +16,8 @@ import { GLAccountNode } from './gl-account-node.model';
/** Custom Services */
import { GlAccountTreeService } from './gl-account-tree.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Chart of accounts component.
@@ -47,13 +49,28 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
/** Sorter for chart of accounts table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of Tree View Button */
@ViewChild('buttonTreeView') buttonTreeView: ElementRef<any>;
/* Template for popover on tree view button */
@ViewChild('templateButtonTreeView') templateButtonTreeView: TemplateRef<any>;
/* Reference of Accounts Table */
@ViewChild('accountsTable') accountsTable: ElementRef<any>;
/* Template for popover on accounts table */
@ViewChild('templateAccountsTable') templateAccountsTable: TemplateRef<any>;
/**
* Retrieves the gl accounts data from `resolve` and initializes(generates) gl accounts tree.
* @param {GlAccountTreeService} glAccountTreeService GL Account tree service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private glAccountTreeService: GlAccountTreeService,
private route: ActivatedRoute) {
private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: { chartOfAccounts: any }) => {
this.glAccountData = data.chartOfAccounts;
glAccountTreeService.initialize(this.glAccountData);
@@ -87,6 +104,17 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
}
};
this.tableDataSource.sort = this.sort;
if (this.configurationWizardService.showChartofAccountsPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonTreeView, this.buttonTreeView.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showChartofAccountsList === true) {
setTimeout(() => {
this.showPopover(this.templateAccountsTable, this.accountsTable.nativeElement, 'top', true);
});
}
}
/**
@@ -119,4 +147,34 @@ export class ChartOfAccountsComponent implements AfterViewInit, OnInit {
*/
private _getChildren = (node: GLAccountNode) => of(node.children);
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* Next Step (Create Charts of Accounts Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showChartofAccountsPage = false;
this.configurationWizardService.showChartofAccountsList = false;
this.configurationWizardService.showChartofAccountsForm = true;
this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/create']);
}
/**
* Previous Step (Charts of Accounts Accounting Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showChartofAccountsPage = false;
this.configurationWizardService.showChartofAccountsList = false;
this.configurationWizardService.showChartofAccounts = true;
this.router.navigate(['/accounting']);
}
}
src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.html
+12 -1
View File
@@ -2,7 +2,7 @@
<mat-card>
<form [formGroup]="glAccountForm" (ngSubmit)="submit()">
<form #accountFormRef [formGroup]="glAccountForm" (ngSubmit)="submit()">
<mat-card-content>
@@ -91,3 +91,14 @@
</mat-card>
</div>
<ng-template #templateAccountFormRef let-popover="popover">
<h2>Create GL account</h2>
<p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141745/Chart+of+Accounts+-+General+Ledger+Setup" target="_blank">Chart of Accounts</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close()">Create GL Account</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/chart-of-accounts/create-gl-account/create-gl-account.component.ts
+91 -4
View File
@@ -1,10 +1,16 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
/** Custom Services */
import { AccountingService } from '../../accounting.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Create gl account component.
@@ -14,7 +20,7 @@ import { AccountingService } from '../../accounting.service';
templateUrl: './create-gl-account.component.html',
styleUrls: ['./create-gl-account.component.scss']
})
export class CreateGlAccountComponent implements OnInit {
export class CreateGlAccountComponent implements OnInit, AfterViewInit {
/** GL account form. */
glAccountForm: FormGroup;
@@ -35,17 +41,28 @@ export class CreateGlAccountComponent implements OnInit {
/** Cancel route. (depending on creation of gl account or sub-ledger account) */
cancelRoute = '../../';
/* Reference of accounts form */
@ViewChild('accountFormRef') accountFormRef: ElementRef<any>;
/* Template for popover on accounts form */
@ViewChild('templateAccountFormRef') templateAccountFormRef: TemplateRef<any>;
/**
* Retrieves the chart of accounts data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
* @param {AccountingService} accountingService Accounting Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
* @param {Matdialog} dialog Matdialog.
*/
constructor(private formBuilder: FormBuilder,
private accountingService: AccountingService,
private route: ActivatedRoute,
private router: Router) {
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService,
public dialog: MatDialog) {
this.route.queryParamMap.subscribe(params => {
this.accountTypeId = Number(params.get('accountType'));
this.parentId = Number(params.get('parent'));
@@ -118,8 +135,78 @@ export class CreateGlAccountComponent implements OnInit {
*/
submit() {
this.accountingService.createGlAccount(this.glAccountForm.value).subscribe((response: any) => {
this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
if (this.configurationWizardService.showChartofAccounts === true) {
this.configurationWizardService.showChartofAccounts = false;
this.openDialog();
} else {
this.router.navigate(['../view', response.resourceId], { relativeTo: this.route });
}
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showChartofAccountsForm === true) {
setTimeout(() => {
this.showPopover(this.templateAccountFormRef, this.accountFormRef.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Accounts Linked Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showChartofAccountsForm = false;
this.configurationWizardService.showAccountsLinked = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Charts of Accounts Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showChartofAccountsForm = false;
this.configurationWizardService.showChartofAccountsList = true;
this.router.navigate(['/accounting/chart-of-accounts']);
}
/**
* Opens dialog if the user wants to create more accounts.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'GL account'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showChartofAccountsForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showChartofAccountsForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/accounting/chart-of-accounts/gl-accounts/create']);
} else if (response.step === 3) {
this.configurationWizardService.showChartofAccountsForm = false;
this.configurationWizardService.showAccountsLinked = true;
this.router.navigate(['/accounting']);
}
});
}
}
src/app/accounting/closing-entries/closing-entries.component.html
+36 -6
View File
@@ -1,11 +1,13 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Closure
</button>
<div #buttonCreateClosure>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_GLCLOSURE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Closure
</button>
</div>
</div>
<div class="container" fxLayout="row">
<div #filter class="container" fxLayout="row">
<mat-form-field fxFlex>
<mat-label>Office Name</mat-label>
<input matInput [formControl]="officeName" [matAutocomplete]="officeNameAutocomplete">
@@ -21,7 +23,7 @@
<div class="container">
<div class="mat-elevation-z8">
<div #closuresTable class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -55,3 +57,31 @@
</div>
</div>
<ng-template #templateButtonCreateClosure let-popover="popover">
<h2>Create Closure</h2>
<p class="mw300">This option allows you to create new closure.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter closures by office.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateClosure, buttonCreateClosure, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateClosuresTable,closuresTable, 'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateClosuresTable let-popover="popover">
<h4>List of closures. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895316/Closing+Entries" target="_blank">Closing Entries</a></h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/closing-entries/closing-entries.component.ts
+70 -4
View File
@@ -1,14 +1,18 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { FormControl } from '@angular/forms';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { startWith, map } from 'rxjs/operators';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Closing entries component.
*/
@@ -17,7 +21,7 @@ import { startWith, map } from 'rxjs/operators';
templateUrl: './closing-entries.component.html',
styleUrls: ['./closing-entries.component.scss']
})
export class ClosingEntriesComponent implements OnInit {
export class ClosingEntriesComponent implements OnInit, AfterViewInit {
/** Columns to be displayed in closing entries table. */
displayedColumns: string[] = ['officeName', 'closingDate', 'comments', 'createdByUsername'];
@@ -37,11 +41,26 @@ export class ClosingEntriesComponent implements OnInit {
/** Sorter for closing entries table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create closure button */
@ViewChild('buttonCreateClosure') buttonCreateClosure: ElementRef<any>;
/* Template for popover on create closure button */
@ViewChild('templateButtonCreateClosure') templateButtonCreateClosure: TemplateRef<any>;
/* Reference of closures table */
@ViewChild('closuresTable') closuresTable: ElementRef<any>;
/* Template for popover on closures table */
@ViewChild('templateClosuresTable') templateClosuresTable: TemplateRef<any>;
/**
* Retrieves the offices and gl account closures data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: {
offices: any,
glAccountClosures: any
@@ -99,4 +118,51 @@ export class ClosingEntriesComponent implements OnInit {
return this.officeData.filter((office: any) => office.name.toLowerCase().includes(officeName.toLowerCase()));
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showClosingEntriesPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateClosure, this.buttonCreateClosure.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showClosingEntriesList === true) {
setTimeout(() => {
this.showPopover(this.templateClosuresTable, this.closuresTable.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create journal Entry Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showClosingEntriesPage = false;
this.configurationWizardService.showClosingEntriesList = false;
this.configurationWizardService.showCreateJournalEntries = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Closing Entries Accounting Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showClosingEntriesPage = false;
this.configurationWizardService.showClosingEntriesList = false;
this.configurationWizardService.showClosingEntries = true;
this.router.navigate(['/accounting']);
}
}
src/app/accounting/create-journal-entry/create-journal-entry.component.html
+11 -1
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<div #createJournalFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="48%">
<mat-label>Office</mat-label>
@@ -176,3 +176,13 @@
</mat-card>
</div>
<ng-template #templateCreateJournalFormRef let-popover="popover">
<h2>Add Journal Entry Form</h2>
<p class="mw300">Fields with a red asterisk (*) are required. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895310/Add+Journal+Entries" target="_blank">Add Journal Entries</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/create-journal-entry/create-journal-entry.component.ts
+78 -3
View File
@@ -1,12 +1,18 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
/** Custom Services */
import { AccountingService } from '../accounting.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { NextStepDialogComponent } from '../../configuration-wizard/next-step-dialog/next-step-dialog.component';
/**
* Create Journal Entry component.
*/
@@ -15,7 +21,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './create-journal-entry.component.html',
styleUrls: ['./create-journal-entry.component.scss']
})
export class CreateJournalEntryComponent implements OnInit {
export class CreateJournalEntryComponent implements OnInit, AfterViewInit {
/** Minimum transaction date allowed. */
minDate = new Date(2000, 0, 1);
@@ -32,6 +38,11 @@ export class CreateJournalEntryComponent implements OnInit {
/** Gl Account data. */
glAccountData: any;
/* Reference of create journal form */
@ViewChild('createJournalFormRef') createJournalFormRef: ElementRef<any>;
/* Template for popover on create journal form */
@ViewChild('templateCreateJournalFormRef') templateCreateJournalFormRef: TemplateRef<any>;
/**
* Retrieves the offices, currencies, payment types and gl accounts data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -39,13 +50,18 @@ export class CreateJournalEntryComponent implements OnInit {
* @param {SettingsService} settingsService Settings Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private accountingService: AccountingService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router) {
private router: Router,
private dialog: MatDialog,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: {
offices: any,
currencies: any,
@@ -149,4 +165,63 @@ export class CreateJournalEntryComponent implements OnInit {
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showCreateJournalEntries === true) {
setTimeout(() => {
this.showPopover(this.templateCreateJournalFormRef, this.createJournalFormRef.nativeElement, 'top', true);
});
}
}
/**
* opens dialog for next step Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showCreateJournalEntries = false;
this.openNextStepDialog();
}
/**
* Next Step (Create journal entry Accounting Page) Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/accounting']);
}
/**
* Next Step (Products) Dialog Configuration Wizard.
*/
openNextStepDialog() {
const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
data: {
nextStepName: 'Setup Products',
previousStepName: 'Accounting',
stepPercentage: 74
},
});
nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
if (response.nextStep) {
this.configurationWizardService.showCreateJournalEntries = false;
this.configurationWizardService.showCharges = true;
this.router.navigate(['/products']);
} else {
this.configurationWizardService.showCreateJournalEntries = false;
this.router.navigate(['/home']);
}
});
}
}
src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.html
+25 -4
View File
@@ -1,10 +1,12 @@
<div fxLayout="row" fxLayoutAlign="end" class="container m-b-20">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Define New Mapping
</button>
<div #buttonDefineMapping>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_FINANCIALACTIVITYACCOUNT'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;Define New Mapping
</button>
</div>
</div>
<div class="mat-elevation-z8 container">
<div #activitiesTable class="mat-elevation-z8 container">
<table mat-table [dataSource]="dataSource" matSort>
@@ -31,3 +33,22 @@
<mat-paginator [pageSizeOptions]="[10, 25]" showFirstLastButtons></mat-paginator>
</div>
<ng-template #templateButtonDefineMapping let-popover="popover">
<h2>Define New Mapping</h2>
<p class="mw300">To define new mapping.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateActivitiesTable, activitiesTable, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateActivitiesTable let-popover="popover">
<h4 class="mw300">List of accounts linked to different financial activities. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/106430472/Accounts+linked+to+Financial+Activities" target="_blank">Accounts linked to Financial Activities</a> </h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonDefineMapping, buttonDefineMapping , 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/accounting/financial-activity-mappings/financial-activity-mappings.component.ts
+71 -4
View File
@@ -1,9 +1,13 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Financial activity mappings component.
@@ -13,7 +17,7 @@ import { ActivatedRoute } from '@angular/router';
templateUrl: './financial-activity-mappings.component.html',
styleUrls: ['./financial-activity-mappings.component.scss']
})
export class FinancialActivityMappingsComponent implements OnInit {
export class FinancialActivityMappingsComponent implements OnInit, AfterViewInit {
/** Financial activity account data. */
financialActivityAccountData: any;
@@ -27,11 +31,26 @@ export class FinancialActivityMappingsComponent implements OnInit {
/** Sorter for financial activity mappings table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of define mapping button */
@ViewChild('buttonDefineMapping') buttonDefineMapping: ElementRef<any>;
/* Template for popover on define mapping button */
@ViewChild('templateButtonDefineMapping') templateButtonDefineMapping: TemplateRef<any>;
/* Reference of Activities table */
@ViewChild('activitiesTable') activitiesTable: ElementRef<any>;
/* Template for popover on Activities table */
@ViewChild('templateActivitiesTable') templateActivitiesTable: TemplateRef<any>;
/**
* Retrieves the financial activity accounts data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { financialActivityAccounts: any }) => {
this.financialActivityAccountData = data.financialActivityAccounts;
});
@@ -61,4 +80,52 @@ export class FinancialActivityMappingsComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showAccountsLinkedPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonDefineMapping, this.buttonDefineMapping.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showAccountsLinkedList === true) {
setTimeout(() => {
this.showPopover(this.templateActivitiesTable, this.activitiesTable.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Migrate Opening Balances Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showAccountsLinkedPage = false;
this.configurationWizardService.showAccountsLinkedList = false;
this.configurationWizardService.showMigrateOpeningBalances = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Accounts Linked Accounting Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showAccountsLinkedPage = false;
this.configurationWizardService.showAccountsLinkedList = false;
this.configurationWizardService.showAccountsLinked = true;
this.router.navigate(['/accounting']);
}
}
src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.html
+14 -2
View File
@@ -7,7 +7,7 @@
<mat-card-content>
<div fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<div #searchFormRef fxLayout="row wrap" fxLayoutGap="2%" fxLayout.lt-md="column">
<mat-form-field fxFlex="88%">
<mat-label>Office</mat-label>
@@ -21,7 +21,9 @@
</mat-error>
</mat-form-field>
<button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">Retrieve</button>
<div>
<button mat-button type="button" color="primary" fxFlex="8%" (click)="retrieveOpeningBalances()">Retrieve</button>
</div>
</div>
@@ -124,3 +126,13 @@
</mat-card>
</div>
<ng-template #templateSearchFormRef let-popover="popover">
<h2>Migrate opening balances (Office-wise)</h2>
<p class="mw300">This form will be used to migrate opening balances. To know more click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243328/Migrate+opening+balances+Office-wise" target="_blank">Migrate opening balances (Office-wise)</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();popover.close();previousStep();">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();popover.close();nextStep();">Next</button>
</div>
</ng-template>
src/app/accounting/migrate-opening-balances/migrate-opening-balances.component.ts
+53 -3
View File
@@ -1,11 +1,14 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators, FormArray } from '@angular/forms';
import { ActivatedRoute, Router } from '@angular/router';
/** Custom Services */
import { AccountingService } from '../accounting.service';
import { SettingsService } from 'app/settings/settings.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Validators */
import { onlyOneOfTheFieldsIsRequiredValidator } from './only-one-of-the-fields-is-required.validator';
import { Dates } from 'app/core/utils/dates';
@@ -18,7 +21,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './migrate-opening-balances.component.html',
styleUrls: ['./migrate-opening-balances.component.scss']
})
export class MigrateOpeningBalancesComponent implements OnInit {
export class MigrateOpeningBalancesComponent implements OnInit, AfterViewInit {
/** Minimum opening balances date allowed. */
minDate = new Date(2000, 0, 1);
@@ -37,6 +40,11 @@ export class MigrateOpeningBalancesComponent implements OnInit {
/** Sum total of credits. */
creditsSum = 0;
/* Reference of search form */
@ViewChild('searchFormRef') searchFormRef: ElementRef<any>;
/* Template for popover on search form */
@ViewChild('templateSearchFormRef') templateSearchFormRef: TemplateRef<any>;
/**
* Retrieves the offices and currencies from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -44,13 +52,17 @@ export class MigrateOpeningBalancesComponent implements OnInit {
* @param {SettingsService} settingsService Settings Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private accountingService: AccountingService,
private settingsService: SettingsService,
private dateUtils: Dates,
private route: ActivatedRoute,
private router: Router) {
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: {
offices: any,
currencies: any
@@ -160,4 +172,42 @@ export class MigrateOpeningBalancesComponent implements OnInit {
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showMigrateOpeningBalances === true) {
setTimeout(() => {
this.showPopover(this.templateSearchFormRef, this.searchFormRef.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Closing Entries Accounting Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showMigrateOpeningBalances = false;
this.configurationWizardService.showClosingEntries = true;
this.router.navigate(['/accounting']);
}
/**
* Previous Step (Migrate Opening Balances Accounting Page) Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/accounting']);
}
}