adding tour-guide to package dashboard

Stop popup autoclose

Issue-ID: CCSDK-2705

Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com>
Change-Id: Id6349d2d3b72fb3b316bc405498fabc71a6f7bbd

8 files changed, 142 insertions, 32 deletions

diff --git a/cds-ui/designer-client/src/app/app.component.css b/cds-ui/designer-client/src/app/app.component.css
index e69de29bb..9a0cd34c1 100644
--- a/cds-ui/designer-client/src/app/app.component.css
+++ b/cds-ui/designer-client/src/app/app.component.css
@@ -0,0 +1,9 @@
+.cdk-overlay-container {
+    position: none;
+    z-index: 0;
+}
+
+.cdk-overlay-backdrop {
+    position: none;
+    z-index: 0;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
index 35ca1e2c9..5712f80a0 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html
@@ -7,13 +7,13 @@
             </div>
             <div class="card-footer row">
                 <div class="col text-center">
-                    <a routerLink="/packages/createPackage" role="button" aria-pressed="true"
+                    <a tourAnchor="create" routerLink="/packages/createPackage" role="button" aria-pressed="true"
                         class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create
                         Package
                     </a>
                     <br />
-                    <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i
-                            class="icon-import-blue" aria-hidden="true"></i>Import Package
+                    <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
+                            tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package
                     </a>
                     <ngx-ui-loader></ngx-ui-loader>
                 </div>
@@ -76,9 +76,8 @@
                     <div class="col">
                         <p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
                         </p>
-                       <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
-                        <p class="package-desc" [delay]="300"
-                            tooltip="{{bluePrint.artifactDescription}}"
+                        <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
+                        <p class="package-desc" [delay]="300" tooltip="{{bluePrint.artifactDescription}}"
                             placement="bottom left">{{bluePrint.artifactDescription}}</p>
                         <ul class="package-contributers">
                             <li>
@@ -105,7 +104,7 @@
                 </div>
                 <div class="card-footer">
                     <div class="row">
-                        
+
                         <div class="col">
                             <button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i
                                     class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
@@ -121,4 +120,4 @@
 
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
index 352f33b91..3cecd33fd 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts
@@ -1,9 +1,11 @@
-import {Component, OnInit} from '@angular/core';
-import {BlueprintModel} from '../../model/BluePrint.model';
-import {PackagesStore} from '../../packages.store';
-import {Router} from '@angular/router';
-import {ConfigurationDashboardService} from '../../configuration-dashboard/configuration-dashboard.service';
-import {saveAs} from 'file-saver';
+import { Component, OnInit } from '@angular/core';
+import { BlueprintModel } from '../../model/BluePrint.model';
+import { PackagesStore } from '../../packages.store';
+import { Router } from '@angular/router';
+import { ConfigurationDashboardService } from '../../configuration-dashboard/configuration-dashboard.service';
+import { saveAs } from 'file-saver';
+import { NgxUiLoaderService } from 'ngx-ui-loader';
+import { TourService } from 'ngx-tour-md-menu';
 
 @Component({
     selector: 'app-packages-list',
@@ -15,9 +17,17 @@ export class PackageListComponent implements OnInit {
     viewedPackages: BlueprintModel[] = [];
 
 
-    constructor(private packagesStore: PackagesStore, private router: Router
-              , private configurationDashboardService: ConfigurationDashboardService) {
+    constructor(
+        private packagesStore: PackagesStore,
+        private router: Router,
+        private configurationDashboardService: ConfigurationDashboardService,
+        private ngxLoader: NgxUiLoaderService,
+        private tourService: TourService,
+    ) {
         console.log('PackageListComponent');
+
+
+
         this.packagesStore.state$.subscribe(state => {
             console.log(state);
             if (state.filteredPackages) {
@@ -26,8 +36,13 @@ export class PackageListComponent implements OnInit {
         });
     }
 
+
     ngOnInit() {
         this.packagesStore.getAll();
+
+
+
+
     }
 
     view(id) {
@@ -40,7 +55,7 @@ export class PackageListComponent implements OnInit {
 
     downloadPackage(artifactName: string, artifactVersion: string) {
         this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => {
-            const blob = new Blob([response], {type: 'application/octet-stream'});
+            const blob = new Blob([response], { type: 'application/octet-stream' });
             saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip');
         });
     }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
index e69de29bb..74ace1a35 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css
@@ -0,0 +1,17 @@
+.panel-wrap button label{
+    cursor: pointer;
+}
+
+.panel-wrap .panel{
+    border-radius: 8px;
+}
+
+.cdk-overlay-container {
+    position: none;
+    z-index: 0;
+}
+
+.cdk-overlay-backdrop {
+    position: none;
+    z-index: 0;
+}
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
index a632568c8..8391530d6 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html
@@ -1,20 +1,24 @@
 <app-header>
 </app-header>
+<tour-step-template></tour-step-template>
 <div class="new-wrapper">
     <div class="container-fluid main-container">
         <app-packages-header></app-packages-header>
         <div class="container-fluid body-container">
             <!--Tour Starter-->
-            <input id="clicker" type="checkbox" />
-            <label for="clicker">Start the tour</label>
+            <input id="clicker" [checked]="startTour" type="checkbox" />
+            <label class="ml-1" for="clicker">Start the tour</label>
 
             <div class="panel-wrap">
                 <div class="panel">
-                    <button id="clicker1" type="button"><label for="clicker">Dismiss</label>
+                    <button id="clicker1" class="close" type="button" (click)="stopTour()">
+                        <label for="clicker">&times;</label>
                     </button>
+
                     <h3>Welcome to CDS</h3>
                     <p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p>
-                    <button type="button" class="btn" style="background-color: #fff;">Let's get started</button>
+                    <button type="button" class="btn" style="background-color: #fff;margin:0">
+                        <label style="margin: 0;" (click)="start()" for="clicker">Let's get started</label></button>
                 </div>
             </div>
             <!---->
@@ -22,12 +26,13 @@
                 <!--Nav Tabs-->
                 <div class="col pr-0">
                     <div class="nav nav-tabs " id="nav-tab" role="tablist">
-                        <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
-                            role="tab" aria-controls="nav-home" aria-selected="true">All</a>
+                        <a tourAnchor="allTab" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
+                            href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a>
                         <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
                             role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
-                        <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
-                            role="tab" aria-controls="nav-contact" aria-selected="false">Under Construction</a>
+                        <a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
+                            href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Under
+                            Construction</a>
                         <a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
                             role="tab" aria-controls="nav-contact1" aria-selected="false">Archived</a>
                     </div>
@@ -38,7 +43,7 @@
                         <div class="col-7">
                             <app-packages-search></app-packages-search>
                         </div>
-                        <div class="col-5 pl-2">
+                        <div class="col-5 pl-2" tourAnchor="tagFilter">
                             <app-filter-by-tags class="w-100"></app-filter-by-tags>
                         </div>
 
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
index 4e33a9df1..bdd5f6fde 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts
@@ -18,20 +18,83 @@ See the License for the specific language governing permissions and
 limitations under the License.
 ============LICENSE_END============================================
 */
-import {Component, OnInit} from '@angular/core';
-import {PackagesStore} from '../packages.store';
+import { Component, OnInit, OnDestroy } from '@angular/core';
+import { PackagesStore } from '../packages.store';
+import { TourService } from 'ngx-tour-md-menu';
+
 
 @Component({
     selector: 'app-packages-dashboard',
     templateUrl: './packages-dashboard.component.html',
     styleUrls: ['./packages-dashboard.component.css']
 })
-export class PackagesDashboardComponent implements OnInit {
+export class PackagesDashboardComponent implements OnInit, OnDestroy {
 
-    constructor() { }
+    startTour = false;
+    constructor(
+        private tourService: TourService,
+    ) { }
 
     ngOnInit() {
 
         console.log('PackagesDashboardComponent');
+
+        this.tourService.initialize([
+            {
+                anchorId: 'allTab',
+                content: 'This Tab contain all packages you created before',
+                title: 'All Package',
+            },
+            {
+                anchorId: 'search',
+                content: 'Search for Package by name, version, tags and type',
+                title: 'Search',
+            },
+            {
+                anchorId: 'tagFilter',
+                content: 'Filter Packages by tags',
+                title: 'Tag Filter',
+            },
+            {
+                anchorId: 'import',
+                content: 'Import a package to CDS',
+                title: 'Import',
+            },
+            {
+                anchorId: 'create',
+                content: 'Create a new Package',
+                title: 'Create',
+            },
+            {
+                anchorId: 'metadataTab',
+                content: 'Set your package basic information',
+                title: 'Metadata Tab',
+                route: 'packages/createPackage'
+            },
+        ]);
+        this.checkTour();
+    }
+
+    checkTour() {
+        if (localStorage.getItem('tour-guide') && localStorage.getItem('tour-guide') === 'false') {
+            this.startTour = false;
+        } else {
+            this.startTour = true;
+        }
+    }
+    start() {
+        console.log('start .................');
+        this.tourService.start();
+        this.tourService.events$.subscribe(res => {
+            console.log(res);
+        });
+    }
+
+    stopTour() {
+        localStorage.setItem('tour-guide', 'false');
+    }
+
+    ngOnDestroy(): void {
+        this.tourService.pause();
     }
 }
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
index e7c605fd1..b304c264a 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html
@@ -1,4 +1,4 @@
 <div class="searchBox">
-    <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+    <input class="searchInput" tourAnchor="search" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
     <button class="searchButton" href="#"></button>
 </div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 47927cef6..8e5d8b0b8 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -30,6 +30,7 @@ import { TemplMappListingComponent } from './package-creation/template-mapping/t
 import { DataTablesModule } from 'angular-datatables';
 import { DesignerSourceViewComponent } from './designer/source-view/source-view.component';
 import { NgxUiLoaderModule } from 'ngx-ui-loader';
+import {TourMatMenuModule} from 'ngx-tour-md-menu';
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
@@ -64,7 +65,8 @@ import { NgxUiLoaderModule } from 'ngx-ui-loader';
         AceEditorModule,
         DataTablesModule,
         // Import NgxUiLoaderModule
-        NgxUiLoaderModule
+        NgxUiLoaderModule,
+        TourMatMenuModule.forRoot()
     ],
     providers: [ApiService, JsonPipe],
     bootstrap: []