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

feat: tour integration

Browse Source 
Tour Integration
This commit is contained in:
Ramveer
2022-09-02 17:03:13 +05:30
committed by GitHub
parent 52b7a3274e
commit f1be9ab5b1
119 changed files with 6360 additions and 456 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/organization/currencies/currencies.component.html
+33 -3
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonAddEdit class="in-block">
<button mat-raised-button color="primary" [routerLink]="'manage'" *mifosxHasPermission="'UPDATE_CURRENCY'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Add/Edit
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filter fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
<mat-label >Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<div #tableCurrencies class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -38,3 +40,31 @@
</div>
</div>
<ng-template #templateButtonAddEdit let-popover="popover">
<h2>Add/Edit Currency</h2>
<p class="mw300">This will display a list of all currencies currently in use.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter currencies.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonAddEdit,buttonAddEdit, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCurrencies, tableCurrencies, 'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateTableCurrencies let-popover="popover">
<h4>List of currencies available.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/currencies/currencies.component.ts
+71 -4
View File
@@ -1,13 +1,17 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { of } from 'rxjs';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Currencies component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './currencies.component.html',
styleUrls: ['./currencies.component.scss']
})
export class CurrenciesComponent implements OnInit {
export class CurrenciesComponent implements OnInit, AfterViewInit {
/** Currencies data. */
currenciesData: any;
@@ -30,11 +34,26 @@ export class CurrenciesComponent implements OnInit {
/** Sorter for currencies table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of add/edit button */
@ViewChild('buttonAddEdit') buttonAddEdit: ElementRef<any>;
/* Template for popover on add/edit button */
@ViewChild('templateButtonAddEdit') templateButtonAddEdit: TemplateRef<any>;
/* Reference of currenies table */
@ViewChild('tableCurrencies') tableCurrencies: ElementRef<any>;
/* Template for currencies table */
@ViewChild('templateTableCurrencies') templateTableCurrencies: TemplateRef<any>;
/**
* Retrieves the currencies data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { currencies: any }) => {
this.currenciesData = data.currencies.selectedCurrencyOptions;
});
@@ -64,4 +83,52 @@ export class CurrenciesComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showCurrencyPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonAddEdit, this.buttonAddEdit.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCurrencyList === true) {
setTimeout(() => {
this.showPopover(this.templateTableCurrencies, this.tableCurrencies.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Add currency page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showCurrencyPage = false;
this.configurationWizardService.showCurrencyList = false;
this.configurationWizardService.showCurrencyForm = true;
this.router.navigate(['/organization/currencies/manage']);
}
/**
* Previous Step (Add/edit Currency) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showCurrencyPage = false;
this.configurationWizardService.showCurrencyList = false;
this.configurationWizardService.showAddEditCurrency = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/currencies/manage-currencies/manage-currencies.component.html
+12 -1
View File
@@ -2,7 +2,7 @@
<mat-card>
<div>
<div #currencyFormRef>
<form #formRef="ngForm" [formGroup]="currencyForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
fxFlex="48%" (ngSubmit)="addCurrency()">
@@ -47,3 +47,14 @@
</mat-card>
</div>
<ng-template #templateCurrencyFormRef let-popover="popover">
<h4>Add Currency Form</h4>
<p class="mw400">This form will be used to add currency. To add currency click on add currency and fill the form and then click add else click back or next. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141734/Currency+Configuration" target="_blank">Currency Configuration</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();">Add Currency</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/currencies/manage-currencies/manage-currencies.component.ts
+64 -4
View File
@@ -1,6 +1,6 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { FormBuilder, Validators } from '@angular/forms';
@@ -9,6 +9,11 @@ import { DeleteDialogComponent } from '../../../shared/delete-dialog/delete-dial
/** Custom Services */
import { OrganizationService } from '../../organization.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Manage Currencies component.
@@ -18,7 +23,7 @@ import { OrganizationService } from '../../organization.service';
templateUrl: './manage-currencies.component.html',
styleUrls: ['./manage-currencies.component.scss']
})
export class ManageCurrenciesComponent implements OnInit {
export class ManageCurrenciesComponent implements OnInit, AfterViewInit {
/** Selected Currencies data. */
selectedCurrencies: any[];
@@ -29,6 +34,8 @@ export class ManageCurrenciesComponent implements OnInit {
/** Currency form reference */
@ViewChild('formRef', { static: true }) formRef: any;
@ViewChild('currencyFormRef') currencyFormRef: ElementRef<any>;
@ViewChild('templateCurrencyFormRef') templateCurrencyFormRef: TemplateRef<any>;
/**
* Retrieves the currency data from `resolve`.
@@ -40,7 +47,10 @@ export class ManageCurrenciesComponent implements OnInit {
constructor(private route: ActivatedRoute,
private formBuilder: FormBuilder,
private organizationservice: OrganizationService,
public dialog: MatDialog) {
public dialog: MatDialog,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.parent.data.subscribe(( data: { currencies: any }) => {
this.selectedCurrencies = data.currencies.selectedCurrencyOptions;
this.currencyData = data.currencies.currencyOptions;
@@ -72,6 +82,10 @@ export class ManageCurrenciesComponent implements OnInit {
.subscribe((response: any) => {
this.selectedCurrencies.push(newCurrency);
this.formRef.resetForm();
if (this.configurationWizardService.showCurrencyForm === true) {
this.configurationWizardService.showCurrencyForm = false;
this.openDialog();
}
});
}
}
@@ -98,4 +112,50 @@ export class ManageCurrenciesComponent implements OnInit {
});
}
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
ngAfterViewInit() {
if (this.configurationWizardService.showCurrencyForm === true) {
setTimeout(() => {
this.showPopover(this.templateCurrencyFormRef, this.currencyFormRef.nativeElement, 'bottom', true);
});
}
}
nextStep() {
this.configurationWizardService.showCurrencyForm = false;
this.configurationWizardService.showCreateHoliday = true;
this.router.navigate(['/organization']);
}
previousStep() {
this.configurationWizardService.showCurrencyForm = false;
this.configurationWizardService.showCurrencyList = true;
this.router.navigate(['/organization/currencies']);
}
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'currency'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showCurrencyForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showCurrencyForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/currencies/manage']);
} else if (response.step === 3) {
this.configurationWizardService.showCurrencyForm = false;
this.configurationWizardService.showCreateHoliday = true;
this.router.navigate(['/organization']);
}
});
}
}
src/app/organization/employees/create-employee/create-employee.component.html
+14 -3
View File
@@ -6,8 +6,8 @@
<mat-card-content>
<div fxLayout="column">
<div #createEmployeeFormRef fxLayout="column">
<mat-form-field>
<mat-label>Office</mat-label>
<mat-select required formControlName="officeId">
@@ -19,7 +19,7 @@
Office is <strong>required</strong>
</mat-error>
</mat-form-field>
<mat-form-field>
<mat-label>First Name</mat-label>
<input matInput required formControlName="firstname">
@@ -75,3 +75,14 @@
</mat-card>
</div>
<ng-template #templateCreateEmployeeForm let-popover="popover">
<h2>Create Employee</h2>
<p class="mw400">Click to start filling the details. * mark fields are neccessary. <br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141732/Manage+Employees" target="_blank">Manage Employees</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close()">Create Employee</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/employees/create-employee/create-employee.component.ts
+92 -4
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit , TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@@ -7,6 +7,12 @@ import { Router, ActivatedRoute } from '@angular/router';
import { OrganizationService } from '../../organization.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { MatDialog } from '@angular/material/dialog';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Create employee component.
@@ -16,7 +22,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './create-employee.component.html',
styleUrls: ['./create-employee.component.scss']
})
export class CreateEmployeeComponent implements OnInit {
export class CreateEmployeeComponent implements OnInit, AfterViewInit {
/** Minimum joining date allowed. */
minDate = new Date(2000, 0, 1);
@@ -27,6 +33,11 @@ export class CreateEmployeeComponent implements OnInit {
/** Office data. */
officeData: any;
/* Reference of employee form */
@ViewChild('createEmployeeFormRef') createEmployeeFormRef: ElementRef<any>;
/* Template for popover on employee form */
@ViewChild('templateCreateEmployeeForm') templateCreateEmployeeForm: TemplateRef<any>;
/**
* Retrieves the offices data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -35,13 +46,19 @@ export class CreateEmployeeComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {Dates} dateUtils Date Utils to format date.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
* @param {MatDialog} dialog MatDialog.
*/
constructor(private formBuilder: FormBuilder,
private organizationService: OrganizationService,
private settingsService: SettingsService,
private route: ActivatedRoute,
private router: Router,
private dateUtils: Dates) {
private dateUtils: Dates,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService,
public dialog: MatDialog) {
this.route.data.subscribe((data: { offices: any }) => {
this.officeData = data.offices;
});
@@ -87,7 +104,78 @@ export class CreateEmployeeComponent implements OnInit {
locale
};
this.organizationService.createEmployee(data).subscribe((response: any) => {
this.router.navigate(['../'], { relativeTo: this.route });
if (this.configurationWizardService.showEmployeeForm === true) {
this.configurationWizardService.showEmployeeForm = false;
this.openDialog();
} else {
this.router.navigate(['../'], { relativeTo: this.route });
}
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showEmployeeForm === true) {
setTimeout(() => {
this.showPopover(this.templateCreateEmployeeForm, this.createEmployeeFormRef.nativeElement, 'right', true);
});
}
}
/**
* Next Step (Define Working Days) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showEmployeeForm = false;
this.configurationWizardService.showDefineWorkingDays = true;
this.router.navigate(['/organization']);
}
/**
* Previous Step (Employees Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showEmployeeForm = false;
this.configurationWizardService.showEmployeeTable = true;
this.router.navigate(['/organization/employees']);
}
/**
* Opens dialog if the user wants to create more employees.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'employee'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showEmployeeForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showEmployeeForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/employees/create']);
} else if (response.step === 3) {
this.configurationWizardService.showEmployeeForm = false;
this.configurationWizardService.showDefineWorkingDays = true;
this.router.navigate(['/organization']);
}
});
}
src/app/organization/employees/employees.component.html
+45 -4
View File
@@ -1,27 +1,30 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonImportEmployees>
<button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_STAFF'" [routerLink]="['/', 'organization', 'bulk-import', 'Employees']">
<fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
Import Employees
</button>
</div>
<div #buttonCreateEmployee>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_STAFF'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Employee
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filter fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<div #tableEmployees class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -63,4 +66,42 @@
</div>
</div>
</div>
<ng-template #templateButtonImportEmployees let-data let-popover="popover">
<h2>Import Employees</h2>
<p class="mw300">This button is used to import employee details from your local device.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateButtonCreateEmployee let-popover="popover">
<h2>Create Employee</h2>
<p class="mw300">This option allows you to create new employees in your organization.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportEmployees,buttonImportEmployees,'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter employees.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateEmployee,buttonCreateEmployee,'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableEmployees,tableEmployees,'top', true)">Next</button>
</div>
</ng-template>
<ng-template #templateTableEmployees let-popover="popover">
<h4>List of employees in the organization.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/employees/employees.component.ts
+70 -4
View File
@@ -1,13 +1,17 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** rxjs Imports */
import { of } from 'rxjs';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Employees component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './employees.component.html',
styleUrls: ['./employees.component.scss']
})
export class EmployeesComponent implements OnInit {
export class EmployeesComponent implements OnInit, AfterViewInit {
/** Employees data. */
employeesData: any;
@@ -30,11 +34,26 @@ export class EmployeesComponent implements OnInit {
/** Sorter for employees table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of import employees button */
@ViewChild('buttonImportEmployees') buttonImportEmployees: ElementRef<any>;
/* Template for popover on import employees button */
@ViewChild('templateButtonImportEmployees') templateButtonImportEmployees: TemplateRef<any>;
/* Reference of employees table */
@ViewChild('tableEmployees') tableEmployees: ElementRef<any>;
/* Template for popover on employees table */
@ViewChild('templateTableEmployees') templateTableEmployees: TemplateRef<any>;
/**
* Retrieves the employees data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { employees: any }) => {
this.employeesData = data.employees;
});
@@ -64,4 +83,51 @@ export class EmployeesComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showEmployeeList === true) {
setTimeout(() => {
this.showPopover(this.templateButtonImportEmployees, this.buttonImportEmployees.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showEmployeeTable === true) {
setTimeout(() => {
this.showPopover(this.templateTableEmployees, this.tableEmployees.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create Employee Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showEmployeeList = false;
this.configurationWizardService.showEmployeeTable = false;
this.configurationWizardService.showEmployeeForm = true;
this.router.navigate(['/organization/employees/create']);
}
/**
* Previous Step (Manage Employees) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showEmployeeList = false;
this.configurationWizardService.showEmployeeTable = false;
this.configurationWizardService.showCreateEmployee = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/holidays/edit-holiday/edit-holiday.component.html
+1 -1
View File
@@ -40,7 +40,7 @@
<mat-label>Repayment Scheduling Type</mat-label>
<mat-select required formControlName="reschedulingType">
<mat-option *ngFor="let repayments of holidayData.repaymentSchedulingTypes" [value]="repayments.id">
{{ repayments.value }}
{{ repayments.value }}
</mat-option>
</mat-select>
<mat-error *ngIf="holidayForm.controls.reschedulingType.hasError('required')">
src/app/organization/holidays/holidays.component.html
+22 -1
View File
@@ -1,15 +1,17 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<div #buttonCreateHoliday class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_HOLIDAY'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Holiday
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filterRef fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
@@ -65,3 +67,22 @@
</div>
</div>
<ng-template #templateButtonCreateHoliday let-popover="popover">
<h2>Create Holiday</h2>
<p class="mw300">This option allows you to create holidays for different offices in your organization.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilterRef,filterRef,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFilterRef let-popover="popover">
<h4>Search bar to filter holidays based on different offices.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateHoliday,buttonCreateHoliday,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep();">Next</button>
</div>
</ng-template>
src/app/organization/holidays/holidays.component.ts
+68 -4
View File
@@ -1,9 +1,9 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
import { FormControl } from '@angular/forms';
/** rxjs Imports */
@@ -11,6 +11,8 @@ import { of } from 'rxjs';
/** Custom Services */
import { OrganizationService } from '../organization.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Holidays component.
@@ -20,7 +22,7 @@ import { OrganizationService } from '../organization.service';
templateUrl: './holidays.component.html',
styleUrls: ['./holidays.component.scss']
})
export class HolidaysComponent implements OnInit {
export class HolidaysComponent implements OnInit, AfterViewInit {
/** Office selector. */
officeSelector = new FormControl();
@@ -38,14 +40,29 @@ export class HolidaysComponent implements OnInit {
/** Sorter for holidays table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create holiday button */
@ViewChild('buttonCreateHoliday') buttonCreateHoliday: ElementRef<any>;
/* Template for popover on create holiday button */
@ViewChild('templateButtonCreateHoliday') templateButtonCreateHoliday: TemplateRef<any>;
/* Reference of filter */
@ViewChild('filterRef') filterRef: ElementRef<any>;
/* Template to show popover on filter */
@ViewChild('templateFilterRef') templateFilterRef: TemplateRef<any>;
/**
* Retrieves the offices data from `resolve`.
* @param {OrganizationService} organizationService Organization Service.
* @param {ActivatedRoute} route Activated Route.
* @param {FormBuilder} formBuilder Form Builder.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private organizationService: OrganizationService,
private route: ActivatedRoute) {
private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { offices: any }) => {
this.officeData = data.offices;
});
@@ -88,4 +105,51 @@ export class HolidaysComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showHolidayPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateHoliday, this.buttonCreateHoliday.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showHolidayFilter === true) {
setTimeout(() => {
this.showPopover(this.templateFilterRef, this.filterRef.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Create Employee) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showHolidayPage = false;
this.configurationWizardService.showHolidayFilter = false;
this.configurationWizardService.showCreateEmployee = true;
this.router.navigate(['/organization']);
}
/**
* Previous Step (Manage Holidays) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showHolidayPage = false;
this.configurationWizardService.showHolidayFilter = false;
this.configurationWizardService.showCreateHoliday = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/manage-funds/manage-funds.component.html
+18 -4
View File
@@ -2,7 +2,7 @@
<mat-card>
<div>
<div #fundFormRef>
<form #formRef="ngForm" [formGroup]="fundForm" fxLayout="row" fxLayoutAlign="start baseline" fxLayoutGap="20px"
(ngSubmit)="addFund()" *mifosxHasPermission="'CREATE_FUND'">
@@ -14,9 +14,11 @@
</mat-error>
</mat-form-field>
<button mat-raised-button fxFlex color="primary" [disabled]="!fundForm.valid">
<fa-icon icon="plus"></fa-icon>
</button>
<div #buttonAddFund fxFlex>
<button mat-raised-button color="primary" [disabled]="!fundForm.valid">
<fa-icon icon="plus"></fa-icon>
</button>
</div>
</form>
@@ -41,3 +43,15 @@
</mat-card>
</div>
<ng-template #templateFundFormRef let-popover="popover">
<h2>Manage Funds</h2>
<p class="mw300">This form will be used to add fund. If you would like to add fund click on add funds button and fill the fund name then click on + button else click Next or Back. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141736/Manage+Funds" target="_blank">Manage Funds</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();">Add Funds</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/manage-funds/manage-funds.component.ts
+87 -4
View File
@@ -1,6 +1,6 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
import { FormBuilder, Validators } from '@angular/forms';
@@ -13,6 +13,11 @@ import { InputBase } from 'app/shared/form-dialog/formfield/model/input-base';
/** Custom Services */
import { OrganizationService } from '../organization.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Manage Funds component.
@@ -22,7 +27,7 @@ import { OrganizationService } from '../organization.service';
templateUrl: './manage-funds.component.html',
styleUrls: ['./manage-funds.component.scss']
})
export class ManageFundsComponent implements OnInit {
export class ManageFundsComponent implements OnInit, AfterViewInit {
/** Manage Funds data. */
fundsData: any;
@@ -31,17 +36,28 @@ export class ManageFundsComponent implements OnInit {
/** Funds form reference */
@ViewChild('formRef') formRef: any;
/* Refernce of funds form */
@ViewChild('fundFormRef') fundFormRef: ElementRef<any>;
/* Template for popover on funds form */
@ViewChild('templateFundFormRef') templateFundFormRef: TemplateRef<any>;
/**
* Retrieves the manage funds data from `resolve`.
* @param {ActivatedRoute} route Activated Route
* @param {FormBuilder} formBuilder Form Builder
* @param {OrganizationService} organizationservice Organization Service
* @param {MatDialog} dialog Mat Dialog
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute,
private formBuilder: FormBuilder,
private organizationservice: OrganizationService,
public dialog: MatDialog) {
public dialog: MatDialog,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { funds: any }) => {
this.fundsData = data.funds;
});
@@ -71,6 +87,10 @@ export class ManageFundsComponent implements OnInit {
name: newFund.name
});
this.formRef.resetForm();
if (this.configurationWizardService.showManageFunds === true) {
this.configurationWizardService.showManageFunds = false;
this.openDialog();
}
});
}
@@ -105,4 +125,67 @@ export class ManageFundsComponent implements OnInit {
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showManageFunds === true) {
setTimeout(() => {
this.showPopover(this.templateFundFormRef, this.fundFormRef.nativeElement, 'bottom', true);
});
}
}
/**
* Previous Step (Organization Page) Dialog Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/organization']);
}
/**
* Next Step (Manage Reports) Dialog Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showManageFunds = false;
this.configurationWizardService.showManageReports = true;
this.router.navigate(['/system']);
}
/**
* Opens dialog if the user wants to edit more funds.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'fund'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showManageFunds = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showManageFunds = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/manage-funds']);
} else if (response.step === 3) {
this.configurationWizardService.showManageFunds = false;
this.configurationWizardService.showManageReports = true;
this.router.navigate(['/system']);
}
});
}
}
src/app/organization/offices/create-office/create-office.component.html
+13 -2
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="column">
<div #createOfficeFormRef fxLayout="column">
<mat-form-field>
<mat-label>Office</mat-label>
@@ -19,7 +19,7 @@
<mat-form-field>
<mat-label>Parent Office</mat-label>
<mat-select required formControlName="parentId">
<mat-option *ngFor="let office of officeData" [value]="office.id">
<mat-option *ngFor="let office of officeData" [value]="office.id" >
{{ office.name }}
</mat-option>
</mat-select>
@@ -57,3 +57,14 @@
</mat-card>
</div>
<ng-template #templateCreateOfficeForm let-popover="popover">
<h2>Create Office</h2>
<p class="mw400">Click to start filling the details. * mark fields are neccessary. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67141727/Manage+Offices" target="_blank">Manage Offices</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close()">Create Office</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next Step</button>
</div>
</ng-template>
src/app/organization/offices/create-office/create-office.component.ts
+93 -4
View File
@@ -1,5 +1,6 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef , ViewChild,
AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
@@ -7,6 +8,12 @@ import { Router, ActivatedRoute } from '@angular/router';
import { OrganizationService } from '../../organization.service';
import { SettingsService } from 'app/settings/settings.service';
import { Dates } from 'app/core/utils/dates';
import { MatDialog } from '@angular/material/dialog';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Component */
import { ContinueSetupDialogComponent } from '../../../configuration-wizard/continue-setup-dialog/continue-setup-dialog.component';
/**
* Create Office component.
@@ -16,7 +23,7 @@ import { Dates } from 'app/core/utils/dates';
templateUrl: './create-office.component.html',
styleUrls: ['./create-office.component.scss']
})
export class CreateOfficeComponent implements OnInit {
export class CreateOfficeComponent implements OnInit, AfterViewInit {
/** Office form. */
officeForm: FormGroup;
@@ -27,6 +34,11 @@ export class CreateOfficeComponent implements OnInit {
/** Maximum Date allowed. */
maxDate = new Date();
/* Reference of create office form */
@ViewChild('createOfficeFormRef') createOfficeFormRef: ElementRef<any>;
/* template for popover on create office form */
@ViewChild('templateCreateOfficeForm') templateCreateOfficeForm: TemplateRef<any>;
/**
* Retrieves the offices data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -35,13 +47,19 @@ export class CreateOfficeComponent implements OnInit {
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {Dates} dateUtils Date Utils to format date.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private organizationService: OrganizationService,
private settingsService: SettingsService,
private router: Router,
private route: ActivatedRoute,
private dateUtils: Dates) {
private dateUtils: Dates,
private popoverService: PopoverService,
private configurationWizardService: ConfigurationWizardService,
public dialog: MatDialog) {
this.route.data.subscribe((data: { offices: any }) => {
this.officeData = data.offices;
});
@@ -82,7 +100,78 @@ export class CreateOfficeComponent implements OnInit {
locale
};
this.organizationService.createOffice(data).subscribe(response => {
this.router.navigate(['../'], { relativeTo: this.route });
if (this.configurationWizardService.showOfficeForm === true) {
this.configurationWizardService.showOfficeForm = false;
this.openDialog();
} else {
this.router.navigate(['../'], { relativeTo: this.route });
}
});
}
/**
* Opens dialog if users wants to create more offices.
*/
openDialog() {
const continueSetupDialogRef = this.dialog.open(ContinueSetupDialogComponent, {
data: {
stepName: 'office'
},
});
continueSetupDialogRef.afterClosed().subscribe((response: { step: number }) => {
if (response.step === 1) {
this.configurationWizardService.showOfficeForm = false;
this.router.navigate(['../'], { relativeTo: this.route });
} else if (response.step === 2) {
this.configurationWizardService.showOfficeForm = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/organization/offices/create']);
} else if (response.step === 3) {
this.configurationWizardService.showOfficeForm = false;
this.configurationWizardService.showAddEditCurrency = true;
this.router.navigate(['/organization']);
}
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showOfficeForm === true) {
setTimeout(() => {
this.showPopover(this.templateCreateOfficeForm, this.createOfficeFormRef.nativeElement, 'right', true);
});
}
}
/**
* Next Step (Add Edit Currency) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showOfficeForm = false;
this.configurationWizardService.showAddEditCurrency = true;
this.router.navigate(['/organization']);
}
/**
* Previous Step (Manage Offices Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showOfficeForm = false;
this.configurationWizardService.showOfficeTable = true;
this.router.navigate(['/organization/offices']);
}
}
src/app/organization/offices/offices.component.html
+60 -6
View File
@@ -1,32 +1,38 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<button mat-raised-button color="primary">
<fa-icon icon="sitemap"></fa-icon>&nbsp;&nbsp;
Tree View
</button>
<div #buttonTreeView class="in-block">
<button mat-raised-button color="primary">
<fa-icon icon="sitemap"></fa-icon>&nbsp;&nbsp;
Tree View
</button>
</div>
<div #buttonCreateOffice class="in-block">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_OFFICE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Office
</button>
</div>
<div #buttonImportOffices class="in-block">
<button mat-raised-button color="primary" *mifosxHasPermission="'CREATE_OFFICE'" [routerLink]="['/organization', 'bulk-import', 'Offices']">
<fa-icon icon="upload"></fa-icon>&nbsp;&nbsp;
Import Offices
</button>
</div>
</div>
<div class="container">
<div fxLayout="row" fxLayoutGap="20px">
<div #filter fxLayout="row" fxLayoutGap="20px">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<div #tableOffices class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
@@ -60,3 +66,51 @@
</div>
</div>
<ng-template #templateButtonTreeView let-popover="popover">
<h2>Tree View</h2>
<p class="mw300">This will launch an alternative view which allows you to view the office hierarchy for your organization.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateButtonCreateOffice let-popover="popover">
<h2>Create Office</h2>
<p class="mw300">This option allows you to create new offices in your organization.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonTreeView,buttonTreeView,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateButtonImportOffices let-popover="popover">
<h2>Import Offices</h2>
<p class="mw300">This will launch the Bulk import/Offices page.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateOffice,buttonCreateOffice,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter offices.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonImportOffices,buttonImportOffices,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableOffices,tableOffices,'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateTableOffices let-popover="popover">
<h4>List of offices in the organization.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter,filter,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/organization/offices/offices.component.ts
+70 -4
View File
@@ -1,13 +1,17 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router, } from '@angular/router';
/** rxjs Imports */
import { of } from 'rxjs';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/**
* Offices component.
*/
@@ -16,7 +20,7 @@ import { of } from 'rxjs';
templateUrl: './offices.component.html',
styleUrls: ['./offices.component.scss']
})
export class OfficesComponent implements OnInit {
export class OfficesComponent implements OnInit, AfterViewInit {
/** Offices data. */
officesData: any;
@@ -30,11 +34,26 @@ export class OfficesComponent implements OnInit {
/** Sorter for offices table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of tree view button */
@ViewChild('buttonTreeView') buttonTreeView: ElementRef<any>;
/* Template for popover on tree view button */
@ViewChild('templateButtonTreeView') templateButtonTreeView: TemplateRef<any>;
/* Reference of offices table */
@ViewChild('tableOffices') tableOffices: ElementRef<any>;
/* Template for popover on offices table */
@ViewChild('templateTableOffices') templateTableOffices: TemplateRef<any>;
/**
* Retrieves the offices data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { offices: any }) => {
this.officesData = data.offices;
});
@@ -64,4 +83,51 @@ export class OfficesComponent implements OnInit {
this.dataSource.sort = this.sort;
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showOfficeList === true) {
setTimeout(() => {
this.showPopover(this.templateButtonTreeView, this.buttonTreeView.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showOfficeTable === true) {
setTimeout(() => {
this.showPopover(this.templateTableOffices, this.tableOffices.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create Office Form) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showOfficeList = false;
this.configurationWizardService.showOfficeTable = false;
this.configurationWizardService.showOfficeForm = true;
this.router.navigate(['/organization/offices/create']);
}
/**
* Previous Step ( Manage Offices Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showOfficeList = false;
this.configurationWizardService.showOfficeTable = false;
this.configurationWizardService.showCreateOffice = true;
this.router.navigate(['/organization']);
}
}
src/app/organization/organization.component.html
+72 -1
View File
@@ -8,6 +8,7 @@
<mat-nav-list>
<div #office>
<mat-list-item [routerLink]="['offices']" *mifosxHasPermission="'READ_OFFICE'">
<mat-icon matListIcon>
<fa-icon icon="building" size="sm"></fa-icon>
@@ -15,7 +16,9 @@
<h4 matLine>Manage Offices</h4>
<p matLine>Add new office or modify or deactivate office or modify hierarchy</p>
</mat-list-item>
</div>
<div #holidays>
<mat-list-item [routerLink]="['holidays']" *mifosxHasPermission="'READ_HOLIDAY'">
<mat-icon matListIcon>
<fa-icon icon="calendar-alt" size="sm"></fa-icon>
@@ -23,7 +26,9 @@
<h4 matLine>Manage Holidays</h4>
<p matLine>Define holidays for office</p>
</mat-list-item>
</div>
<div #employee>
<mat-list-item [routerLink]="['employees']" *mifosxHasPermission="'READ_STAFF'">
<mat-icon matListIcon>
<fa-icon icon="user" size="sm"></fa-icon>
@@ -31,6 +36,7 @@
<h4 matLine>Manage Employees</h4>
<p matLine>An employee represents loan officers with no access to systems</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['standing-instructions-history']" *mifosxHasPermission="'READ_STANDINGINSTRUCTION'">
<mat-icon matListIcon>
@@ -80,6 +86,7 @@
<mat-nav-list>
<div #addEditCurrency>
<mat-list-item [routerLink]="['currencies']" *mifosxHasPermission="'READ_CURRENCY'">
<mat-icon matListIcon>
<fa-icon icon="cogs" size="sm"></fa-icon>
@@ -87,8 +94,9 @@
<h4 matLine>Currency Configuration</h4>
<p matLine>Currencies available across organization for different products</p>
</mat-list-item>
</div>
<div #manageFunds>
<mat-list-item [routerLink]="['manage-funds']" *mifosxHasPermission="'READ_FUND'">
<mat-icon matListIcon>
<fa-icon icon="money-bill-alt" size="sm"></fa-icon>
@@ -96,6 +104,7 @@
<h4 matLine>Manage Funds</h4>
<p matLine>Funds are associated with loans</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['bulkloan']" *mifosxHasPermission="'BULKREASSIGN_LOAN'">
<mat-icon matListIcon>
@@ -113,6 +122,7 @@
<p matLine>Manage Tellers / Cashiers and Cash Allocation and Settlement</p>
</mat-list-item>
<div #workingDays>
<mat-list-item [routerLink]="['working-days']" *mifosxHasPermission="'READ_WORKINGDAYS'">
<mat-icon matListIcon>
<fa-icon icon="calendar-alt" size="sm"></fa-icon>
@@ -120,6 +130,7 @@
<h4 matLine>Working Days</h4>
<p matLine>Define working days and configure behaviour of payments due on holidays</p>
</mat-list-item>
</div>
<mat-list-item [routerLink]="['payment-types']" *mifosxHasPermission="'READ_PAYMENTTYPE'">
<mat-icon matListIcon>
@@ -162,3 +173,63 @@
</mat-card>
</div>
<ng-template #templateOffice let-popover="popover">
<h2>Manage Offices</h2>
<p class="mw300">The Manage Offices page allows you to create, edit and add the offices within your organization.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepOffice()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepOffice()">Next</button>
</div>
</ng-template>
<ng-template #templateAddEditCurrency let-popover="popover">
<h2>Currency Configuration</h2>
<p class="mw300">This section allows an organization to define what currencies will be used throughout their interactions within the Mifos X system.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepAddEditCurrency()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepAddEditCurrency()">Next</button>
</div>
</ng-template>
<ng-template #templateHolidays let-popover="popover">
<h2>Manage Holidays</h2>
<p class="mw300">The ability to manage holidays for individual offices is a very useful tool for an organization spanning multiple locations.Use this option to customize holidays for each office of your organization.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepHolidays()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepHolidays()">Next</button>
</div>
</ng-template>
<ng-template #templateEmployee let-popover="popover">
<h2>Manage Employees</h2>
<p class="mw300">With this option, you may view, edit and/or delete your organization's employees.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepEmployee()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepEmployee()">Next</button>
</div>
</ng-template>
<ng-template #templateWorkingDays let-popover="popover">
<h2>Working Days</h2>
<p class="mw300">Working days page allows you to define which days of the week are working days.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepWorkingDays()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepWorkingDays()">Next</button>
</div>
</ng-template>
<ng-template #templateManageFunds let-popover="popover">
<h2>Manage Funds</h2>
<p class="mw300">This allows you to manage funds associated with loans.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStepManageFunds()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStepManageFunds()">Next</button>
</div>
</ng-template>
src/app/organization/organization.component.ts
+192 -3
View File
@@ -1,5 +1,10 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd } from '@angular/router';
/** Custom Services */
import { PopoverService } from '../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
/**
* Organization component.
@@ -9,11 +14,195 @@ import { Component, OnInit } from '@angular/core';
templateUrl: './organization.component.html',
styleUrls: ['./organization.component.scss']
})
export class OrganizationComponent implements OnInit {
export class OrganizationComponent implements OnInit, AfterViewInit {
constructor() { }
/* Reference of manage offices */
@ViewChild('office') office: ElementRef<any>;
/* Template for popover on manage offices */
@ViewChild('templateOffice') templateOffice: TemplateRef<any>;
/* Reference of add/edit currency */
@ViewChild('addEditCurrency') addEditCurrency: ElementRef<any>;
/* Template for popover on add/edit currency */
@ViewChild('templateAddEditCurrency') templateAddEditCurrency: TemplateRef<any>;
/* Reference of manage holidays */
@ViewChild('holidays') holidays: ElementRef<any>;
/* Template for popover on manage holidays */
@ViewChild('templateHolidays') templateHolidays: TemplateRef<any>;
/* Reference of manage employees */
@ViewChild('employee') employee: ElementRef<any>;
/* Template for popover on manage employee */
@ViewChild('templateEmployee') templateEmployee: TemplateRef<any>;
/* Reference of define working days */
@ViewChild('workingDays') workingDays: ElementRef<any>;
/* Template for popover on define working days */
@ViewChild('templateWorkingDays') templateWorkingDays: TemplateRef<any>;
/* Reference of manage funds */
@ViewChild('manageFunds') manageFunds: ElementRef<any>;
/* Template for popover on manage funds */
@ViewChild('templateManageFunds') templateManageFunds: TemplateRef<any>;
/**
* @param {ActivatedRoute} activatedRoute ActivatedRoute.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private activatedRoute: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) { }
ngOnInit() {
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showCreateOffice === true) {
setTimeout(() => {
this.showPopover(this.templateOffice, this.office.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showAddEditCurrency === true) {
setTimeout(() => {
this.showPopover(this.templateAddEditCurrency, this.addEditCurrency.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCreateHoliday === true) {
setTimeout(() => {
this.showPopover(this.templateHolidays, this.holidays.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showCreateEmployee === true) {
setTimeout(() => {
this.showPopover(this.templateEmployee, this.employee.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showDefineWorkingDays === true) {
setTimeout(() => {
this.showPopover(this.templateWorkingDays, this.workingDays.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showManageFunds === true) {
setTimeout(() => {
this.showPopover(this.templateManageFunds, this.manageFunds.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Manage Offices Page) Configuration Wizard.
*/
nextStepOffice() {
this.configurationWizardService.showCreateOffice = false;
this.configurationWizardService.showOfficeList = true;
this.router.navigate(['/organization/offices']);
}
/**
* Previous Step (Home component) Configuration Wizard.
*/
previousStepOffice() {
this.configurationWizardService.showCreateOffice = false;
this.configurationWizardService.showHomeSearchActivity = true;
this.router.navigate(['/home']);
}
/**
* Next Step (Add/Edit Currency Page) Configuration Wizard.
*/
nextStepAddEditCurrency() {
this.configurationWizardService.showAddEditCurrency = false;
this.configurationWizardService.showCurrencyPage = true;
this.router.navigate(['/organization/currencies']);
}
/**
* Previous Step (Office Form) Configuration Wizard.
*/
previousStepAddEditCurrency() {
this.configurationWizardService.showAddEditCurrency = false;
this.configurationWizardService.showOfficeForm = true;
this.router.navigate(['/organization/offices/create']);
}
/**
* Next Step (manage Holidays Page) Configuration Wizard.
*/
nextStepHolidays() {
this.configurationWizardService.showCreateHoliday = false;
this.configurationWizardService.showHolidayPage = true;
this.router.navigate(['/organization/holidays']);
}
/**
* Previous Step (Currency Form) Configuration Wizard.
*/
previousStepHolidays() {
this.configurationWizardService.showCreateHoliday = false;
this.configurationWizardService.showCurrencyForm = true;
this.router.navigate(['/organization/currencies/manage']);
}
/**
* Next Step (Manage Employees Page) Configuration Wizard.
*/
nextStepEmployee() {
this.configurationWizardService.showCreateEmployee = false;
this.configurationWizardService.showEmployeeList = true;
this.router.navigate(['/organization/employees']);
}
/**
* Previous Step (Holiday Form) Configuration Wizard.
*/
previousStepEmployee() {
this.configurationWizardService.showCreateEmployee = false;
this.configurationWizardService.showHolidayFilter = true;
this.router.navigate(['/organization/holidays']);
}
/**
* Next Step (Define Working Days Page) Configuration Wizard.
*/
nextStepWorkingDays() {
this.router.navigate(['/organization/working-days']);
}
/**
* Previous Step (Employee Form) Configuration Wizard.
*/
previousStepWorkingDays() {
this.configurationWizardService.showDefineWorkingDays = false;
this.configurationWizardService.showEmployeeForm = true;
this.router.navigate(['/organization/employees/create']);
}
/**
* Next Step (Manage Funds Page) Configuration Wizard.
*/
nextStepManageFunds() {
this.router.navigate(['/organization/manage-funds']);
}
/**
* Previous Step (Recurring Deposit Page) Configuration Wizard.
*/
previousStepManageFunds() {
this.configurationWizardService.showManageFunds = false;
this.configurationWizardService.showRecurringDepositProductsList = true;
this.router.navigate(['/products/recurring-deposit-products']);
}
}
src/app/organization/tellers/cashiers/cashiers.component.html
+1 -1
View File
@@ -49,7 +49,7 @@
<button class="cashier-action-button" mat-raised-button color="primary" matTooltip="View Transactions"
(click)="routeEdit($event)" [routerLink]="[cashier.id, 'transactions']" *mifosxHasPermission="'ALLOCATECASHIER_TELLER'">
<i class="fa fa-eye"></i>
</button>
</button>
</td>
</ng-container>
src/app/organization/tellers/cashiers/transactions/transactions.component.html
+11 -11
View File
@@ -67,7 +67,7 @@
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
<mat-form-field>
<mat-label> Select Currency </mat-label>
<mat-select [formControl]="currencySelector" required>
@@ -87,41 +87,41 @@
<th mat-header-cell *matHeaderCellDef mat-sort-header> Date </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnDate | dateFormat }} </td>
</ng-container>
<ng-container matColumnDef="transactions">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Transactions </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value }} </td>
</ng-container>
<ng-container matColumnDef="allocation">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Allocation ({{cashierData.sumCashAllocation | number}}) </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Allocate Cash" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<ng-container matColumnDef="cashIn">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Cash In ({{cashierData.sumInwardCash | number}}) </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash In" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<ng-container matColumnDef="cashOut">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Cash Out ({{cashierData.sumOutwardCash | number}}) </th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Cash Out" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<ng-container matColumnDef="settlement">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Settlement ({{cashierData.sumCashSettlement | number}})</th>
<td mat-cell *matCellDef="let transaction"> {{ transaction.txnType.value === "Settle Cash" ? (transaction.txnAmount | number) : '-' }} </td>
</ng-container>
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="select-row" [routerLink]="[row.id]"></tr>
</table>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
<mat-paginator [pageSizeOptions]="[10, 25, 50, 100]" showFirstLastButtons></mat-paginator>
</div>
</mat-card>
</div>
src/app/organization/tellers/teller-transaction-template.resolver.ts
+32
View File
@@ -0,0 +1,32 @@
/** Angular Imports */
import { Injectable } from '@angular/core';
import { Resolve, ActivatedRouteSnapshot } from '@angular/router';
/** rxjs Imports */
import { Observable } from 'rxjs';
/** Custom Services */
import { OrganizationService } from 'app/organization/organization.service';
/**
* Cashier transaction data resolver.
*/
@Injectable()
export class CashierTransactionTemplateResolver implements Resolve<Object> {
/**
* @param {OrganizationService} organizationService Organization service.
*/
constructor(private organizationService: OrganizationService) {}
/**
* Returns the cashier transaction data.
* @returns {Observable<any>}
*/
resolve(route: ActivatedRouteSnapshot): Observable<any> {
const cashierId = route.parent.paramMap.get('id');
const tellerId = route.parent.parent.paramMap.get('id');
return this.organizationService.getCashierTransactionTemplate(tellerId, cashierId);
}
}
src/app/organization/working-days/working-days.component.html
+12 -1
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="column">
<div #workingDaysFormRef fxLayout="column">
<div fxLayout="row" fxLayout.lt-md="column">
<mat-label fxFlex="50%" class="mat-h4">Working Days</mat-label>
@@ -46,3 +46,14 @@
</mat-card>
</div>
<ng-template #templateWorkingDaysFormRef let-data let-popover="popover">
<h2>Working Days</h2>
<p class="mw400">Click (Define Working Days) to define working days. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/90243212/Working+Days" target="_blank">Working Days</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close()">Define Working Days</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next Step</button>
</div>
</ng-template>
src/app/organization/working-days/working-days.component.ts
+86 -4
View File
@@ -1,11 +1,17 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormBuilder, FormArray, FormControl } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
import { MatDialog } from '@angular/material/dialog';
/** Custom Services */
import { OrganizationService } from '../organization.service';
import { SettingsService } from 'app/settings/settings.service';
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
/** Custom Dialog Components */
import { NextStepDialogComponent } from '../../configuration-wizard/next-step-dialog/next-step-dialog.component';
/** Recurrence default value. */
const recurrenceDefaultValue = 'FREQ=WEEKLY;INTERVAL=1;BYDAY=';
@@ -18,7 +24,7 @@ const recurrenceDefaultValue = 'FREQ=WEEKLY;INTERVAL=1;BYDAY=';
templateUrl: './working-days.component.html',
styleUrls: ['./working-days.component.scss']
})
export class WorkingDaysComponent implements OnInit {
export class WorkingDaysComponent implements OnInit, AfterViewInit {
/** Working days form. */
workingDaysForm: FormGroup;
@@ -37,6 +43,11 @@ export class WorkingDaysComponent implements OnInit {
/** Repayment schedule type data. */
repaymentRescheduleTypeData: any;
/* Reference of define working days form */
@ViewChild('workingDaysFormRef') workingDaysFormRef: ElementRef<any>;
/* Template for popover on define working days form */
@ViewChild('templateWorkingDaysFormRef') templateWorkingDaysFormRef: TemplateRef<any>;
/**
* Retrieves the working days data from `resolve`.
* @param {FormBuilder} formBuilder Form Builder.
@@ -44,12 +55,18 @@ export class WorkingDaysComponent implements OnInit {
* @param {OrganizationService} organizationService Organization Service.
* @param {SettingsService} settingsService Settings Service.
* @param {Router} router Router for navigation.
* @param {MatDialog} dialog MatDialog.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private route: ActivatedRoute,
private organizationService: OrganizationService,
private settingsService: SettingsService,
private router: Router) {
private router: Router,
private dialog: MatDialog,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe((data: { workingDays: any }) => {
this.workingDaysData = data.workingDays;
});
@@ -115,8 +132,73 @@ export class WorkingDaysComponent implements OnInit {
}
workingDays.recurrence = recurrence;
this.organizationService.updateWorkingDays(workingDays).subscribe(response => {
this.router.navigate(['../'], { relativeTo: this.route });
if (this.configurationWizardService.showDefineWorkingDays === true) {
this.configurationWizardService.showDefineWorkingDays = false;
this.openNextStepDialog();
} else {
this.router.navigate(['../'], { relativeTo: this.route });
}
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showDefineWorkingDays === true) {
setTimeout(() => {
this.showPopover(this.templateWorkingDaysFormRef, this.workingDaysFormRef.nativeElement, 'right', true);
});
}
}
/**
* Open Dialog for next step.
* Next Step (System) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showDefineWorkingDays = false;
this.openNextStepDialog();
}
/**
* Previous Step (Organization Page) Configuration Wizard.
*/
previousStep() {
this.router.navigate(['/organization']);
}
/**
* Next Step (System) Dialog Configuration Wizard.
*/
openNextStepDialog() {
const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
data: {
nextStepName: 'Setup System',
previousStepName: 'Organization',
stepPercentage: 30
},
});
nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
if (response.nextStep) {
this.configurationWizardService.showDefineWorkingDays = false;
this.configurationWizardService.showDatatables = true;
this.router.navigate(['/system']);
} else {
this.configurationWizardService.showDefineWorkingDays = false;
this.router.navigate(['/home']);
}
});
}
}