First version of tour-guide steps

Issue-ID: CCSDK-2705

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

4 files changed, 25 insertions, 15 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
index 65845a6cc..4b0ef8b49 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
@@ -9,7 +9,8 @@
             class="btn btn-outline-danger" title="Delete Template">Delete</button>
         <button (click)="cancel()" [hidden]="fileName?.length <=0 || edit"
             class="btn btn-outline-secondary">Clear</button>
-        <button (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close" class="btn btn-primary">Finish</button>
+        <button tourAnchor="tm-templateFinish" (click)="saveToStore()" [disabled]="fileName?.length <=0" title="Submit template and close"
+            class="btn btn-primary">Finish</button>
     </div>
 </div>
 <div class="card creat-card">
@@ -19,8 +20,8 @@
         </label>
 
         <div class="label-input">
-            <input type="input" [disabled]="edit" [(ngModel)]="fileName" placeholder="Template name" name="templateName"
-                autofocus [autofocus]="true">
+            <input tourAnchor="tm-templateName" type="input" [disabled]="edit" [(ngModel)]="fileName"
+                placeholder="Template name" name="templateName" autofocus [autofocus]="true">
         </div>
     </div>
 </div>
@@ -40,7 +41,7 @@
 
             <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
                 <div class="card-body">
-                    <div class="single-line">
+                    <div tourAnchor="tm-templateType" class="single-line">
                         <label class="label-name">Template Type</label>
                         <div class="label-input">
                             <label name="trst" (click)="allowedExt=['.vtl']">
@@ -58,7 +59,7 @@
                                     Jinja
                                 </span>
                             </label>
-                            <label name="trst" (click)="allowedExt=['.kt']">
+                            <label tourAnchor="tm-templateContent" name="trst" (click)="allowedExt=['.kt']">
                                 <input class="form-check-input" [(ngModel)]="templateExt" type="radio"
                                     name="exampleRadios" id="exampleRadios1" value=Kotlin>
 
@@ -76,7 +77,8 @@
                             current attributes.</span></div>
                     <div class="editor-container mb-4">
                         <app-source-editor [lang]="'velocity'" (textChange)="textChanges($event,templateInfo.fileName)"
-                            [(text)]="templateFileContent"></app-source-editor>
+                            [(text)]="templateFileContent">
+                        </app-source-editor>
                     </div>
                 </div>
             </div>
@@ -84,8 +86,8 @@
         <div class="card">
             <div class="card-header" id="headingTwo">
                 <h5 class="mb-0">
-                    <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo"
-                        aria-expanded="false" aria-controls="collapseTwo">
+                    <button tourAnchor="tm-mappingContent" class="btn btn-link collapsed" id="mappingTab" data-toggle="collapse"
+                        data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                         2. Manage Mapping <span
                             class="accordian-title">{{currentMapping?.fileName?.split('/')[1]}}</span>
                     </button>
@@ -102,8 +104,8 @@
                             <br />
                             <span>Use Current Template Instance</span>
                         </button>
-                        <a href="#" (click)="allowedExt=['.csv','.xml']" data-toggle="modal" data-target="#templateModal"
-                            class="mapping-source-load">
+                        <a href="#" (click)="allowedExt=['.csv','.xml']" data-toggle="modal"
+                            data-target="#templateModal" class="mapping-source-load">
                             <i class="icon-upload-attributes"></i>
                             <br />
                             <div>Upload Attributes List</div>
@@ -300,4 +302,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
index 61ea374a3..3e7cfea7b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
@@ -11,6 +11,7 @@ import { JsonConvert, Any } from 'json2typescript';
 import { ToastrService } from 'ngx-toastr';
 import { SharedService } from '../shared-service';
 import { XmlParser } from '../utils/XmlParser';
+import { TourService } from 'ngx-tour-md-menu';
 declare var $: any;
 
 @Component({
@@ -55,7 +56,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         private templateStore: TemplateStore,
         private packageCreationUtils: PackageCreationUtils,
         private toastr: ToastrService,
-        private sharedService: SharedService
+        private sharedService: SharedService,
+        private tourService: TourService,
     ) {
     }
 
@@ -348,6 +350,8 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                 this.fileName = '';
                 this.toastr.success('File is created', 'success');
                 this.openListView();
+                console.log(this.tourService.getStatus());
+                this.tourService.goto('tm-templateEdit');
             } else {
                 console.log('this file already exist');
                 this.toastr.error('File name already exist', 'Error');
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
index bc87ae2c0..1af379582 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
@@ -3,7 +3,7 @@
 </a>
 
 
-<div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0">
+<div class="template-mapping-accordion" tourAnchor="tm-templateEdit"  [hidden]="templateAndMappingMap?.size <= 0">
     <div class="" id="listAccordion">
         <div class="card">
             <div class="card-header" id="headingThree">
@@ -62,4 +62,4 @@
             </div>
         </div>
     </div>
-</div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
index 26740f3e1..70e35939b 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
@@ -5,6 +5,7 @@ import { TemplateInfo, TemplateStore } from '../../template.store';
 import { TemplateAndMapping } from '../TemplateAndMapping';
 import { ActivatedRoute } from '@angular/router';
 import { SharedService } from '../shared-service';
+import { TourService } from 'ngx-tour-md-menu';
 
 
 @Component({
@@ -27,7 +28,9 @@ export class TemplMappListingComponent implements OnInit {
         private packageCreationStore: PackageCreationStore,
         private templateStore: TemplateStore,
         private route: ActivatedRoute,
-        private sharedService: SharedService
+        private sharedService: SharedService,
+        private tourService: TourService,
+
     ) {
     }
 
@@ -99,6 +102,7 @@ export class TemplMappListingComponent implements OnInit {
     createNewTemplate() {
         this.openCreationView();
         this.sharedService.disableEdit();
+        this.tourService.goto('tm-templateName');
     }
     openCreationView() {
         this.showCreationView.emit('tell parent to open create views');