feat: tour integration

Tour Integration

src/app/home/home.component.html

@@ -1,9 +1,11 @@
 <div fxLayput="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
 
-  <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
-    <fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
-    Dashboard
-  </button>
+  <div #buttonDashboard class="in-block">
+    <button mat-raised-button color="primary" [routerLink]="['/dashboard']">
+      <fa-icon icon="tachometer-alt"></fa-icon>&nbsp;&nbsp;
+      Dashboard
+    </button>
+  </div>
 
 </div>
 
@@ -17,7 +19,7 @@
       </mat-card-title>
     </mat-card-header>
 
-    <mat-card-content>
+    <mat-card-content #searchActivity>
         
       <div fxLayout="column">
         <mat-form-field>
@@ -39,3 +41,23 @@
   </mat-card>
 
 </div>
+
+<ng-template #templateButtonDashboard let-popover="popover">
+  <h2>Dashboard</h2>
+  <p class="mw300">This will navigate the user to the 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();previousStep()">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();showPopover(templateSearchActivity, searchActivity,'bottom',true)">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateSearchActivity let-popover="popover">
+  <h2>Search Activity</h2>
+  <p class="mw300">This will navigate the user to the searched activity.</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(templateButtonDashboard, buttonDashboard,'bottom',true)">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>

src/app/home/home.component.ts

@@ -1,6 +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';
 import { FormControl } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+
+/** rxjs Imports */
 import { Observable } from 'rxjs';
 import { startWith, map } from 'rxjs/operators';
 
@@ -9,6 +13,11 @@ import { activities } from './activities';
 
 /** Custom Services */
 import { AuthenticationService } from '../core/authentication/authentication.service';
+import { PopoverService } from '../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../configuration-wizard/configuration-wizard.service';
+
+/** Custom Components */
+import { NextStepDialogComponent } from '../configuration-wizard/next-step-dialog/next-step-dialog.component';
 
 /**
  * Home component.
@@ -18,7 +27,7 @@ import { AuthenticationService } from '../core/authentication/authentication.ser
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, AfterViewInit {
 
   /** Username of authenticated user. */
   username: string;
@@ -31,11 +40,29 @@ export class HomeComponent implements OnInit {
   /** All User Activities. */
   allActivities: any[] = activities;
 
+  /* Reference of dashboard button */
+  @ViewChild('buttonDashboard', {static: false}) buttonDashboard: ElementRef<any>;
+  /* Template for popover on dashboard button */
+  @ViewChild('templateButtonDashboard', {static: false}) templateButtonDashboard: TemplateRef<any>;
+  /* Reference of search activity */
+  @ViewChild('searchActivity', {static: false}) searchActivity: ElementRef<any>;
+  /* Template for popover on search activity */
+  @ViewChild('templateSearchActivity', {static: false}) templateSearchActivity: TemplateRef<any>;
+
   /**
    * @param {AuthenticationService} authenticationService Authentication Service.
-   * @param {FormBuilder} formBuilder Form Builder.
+   * @param {ActivatedRoute} activatedRoute ActivatedRoute.
+   * @param {Router} router Router.
+   * @param {MatDialog} dialog MatDialog.
+   * @param {ConfigurationWizardService} configurationWizardService ConfigurationWizard Service.
+   * @param {PopoverService} popoverService PopoverService.
    */
-  constructor(private authenticationService: AuthenticationService) { }
+  constructor(private authenticationService: AuthenticationService,
+              private activatedRoute: ActivatedRoute,
+              private router: Router,
+              private dialog: MatDialog,
+              private configurationWizardService: ConfigurationWizardService,
+              private popoverService: PopoverService) { }
 
   /**
    * Sets the username of the authenticated user.
@@ -67,4 +94,77 @@ export class HomeComponent implements OnInit {
     return this.allActivities.filter(activity => activity.activity.toLowerCase().indexOf(filterValue) === 0);
   }
 
+  /**
+   * 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.showHome === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateButtonDashboard, this.buttonDashboard.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showHomeSearchActivity === true) {
+      setTimeout(() => {
+        this.showPopover(this.templateSearchActivity, this.searchActivity.nativeElement, 'bottom', true);
+      });
+    }
+  }
+
+  /**
+   * Open Dialog for next step.
+   * Next Step (Organization) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showHome = false;
+    this.configurationWizardService.showHomeSearchActivity = false;
+    this.openNextStepDialog();
+  }
+
+  /**
+   * Next Step (Organization) Dialog Configuration Wizard.
+   */
+  openNextStepDialog() {
+    const nextStepDialogRef = this.dialog.open( NextStepDialogComponent, {
+      data: {
+        nextStepName: 'Setup Organization',
+        previousStepName: 'Home Tour',
+        stepPercentage: 10
+      },
+    });
+    nextStepDialogRef.afterClosed().subscribe((response: { nextStep: boolean }) => {
+    if (response.nextStep) {
+      this.configurationWizardService.showHome = false;
+      this.configurationWizardService.showHomeSearchActivity = false;
+      this.configurationWizardService.showCreateOffice = true;
+      this.router.navigate(['/organization']);
+      } else {
+      this.configurationWizardService.showHome = false;
+      this.configurationWizardService.showHomeSearchActivity = false;
+      this.router.navigate(['/home']);
+      }
+    });
+  }
+
+  /**
+   * Previous Step (Breadcrumbs) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showHome = false;
+    this.configurationWizardService.showHomeSearchActivity = false;
+    this.configurationWizardService.showBreadcrumbs = true;
+    this.router.routeReuseStrategy.shouldReuseRoute = () => false;
+    this.router.onSameUrlNavigation = 'reload';
+    this.router.navigate(['/home']);
+  }
 }