feat: tour integration

Tour Integration

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.html

@@ -1,8 +1,11 @@
 <div fxLayout="row" fxLayoutAlign="end" fxLayoutGap="2%" fxLayout.lt-md="column" class="container m-b-20">
-  <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();" *mifosxHasPermission="'UPDATE_PERMISSION'">
-    <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
-    Edit
-  </button>
+
+  <div #buttonEdit class="in-block">
+    <button mat-raised-button color="primary" (click)="editTask(); backupCheckValues();" *mifosxHasPermission="'UPDATE_PERMISSION'">
+      <fa-icon icon="edit"></fa-icon>&nbsp;&nbsp;
+      Edit
+    </button>
+  </div>
 </div>
 
 <div class="container">
@@ -13,7 +16,7 @@
 
       <div fxLayout="row">
 
-        <div fxFlex="30" fxLayout="column">
+        <div #mcTable fxFlex="30" fxLayout="column">
           <mat-list>
             <mat-list-item [ngClass]="selectedItem == grouping ? 'active' : 'inactive'" *ngFor="let grouping of groupings" (click)="showPermissions(grouping)">
               <span class="groupingName">
@@ -54,3 +57,22 @@
   </mat-card>
 
 </div>
+
+<ng-template #templateButtonEdit let-popover="popover">
+  <h2>Edit</h2>
+  <p class="mw300">To add or remove a task from the Maker-Checker list.</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(templateMcTable,mcTable,'top', true);">Next</button>
+  </div>
+</ng-template>
+
+<ng-template #templateMcTable let-popover="popover">
+  <h4 class="mw300">List of all maker checker tasks. For more details click: <a href="https://mifosforge.jira.com/wiki/spaces/docs/pages/67895359/Configure+Maker-Checker+Tasks" target="_blank">Configure Maker-Checker Tasks</a></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(templateButtonEdit,buttonEdit,'bottom', true);">Back</button>
+    <button mat-raised-button color="primary" (click)="popover.close();nextStep()">Next</button>
+  </div>
+</ng-template>

src/app/system/configure-maker-checker-tasks/configure-maker-checker-tasks.component.ts

@@ -1,7 +1,11 @@
-import { Component, OnInit } 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 { FormGroup, FormBuilder, Validators } from '@angular/forms';
 import * as _ from 'lodash';
+
+/** Custom Services */
+import { PopoverService } from '../../configuration-wizard/popover/popover.service';
+import { ConfigurationWizardService } from '../../configuration-wizard/configuration-wizard.service';
 import { SystemService } from '../system.service';
 
 @Component({
@@ -9,7 +13,7 @@ import { SystemService } from '../system.service';
   templateUrl: './configure-maker-checker-tasks.component.html',
   styleUrls: ['./configure-maker-checker-tasks.component.scss']
 })
-export class ConfigureMakerCheckerTasksComponent implements OnInit {
+export class ConfigureMakerCheckerTasksComponent implements OnInit, AfterViewInit {
 
   permissionsData: any;
   groupings: string[] = [];
@@ -30,9 +34,29 @@ export class ConfigureMakerCheckerTasksComponent implements OnInit {
     permissions: { code: string }[]
   }[];
 
+  /* Reference of edit button */
+  @ViewChild('buttonEdit') buttonEdit: ElementRef<any>;
+  /* Template for popover on edit button */
+  @ViewChild('templateButtonEdit') templateButtonEdit: TemplateRef<any>;
+  /* Reference of maker checker taks table */
+  @ViewChild('mcTable') mcTable: ElementRef<any>;
+  /* Template for popover on maker checker taks table */
+  @ViewChild('templateMcTable') templateMcTable: 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 route: ActivatedRoute,
     private systemService: SystemService,
-    private formBuilder: FormBuilder, ) {
+    private formBuilder: FormBuilder,
+    private router: Router,
+    private configurationWizardService: ConfigurationWizardService,
+    private popoverService: PopoverService ) {
     this.route.data.subscribe((data: { permissions: any }) => {
       this.permissionsData = data.permissions;
     });
@@ -160,4 +184,50 @@ export class ConfigureMakerCheckerTasksComponent 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.showMakerCheckerTablePage === true) {
+      setTimeout(() => {
+          this.showPopover(this.templateButtonEdit, this.buttonEdit.nativeElement, 'bottom', true);
+      });
+    }
+    if (this.configurationWizardService.showMakerCheckerTableList === true) {
+      setTimeout(() => {
+          this.showPopover(this.templateMcTable, this.mcTable.nativeElement, 'top', true);
+      });
+    }
+  }
+
+  /**
+   * Next Step (Global Configurations System Page) Configuration Wizard.
+   */
+  nextStep() {
+    this.configurationWizardService.showMakerCheckerTablePage = false;
+    this.configurationWizardService.showMakerCheckerTableList = false;
+    this.configurationWizardService.showConfigurations = true;
+    this.router.navigate(['/system']);
+  }
+
+  /**
+   * Previous Step (Maker Checker Tasks System Page) Configuration Wizard.
+   */
+  previousStep() {
+    this.configurationWizardService.showMakerCheckerTablePage = false;
+    this.configurationWizardService.showMakerCheckerTableList = false;
+    this.configurationWizardService.showMakerCheckerTable = true;
+    this.router.navigate(['/system']);
+  }
 }