feat: tour integration

Tour Integration
2022-09-02 17:03:13 +05:30
parent 52b7a3274e
commit f1be9ab5b1
119 changed files with 6360 additions and 456 deletions
@@ -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>
@@ -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']);
+  }
 }
@@ -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>
@@ -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']);
+  }
+
 }