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/system/codes/codes.component.html
+36 -6
View File
@@ -1,20 +1,22 @@
<div class="container m-b-20" fxLayout="row" fxLayoutAlign="end" fxLayoutGap="20px">
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Code
</button>
<div #buttonCreateCode>
<button mat-raised-button color="primary" [routerLink]="['create']" *mifosxHasPermission="'CREATE_CODE'">
<fa-icon icon="plus"></fa-icon>&nbsp;&nbsp;
Create Code
</button>
</div>
</div>
<div class="container">
<div fxLayout="row">
<div #filter fxLayout="row">
<mat-form-field fxFlex>
<mat-label>Filter</mat-label>
<input matInput (keyup)="applyFilter($event.target.value)">
</mat-form-field>
</div>
<div class="mat-elevation-z8">
<div #tableCodes class="mat-elevation-z8">
<table mat-table [dataSource]="dataSource" matSort>
<ng-container matColumnDef="name">
<th mat-header-cell *matHeaderCellDef mat-sort-header> Code Name </th>
@@ -37,3 +39,31 @@
</div>
</div>
<ng-template #templateButtonCreateCode let-popover="popover">
<h2>Manage Codes</h2>
<p class="mw300">To create additional codes.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep();">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFilter let-popover="popover">
<h4>Search bar to filter codes.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateButtonCreateCode, buttonCreateCode, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateTableCodes, tableCodes, 'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateTableCodes let-popover="popover">
<h4>List of all codes in the Mifos system for your organization.</h4>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFilter, filter, 'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/system/codes/codes.component.ts
+70 -4
View File
@@ -1,16 +1,20 @@
/** Angular Imports */
import { Component, OnInit, ViewChild } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { MatTableDataSource } from '@angular/material/table';
import { ActivatedRoute } from '@angular/router';
import { ActivatedRoute, Router } from '@angular/router';
/** Custom Services */
import { PopoverService } from '../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
@Component({
selector: 'mifosx-codes',
templateUrl: './codes.component.html',
styleUrls: ['./codes.component.scss']
})
export class CodesComponent implements OnInit {
export class CodesComponent implements OnInit, AfterViewInit {
/** Codes data. */
codesData: any;
@@ -24,11 +28,26 @@ export class CodesComponent implements OnInit {
/** Sorter for codes table. */
@ViewChild(MatSort, { static: true }) sort: MatSort;
/* Reference of create code button */
@ViewChild('buttonCreateCode') buttonCreateCode: ElementRef<any>;
/* Template for popover on create code button */
@ViewChild('templateButtonCreateCode') templateButtonCreateCode: TemplateRef<any>;
/* Reference of codes table */
@ViewChild('tableCodes') tableCodes: ElementRef<any>;
/* Template for popover on codes table */
@ViewChild('templateTableCodes') templateTableCodes: TemplateRef<any>;
/**
* Retrieves the codes data from `resolve`.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private route: ActivatedRoute) {
constructor(private route: ActivatedRoute,
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.route.data.subscribe(( data: { codes: any }) => {
this.codesData = data.codes;
});
@@ -58,4 +77,51 @@ export class CodesComponent implements OnInit {
this.dataSource.filter = filterValue.trim().toLowerCase();
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showSystemCodesPage === true) {
setTimeout(() => {
this.showPopover(this.templateButtonCreateCode, this.buttonCreateCode.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showSystemCodesList === true) {
setTimeout(() => {
this.showPopover(this.templateTableCodes, this.tableCodes.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Create Codes Page) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showSystemCodesPage = false;
this.configurationWizardService.showSystemCodesList = false;
this.configurationWizardService.showSystemCodesForm = true;
this.router.navigate(['/system/codes/create']);
}
/**
* Previous Step (manage Codes System Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showSystemCodesPage = false;
this.configurationWizardService.showSystemCodesList = false;
this.configurationWizardService.showSystemCodes = true;
this.router.navigate(['/system']);
}
}
src/app/system/codes/create-code/create-code.component.html
+12 -1
View File
@@ -6,7 +6,7 @@
<mat-card-content>
<div fxLayout="column">
<div #codeFormRef fxLayout="column">
<mat-form-field>
<mat-label>Code Name</mat-label>
@@ -30,3 +30,14 @@
</mat-card>
</div>
<ng-template #templateCodeFormRef let-data let-popover="popover">
<h2>Create Code</h2>
<p class="mw400">To create code, click on create code and enter the code name.<br> For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895350/Manage+Codes" target="_blank">Manage Codes</a></p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close()">Create Code</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/system/codes/create-code/create-code.component.ts
+60 -3
View File
@@ -1,31 +1,43 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit, TemplateRef, ElementRef, ViewChild, AfterViewInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';
/** Custom Services */
import { SystemService } from '../../system.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { PopoverRef } from '../../../configuration-wizard/popover/popover-ref';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
@Component({
selector: 'mifosx-create-code',
templateUrl: './create-code.component.html',
styleUrls: ['./create-code.component.scss']
})
export class CreateCodeComponent implements OnInit {
export class CreateCodeComponent implements OnInit, AfterViewInit {
/** Code form. */
codeForm: FormGroup;
/* Reference of create code form */
@ViewChild('codeFormRef') codeFormRef: ElementRef<any>;
/* Template for popover on create code form */
@ViewChild('templateCodeFormRef') templateCodeFormRef: TemplateRef<any>;
/**
* @param {FormBuilder} formBuilder Form Builder.
* @param {SystemService} systemService Accounting Service.
* @param {ActivatedRoute} route Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private formBuilder: FormBuilder,
private systemService: SystemService,
private route: ActivatedRoute,
private router: Router) { }
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) { }
/**
* Creates the code form.
@@ -50,8 +62,53 @@ export class CreateCodeComponent implements OnInit {
submit() {
this.systemService.createCode(this.codeForm.value)
.subscribe((response: any) => {
if (this.configurationWizardService.showSystemCodesForm === true) {
this.configurationWizardService.showSystemCodesForm = false;
this.configurationWizardService.showRolesandPermission = true;
this.router.navigate(['/system']);
} else {
this.router.navigate(['../', response.resourceId], { relativeTo: this.route });
}
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showSystemCodesForm === true) {
setTimeout(() => {
this.showPopover(this.templateCodeFormRef, this.codeFormRef.nativeElement, 'right', true);
});
}
}
/**
* Next Step (Roles and Permission) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showSystemCodesForm = false;
this.configurationWizardService.showRolesandPermission = true;
this.router.navigate(['/system']);
}
/**
* Previous Step (Manage Codes Page) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showSystemCodesForm = false;
this.configurationWizardService.showSystemCodesList = true;
this.router.navigate(['/system/codes']);
}
}