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/core/shell/breadcrumb/breadcrumb.component.html
+11 -1
View File
@@ -1,6 +1,6 @@
<nav class="breadcrumb-wrapper">
<ul class="breadcrumb">
<span class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label }}</span>
<span #breadcrumb class="breadcrumb-title">{{ breadcrumbs[breadcrumbs.length-1].label }}</span>
<span *ngIf="breadcrumbs.length-1 !== 0" class="separator">
<li *ngFor="let breadcrumb of breadcrumbs; let last = last" class="breadcrumb-label">
<span *ngIf="!last" class="breadcrumb-link">
@@ -12,3 +12,13 @@
</span>
</ul>
</nav>
<ng-template #templateBreadcrumb let-popover="popover">
<h2>Breadcrumbs</h2>
<p class="mw300">This will show the user's current location in the app.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/core/shell/breadcrumb/breadcrumb.component.ts
+59 -3
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit } from '@angular/core';
import { Component, OnInit , TemplateRef, ElementRef , ViewChild, AfterViewInit} from '@angular/core';
import { ActivatedRoute, Router, NavigationEnd, Data } from '@angular/router';
/** rxjs Imports */
@@ -8,6 +8,10 @@ import { filter } from 'rxjs/operators';
/** Custom Model */
import { Breadcrumb } from './breadcrumb.model';
/** Custom Services */
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/**
* Route data property to generate breadcrumb using a static string.
*
@@ -45,18 +49,26 @@ const routeAddBreadcrumbLink = 'addBreadcrumbLink';
templateUrl: './breadcrumb.component.html',
styleUrls: ['./breadcrumb.component.scss']
})
export class BreadcrumbComponent implements OnInit {
export class BreadcrumbComponent implements OnInit, AfterViewInit {
/** Array of breadcrumbs. */
breadcrumbs: Breadcrumb[];
/* Reference of breadcrumb */
@ViewChild('breadcrumb') breadcrumb: ElementRef<any>;
/* Template for popover on breadcrumb */
@ViewChild('templateBreadcrumb') templateBreadcrumb: TemplateRef<any>;
/**
* Generates the breadcrumbs.
* @param {ActivatedRoute} activatedRoute Activated Route.
* @param {Router} router Router for navigation.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private activatedRoute: ActivatedRoute,
private router: Router) {
private router: Router,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.generateBreadcrumbs();
}
@@ -160,4 +172,48 @@ export class BreadcrumbComponent implements OnInit {
});
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popover.
*/
ngAfterViewInit() {
if (this.configurationWizardService.showBreadcrumbs === true) {
setTimeout(() => {
this.showPopover(this.templateBreadcrumb, this.breadcrumb.nativeElement, 'bottom', true);
});
}
}
/**
* Next Step (Home) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showBreadcrumbs = false;
this.configurationWizardService.showHome = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
/**
* Previous Step (SideNavBar) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showBreadcrumbs = false;
this.configurationWizardService.showSideNavChartofAccounts = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
}
src/app/core/shell/sidenav/sidenav.component.html
+90 -8
View File
@@ -8,7 +8,7 @@
<!-- TODO: Allow customization by organization -->
<div class="app-brand" [routerLink]="['/home']">
<img src="assets/images/MifosX_logo.png" alt="app-logo" class="app-logo">
<span class="app-logo-text text-muted">Mifos</span>
<span #logo class="app-logo-text text-muted">Mifos</span>
</div>
<div class="app-user">
@@ -19,7 +19,7 @@
<span class="app-user-name mb-05">
{{ username }}
</span>
<div class="app-user-controls">
<div #userPanel class="app-user-controls">
<button class="xs-button" mat-icon-button matTooltip="Settings" [routerLink]="['/settings']">
<fa-icon icon="cog"></fa-icon>
</button>
@@ -31,10 +31,12 @@
<div class="app-sidenav">
<div #frequentlyAccessed>
<div class="mt-1 mb-1 nav-item-sep">
<mat-divider></mat-divider>
<span class="text-muted icon-menu-title">Frequently Accessed</span>
</div>
</div>
<div class="icon-menu">
<div class="icon-menu-item" *ngFor="let activity of mappedActivities">
<button mat-raised-button [matTooltip]="activity.toolTip" [routerLink]="[activity.path]">
@@ -53,13 +55,13 @@
<mat-icon matListIcon >
<fa-icon icon="tachometer-alt" size="sm"></fa-icon>
</mat-icon>
<a matLine>Dashboard</a>
<a matLine #dashboard>Dashboard</a>
</mat-list-item>
<mat-list-item [routerLink]="['/navigation']" matTooltip="Navigation">
<mat-icon matListIcon>
<fa-icon icon="location-arrow" size="sm"></fa-icon>
</mat-icon>
<a matLine>Navigation</a>
<a matLine #navigation>Navigation</a>
</mat-list-item>
<mat-list-item [routerLink]="['/checker-inbox-and-tasks/checker-inbox']" matTooltip="Checker Inbox and Tasks">
<mat-icon matListIcon>
@@ -83,19 +85,19 @@
<mat-icon matListIcon>
<fa-icon icon="sync" size="sm"></fa-icon>
</mat-icon>
<a matLine>Frequent Postings</a>
<a matLine #frequentPostings>Frequent Postings</a>
</mat-list-item>
<mat-list-item [routerLink]="['/accounting/journal-entries/create']" matTooltip="Create Journal Entry">
<mat-icon matListIcon>
<fa-icon icon="plus" size="sm"></fa-icon>
</mat-icon>
<a matLine>Create Journal Entry</a>
<a matLine #createJournalEntry>Create Journal Entry</a>
</mat-list-item>
<mat-list-item [routerLink]="['/accounting/chart-of-accounts']" matTooltip="Chart Of Accounts">
<mat-icon matListIcon>
<fa-icon icon="sitemap" size="sm"></fa-icon>
</mat-icon>
<a matLine>Chart of Accounts</a>
<a matLine #chartOfAccounts>Chart of Accounts</a>
</mat-list-item>
<mat-list-item (click)="showKeyboardShortcuts()" matTooltip="Keyboard Shortcuts">
<mat-icon matListIcon>
@@ -115,4 +117,84 @@
</div>
</div>
</div>
<ng-template #templateLogo let-popover="popover">
<p class="mw300">This logo will return the user to the welcome page from anywhere in the system..</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();previousStep()">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateUserPanel let-popover="popover">
<h2>User Panel</h2>
<p class="mw300">This section contains user name, user photograph, user settings and sign out button.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateLogo,logo,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFrequentlyAccessed let-popover="popover">
<h2>Frequently Accessed</h2>
<p class="mw300">This contains shortcut to the frequently accessed components.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateUserPanel,userPanel,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateDashboard let-popover="popover">
<h2>Dashboard</h2>
<p class="mw300">This will navigate the user to dashboard component.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentlyAccessed,frequentlyAccessed,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateNavigation let-popover="popover">
<h2>Navigation</h2>
<p class="mw300">This will navigate the user to entity navigation screen.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateDashboard,dashboard,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'bottom', true);">Next</button>
</div>
</ng-template>
<ng-template #templateFrequentPostings let-popover="popover">
<h2>Frequent Postings</h2>
<p class="mw300">Shortcut to Journal entry screen with accouting rules in place</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNavigation,navigation,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateCreateJournalEntry let-popover="popover">
<h2>Create Journal Entry</h2>
<p class="mw300">Shortcut to the create journal entry screen.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateFrequentPostings,frequentPostings,'bottom', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateChartOfAccounts,chartOfAccounts,'top', true);">Next</button>
</div>
</ng-template>
<ng-template #templateChartOfAccounts let-popover="popover">
<h2>Chart of Accounts</h2>
<p class="mw300">Shortcut to chart of accounts screen to add/modify the ledger accounts.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateCreateJournalEntry,createJournalEntry,'top', true);">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
</div>
</ng-template>
src/app/core/shell/sidenav/sidenav.component.ts
+70 -3
View File
@@ -1,5 +1,6 @@
/** Angular Imports */
import { Component, OnInit, Input } from '@angular/core';
import { Component, OnInit, Input, TemplateRef, ElementRef , ViewChild,
AfterViewInit } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { Router } from '@angular/router';
@@ -8,6 +9,8 @@ import { KeyboardShortcutsDialogComponent } from 'app/shared/keyboard-shortcuts-
/** Custom Services */
import { AuthenticationService } from '../../authentication/authentication.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Imports */
import { frequentActivities } from './frequent-activities';
@@ -20,7 +23,7 @@ import { frequentActivities } from './frequent-activities';
templateUrl: './sidenav.component.html',
styleUrls: ['./sidenav.component.scss']
})
export class SidenavComponent implements OnInit {
export class SidenavComponent implements OnInit, AfterViewInit {
/** True if sidenav is in collapsed state. */
@Input() sidenavCollapsed: boolean;
@@ -34,14 +37,28 @@ export class SidenavComponent implements OnInit {
/** Collection of possible frequent activities */
frequentActivities: any[] = frequentActivities;
/* Refernce of logo */
@ViewChild('logo') logo: ElementRef<any>;
/* Template for popover on logo */
@ViewChild('templateLogo') templateLogo: TemplateRef<any>;
/* Refernce of chart of accounts */
@ViewChild('chartOfAccounts') chartOfAccounts: ElementRef<any>;
/* Template for popover on chart of accounts */
@ViewChild('templateChartOfAccounts') templateChartOfAccounts: TemplateRef<any>;
/**
* @param {Router} router Router for navigation.
* @param {MatDialog} dialog Mat Dialog
* @param {AuthenticationService} authenticationService Authentication Service.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private router: Router,
public dialog: MatDialog,
private authenticationService: AuthenticationService) {
private authenticationService: AuthenticationService,
private configurationWizardService: ConfigurationWizardService,
private popoverService: PopoverService) {
this.userActivity = JSON.parse(localStorage.getItem('mifosXLocation'));
}
@@ -140,4 +157,54 @@ export class SidenavComponent implements OnInit {
}
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: HTMLElement | ElementRef<any>, position: string, backdrop: boolean): void {
setTimeout(() => this.popoverService.open(template, target, position, backdrop, {}), 200);
}
/**
* To show popovers
*/
ngAfterViewInit() {
if (this.configurationWizardService.showSideNav === true) {
setTimeout(() => {
this.showPopover(this.templateLogo, this.logo.nativeElement, 'bottom', true);
});
}
if (this.configurationWizardService.showSideNavChartofAccounts === true) {
setTimeout(() => {
this.showPopover(this.templateChartOfAccounts, this.chartOfAccounts.nativeElement, 'top', true);
});
}
}
/**
* Next Step (Breadcrumbs) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showSideNav = false;
this.configurationWizardService.showSideNavChartofAccounts = false;
this.configurationWizardService.showBreadcrumbs = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
/**
* Previous Step (Toolbar) Configuration Wizard.
*/
previousStep() {
this.configurationWizardService.showSideNav = false;
this.configurationWizardService.showSideNavChartofAccounts = false;
this.configurationWizardService.showToolbarAdmin = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
}
src/app/core/shell/toolbar/toolbar.component.html
+138 -14
View File
@@ -11,48 +11,62 @@
<nav mat-tab-nav-bar backgroundColor="primary" class="ml-1">
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger">
<a #institution mat-tab-link class="tab-link" [matMenuTriggerFor]="institutionMenu" #institutionMenuTrigger="matMenuTrigger">
<fa-icon class="mr-05" icon="university" size="lg"></fa-icon>
{{ 'Institution' | translate }}
</a>
<span fxHide.lt-lg="true">
<a mat-tab-link class="tab-link" [routerLink]="['/accounting']">
<a #accounting mat-tab-link class="tab-link" [routerLink]="['/accounting']">
<fa-icon class="mr-05" icon="money-bill-alt" size="lg"></fa-icon>
{{ 'Accounting' | translate }}
</a>
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
<a #reports mat-tab-link class="tab-link" [matMenuTriggerFor]="reportsMenu" #reportsMenuTrigger="matMenuTrigger" >
<fa-icon class="mr-05" icon="chart-bar" size="lg"></fa-icon>
{{ 'Reports' | translate }}
</a>
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
<a #admin mat-tab-link class="tab-link" [matMenuTriggerFor]="adminMenu" #adminMenuTrigger="matMenuTrigger">
<fa-icon class="mr-05" icon="shield-alt" size="lg"></fa-icon>
{{ 'Admin' | translate }}
</a>
<a mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
<a #selfService mat-tab-link class="tab-link" [matMenuTriggerFor]="selfServiceMenu" #selfServiceMenuTrigger="matMenuTrigger">
<fa-icon class="mr-05" icon="users" size="lg"></fa-icon>
{{ 'Self Service' | translate }}
</a>
<a #configWizard mat-tab-link class="tab-link" (click)="openDialog()">
<fa-icon class="mr-05" icon="info" size="lg"></fa-icon>
Configuration Wizard
</a>
</span>
</nav>
<span fxFlex="auto"></span>
<mifosx-search-tool></mifosx-search-tool>
<div #globalSearch>
<mifosx-search-tool></mifosx-search-tool>
</div>
<mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
<div #languageSelector>
<mifosx-language-selector class="ml-1 language" fxHide.lt-md></mifosx-language-selector>
</div>
<mifosx-theme-picker fxHide.lt-md></mifosx-theme-picker>
<mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
<button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
<img src="assets/images/user_placeholder.png">
</button>
<div #themePicker>
<mifosx-theme-picker fxHide.lt-md></mifosx-theme-picker>
</div>
<div #notifications>
<mifosx-notifications-tray fxHide.lt-md></mifosx-notifications-tray>
</div>
<div #appMenu>
<button mat-icon-button class="ml-1 img-button" [matMenuTriggerFor]="applicationMenu">
<img src="assets/images/user_placeholder.png">
</button>
</div>
</mat-toolbar>
<mat-menu #institutionMenu="matMenu" [overlapTrigger]="false">
@@ -119,3 +133,113 @@
<span>Sign Out</span>
</button>
</mat-menu>
<ng-template #templateInstitution let-popover="popover">
<h2>Institution</h2>
<p class="mw300">This button will be used for individual accounts, groups and centers</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">Next</button>
</div>
</ng-template>
<ng-template #templateAccounting let-popover="popover">
<h2>Accounting</h2>
<p class="mw300">This button opens the menu to access the system tools required by the accounting department.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateInstitution, institution)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">Next</button>
</div>
</ng-template>
<ng-template #templateReports let-popover="popover">
<h2>Reports</h2>
<p class="mw300">Dropdown provides access to all types of system reports including the defualt reports provided by the Mifos and system reports that will be developed by the organization.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAccounting, accounting)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">Next</button>
</div>
</ng-template>
<ng-template #templateAdmin let-popover="popover">
<h2>Admin</h2>
<p class="mw300">This is where the system is setup according to your organization including users, organization, products and templates.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateReports, reports)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">Next</button>
</div>
</ng-template>
<ng-template #templateSelfService let-popover="popover">
<h2>Self Service</h2>
<p class="mw300">Dropdown provides access to self service user administrative portal, app configuration and task management.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAdmin, admin)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">Next</button>
</div>
</ng-template>
<ng-template #templateConfigWizard let-popover="popover">
<h2>Configuration Wizard</h2>
<p class="mw300">This buttons opens up the configuration wizard to help the user in initial setup and application tour.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSelfService, selfService)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">Next</button>
</div>
</ng-template>
<ng-template #templateGlobalSearch let-popover="popover">
<h2>Global Search</h2>
<p class="mw300">This will allow the user to quickly navigate the system selecting entity while searching makes the navigation more robust.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateConfigWizard, configWizard)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">Next</button>
</div>
</ng-template>
<ng-template #templateLanguageSelector let-popover="popover">
<h2>Language Selector</h2>
<p class="mw300">Organization can select a language here from the available languages here.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateGlobalSearch, globalSearch)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">Next</button>
</div>
</ng-template>
<ng-template #templateThemePicker let-popover="popover">
<h2>Theme Picker</h2>
<p class="mw300">This will be used to choose a theme as per organization will.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover( templateLanguageSelector, languageSelector)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">Next</button>
</div>
</ng-template>
<ng-template #templateNotifications let-popover="popover">
<h2>Notifications</h2>
<p class="mw300">This shows all the notifications.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateThemePicker, themePicker)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateAppMenu, appMenu)">Next</button>
</div>
</ng-template>
<ng-template #templateAppMenu let-popover="popover">
<h2>Application Menu</h2>
<p class="mw300">This will have logged in user settings and sign out button.</p>
<div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column">
<button mat-raised-button color="warn" (click)="popover.close();configurationWizardService.closeConfigWizard()">Close</button>
<button mat-raised-button color="primary" (click)="popover.close();showPopover(templateNotifications, notifications)">Back</button>
<button mat-raised-button color="primary" (click)="popover.close(); nextStep()">Next</button>
</div>
</ng-template>
src/app/core/shell/toolbar/toolbar.component.ts
+102 -2
View File
@@ -1,5 +1,5 @@
/** Angular Imports */
import { Component, OnInit, Input, EventEmitter, Output } from '@angular/core';
import { Component, OnInit, Input, EventEmitter, Output, ViewChild, AfterViewInit, ElementRef, TemplateRef } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { MatSidenav } from '@angular/material/sidenav';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@@ -11,6 +11,11 @@ import { map } from 'rxjs/operators';
/** Custom Services */
import { AuthenticationService } from '../../authentication/authentication.service';
import { PopoverService } from '../../../configuration-wizard/popover/popover.service';
import { ConfigurationWizardService } from '../../../configuration-wizard/configuration-wizard.service';
/** Custom Components */
import { ConfigurationWizardComponent } from '../../../configuration-wizard/configuration-wizard.component';
/**
* Toolbar component.
@@ -20,7 +25,17 @@ import { AuthenticationService } from '../../authentication/authentication.servi
templateUrl: './toolbar.component.html',
styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {
export class ToolbarComponent implements OnInit, AfterViewInit {
/* Reference of institution */
@ViewChild('institution') institution: ElementRef<any>;
/* Template for popover on institution */
@ViewChild('templateInstitution') templateInstitution: TemplateRef<any>;
/* Reference of appMenu */
@ViewChild('appMenu') appMenu: ElementRef<any>;
/* Template for popover on appMenu */
@ViewChild('templateAppMenu') templateAppMenu: TemplateRef<any>;
/** Subscription to breakpoint observer for handset. */
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
@@ -40,10 +55,15 @@ export class ToolbarComponent implements OnInit {
* @param {BreakpointObserver} breakpointObserver Breakpoint observer to detect screen size.
* @param {Router} router Router for navigation.
* @param {AuthenticationService} authenticationService Authentication service.
* @param {MatDialog} dialog MatDialog.
* @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
* @param {PopoverService} popoverService PopoverService.
*/
constructor(private breakpointObserver: BreakpointObserver,
private router: Router,
private authenticationService: AuthenticationService,
private popoverService: PopoverService,
private configurationWizardService: ConfigurationWizardService,
private dialog: MatDialog) { }
/**
@@ -86,5 +106,85 @@ export class ToolbarComponent implements OnInit {
help() {
window.open('https://mifosforge.jira.com/wiki/spaces/docs/pages/52035622/User+Manual', '_blank');
}
/**
* Popover function
* @param template TemplateRef<any>.
* @param target HTMLElement | ElementRef<any>.
* @param position String.
* @param backdrop Boolean.
*/
showPopover(template: TemplateRef<any>, target: ElementRef<any> | HTMLElement): void {
setTimeout(() => this.popoverService.open(template, target, 'bottom', true, {}), 200);
}
/**
* Next Step (SideNavbar) Configuration Wizard.
*/
nextStep() {
this.configurationWizardService.showToolbar = false;
this.configurationWizardService.showToolbarAdmin = false;
this.configurationWizardService.showSideNav = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
/**
* Open Configuration Wizard Dialog
*/
openDialog() {
const configWizardRef = this.dialog.open(ConfigurationWizardComponent, {});
configWizardRef.afterClosed().subscribe((response: { show: number }) => {
if (response.show === 1) {
this.configurationWizardService.showToolbar = true;
this.router.routeReuseStrategy.shouldReuseRoute = () => false;
this.router.onSameUrlNavigation = 'reload';
this.router.navigate(['/home']);
}
if (response.show === 2) {
this.configurationWizardService.showCreateOffice = true;
this.router.navigate(['/organization']);
}
if (response.show === 3) {
this.configurationWizardService.showDatatables = true;
this.router.navigate(['/system']);
}
if (response.show === 4) {
this.configurationWizardService.showChartofAccounts = true;
this.router.navigate(['/accounting']);
}
if (response.show === 5) {
this.configurationWizardService.showCharges = true;
this.router.navigate(['/products']);
}
if (response.show === 6) {
this.configurationWizardService.showManageFunds = true;
this.router.navigate(['/organization']);
}
if (response.show === 0) {
}
});
}
/**
* To show popovers
*/
ngAfterViewInit() {
if (this.configurationWizardService.showToolbar === true) {
setTimeout(() => {
this.showPopover(this.templateInstitution, this.institution.nativeElement);
});
}
if (this.configurationWizardService.showSideNav === true || this.configurationWizardService.showSideNavChartofAccounts === true) {
this.toggleSidenavCollapse();
}
if (this.configurationWizardService.showToolbarAdmin === true) {
setTimeout(() => {
this.showPopover(this.templateAppMenu, this.appMenu.nativeElement);
});
}
}
}