feat: tour integration

Tour Integration

src/app/organization/currencies/currencies.component.html

@@ -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

@@ -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

@@ -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

@@ -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']);
+      }
+    });
+  }
 }