diff options
Diffstat (limited to 'cds-ui/designer-client/src')
10 files changed, 314 insertions, 181 deletions
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html index c86dd26cf..52445ede2 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/metadata-tab/metadata-tab.component.html @@ -1,3 +1,4 @@ +<tour-step-template></tour-step-template> <div class="card creat-card"> <div class="single-line-model"> <label class="label-name">Mode</label> @@ -32,8 +33,8 @@ <div class="single-line-model"> <label class="label-name">Name <span>*</span></label> <div class="label-input"> - <input type="input" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.name" - placeholder="Package name"> + <input tourAnchor="mt-packageName" type="input" (change)="checkRequiredElements()" + [(ngModel)]="metaDataTab.name" placeholder="Package name"> </div> <!--<div class="model-note-container error-message"> Package name already exists with this version. Please enter a different name or enter different version @@ -44,22 +45,25 @@ <div class="single-line-model"> <label class="label-name">Version <span>*</span></label> <div class="label-input"> - <input type="input" (change)="checkRequiredElements()" [(ngModel)]="metaDataTab.version" - (input)="validatePackageNameAndVersion()" pattern="(\d+)\.(\d+)\.(\d+)" placeholder="Example: 1.0.0"> + <input tourAnchor="mt-packageVersion" type="input" (change)="checkRequiredElements()" + [(ngModel)]="metaDataTab.version" (input)="validatePackageNameAndVersion()" + pattern="(\d+)\.(\d+)\.(\d+)" placeholder="Example: 1.0.0"> </div> <div class="model-note-container error-message">{{errorMessage}}</div> </div> <div class="single-line-model"> <label class="label-name">Description <span>*</span></label> <div class="label-input"> - <input type="input" [(ngModel)]="metaDataTab.description" (change)="checkRequiredElements()" placeholder="Descripe the package"> + <input tourAnchor="mt-packageDescription" type="input" [(ngModel)]="metaDataTab.description" + (change)="checkRequiredElements()" placeholder="Descripe the package"> </div> </div> <div class="single-line-model"> <label class="label-name">Tags</label> <div class="label-input"> - <input type="input" (keyup.enter)="addTag($event)" (keyup.Space)="addTag($event)" placeholder="Ex., vDNS-CDS"> + <input tourAnchor="mt-packageTags" type="input" (keyup.enter)="addTag($event)" (keyup.Space)="addTag($event)" + placeholder="Ex., vDNS-CDS"> </div> <div class="model-note-container tag-notes">Use ENTER/SPACE to add tag</div> <div class="model-note-container tages-container"> @@ -72,14 +76,14 @@ <div id="container"> <div id="target"> <div class="card creat-card"> - <div class="single-line customKeyTitle"> + <div class="single-line customKeyTitle"> <h5 class="label-name w-100 "> Custom key </h5> <span>To add New Custom Key, fill the first key then <b>Press ENTER</b></span> </div> - <div *ngFor="let map of this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key"> + <div tourAnchor="mt-packageKeys" *ngFor="let map of this.metaDataTab.mapOfCustomKey | keyvalue; let i=index" class="single-custom-key"> <div class="single-line-custom-key"> <label class="label-name"><span>{{i + 1}}.</span> Name</label> <div class="label-input"> @@ -102,7 +106,7 @@ <div class="single-line-custom-key"> <label class="label-name"><span>{{customKeysMap.size + 1}}.</span> Name</label> <div class="label-input"> - <input (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey" + <input tourAnchor="mt-packageKeys" (keyup.enter)="addCustomKey()" name="key" type="input" class="mapKey" placeholder="Enter name"> </div> </div> @@ -119,4 +123,4 @@ </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/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html index 454e11215..d42be1ff3 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html @@ -1,42 +1,42 @@ <app-header></app-header> - +<tour-step-template></tour-step-template> <div class="new-wrapper"> - <div class="container-fluid main-container"> - <header class="page-title"> - <div class="row"> - <h2 class="col m-0 pb-0"> - <ul class="breadcrumb-header"> - <li><a routerLink="/packages">CBA Packages</a></li> - <i class="fa fa-angle-right ml-2 mr-2"></i> - <li>Package Name</li> - </ul> - </h2> - <div class="col profile-help"> - <nav class="navbar navbar-expand-lg navbar-light"> - <ul class="navbar-nav ml-auto"> - <li class="nav-item help-btn"> - <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" [delay]="300" - tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a> - </li> - <div class="nav-item dropdown"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div> - <ul class="dropdown-content"> - <li> - <a href="#">Username</a> - </li> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Projects</a> - </li> - <li> - <a href="#">Log out</a> - </li> - </ul> - </div> - <!-- <li class="nav-item dropdown"> + <div class="container-fluid main-container"> + <header class="page-title"> + <div class="row"> + <h2 class="col m-0 pb-0"> + <ul class="breadcrumb-header"> + <li><a routerLink="/packages">CBA Packages</a></li> + <i class="fa fa-angle-right ml-2 mr-2"></i> + <li>Package Name</li> + </ul> + </h2> + <div class="col profile-help"> + <nav class="navbar navbar-expand-lg navbar-light"> + <ul class="navbar-nav ml-auto"> + <li class="nav-item help-btn"> + <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" + [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a> + </li> + <div class="nav-item dropdown"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div> + <ul class="dropdown-content"> + <li> + <a href="#">Username</a> + </li> + <li> + <a href="#">Settings</a> + </li> + <li> + <a href="#">Projects</a> + </li> + <li> + <a href="#">Log out</a> + </li> + </ul> + </div> + <!-- <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dropdown </a> @@ -47,9 +47,9 @@ <a class="dropdown-item" href="#">Something else here</a> </div> </li> --> - </ul> - </nav> - <!-- <ul class="menu-dropdown userProfile"> + </ul> + </nav> + <!-- <ul class="menu-dropdown userProfile"> <li><button type="button" class="btn package-info-btn" data-toggle="modal" data-target="#exampleModalLong"> <i class="icon-info" aria-hidden="true"></i> @@ -72,75 +72,77 @@ </div> </li> </ul> --> - </div> - </div> - </header> + </div> + </div> + </header> - <div class="container-fluid body-container"> - <div class="container"> - <div class="creat-action-container"> - <!-- <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()"> + <div class="container-fluid body-container"> + <div class="container"> + <div class="creat-action-container"> + <!-- <a class="action-button save" [hidden]="!isSaveEnabled" (click)="saveBluePrint()"> <i class="icon-save-sm" aria-hidden="true"></i> <span>Save</span>--> - <button (click)="saveBluePrint()" [disabled]="!isSaveEnabled" - class="action-button save" aria-hidden="true"><i class="icon-save-sm" - aria-hidden="true"></i> - <span>Save</span></button> - </div> + <button tourAnchor="packageSave" (click)="saveBluePrint()" [disabled]="!isSaveEnabled" + class="action-button save" aria-hidden="true"><i class="icon-save-sm" aria-hidden="true"></i> + <span>Save</span></button> + </div> - <nav class="row"> - <!--Nav Tabs--> - <div class="col"> - <div class="nav nav-tabs " id="nav-tab" role="tablist"> - <a class="nav-item nav-link active" id="nav-metadata-tab" data-toggle="tab" - href="#nav-metadata" role="tab" aria-controls="nav-metadata" aria-selected="false" - autofocus #nameit (focusout)="saveMetaData()" [classList]="metadataClasses">METADATA</a> - <a class="nav-item nav-link" id="nav-template-tab" data-toggle="tab" href="#nav-template" - role="tab" aria-controls="nav-template" aria-selected="false">TEMPLATE & MAPPING</a> - <a class="nav-item nav-link" id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" - role="tab" aria-controls="nav-scripts" aria-selected="false">SCRIPTS</a> - <!-- <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" + <nav class="row"> + <!--Nav Tabs--> + <div class="col"> + <div class="nav nav-tabs " id="nav-tab" role="tablist"> + <a (click)="openTourGuide('metadataTab')" tourAnchor="metadataTab" class="nav-item nav-link active" + id="nav-metadata-tab" data-toggle="tab" href="#nav-metadata" role="tab" aria-controls="nav-metadata" + aria-selected="false" autofocus #nameit (focusout)="saveMetaData()" + [classList]="metadataClasses">METADATA</a> + <a (click)="openTourGuide('tm-templateTab')" tourAnchor="tm-templateTab" class="nav-item nav-link" + id="nav-template-tab" data-toggle="tab" href="#nav-template" role="tab" aria-controls="nav-template" + aria-selected="false">TEMPLATE & + MAPPING</a> + <a (click)="openTourGuide('st-scriptsTab')" tourAnchor="st-scriptsTab" class="nav-item nav-link" + id="nav-scripts-tab" data-toggle="tab" href="#nav-scripts" role="tab" aria-controls="nav-scripts" + aria-selected="false">SCRIPTS</a> + <!-- <a class="nav-item nav-link" id="nav-imports-tab" data-toggle="tab" href="#nav-imports" role="tab" aria-controls="nav-imports" aria-selected="false">DEFINITIONS</a> --> - <a class="nav-item nav-link" id="nav-authentication-tab" data-toggle="tab" - href="#nav-authentication" role="tab" aria-controls="nav-authentication" - aria-selected="false">EXTERNAL SYSTEM AUTHENTICATION PROPERTIES</a> - </div> - </div> + <a (click)="openTourGuide('dslTab')" tourAnchor="dslTab" class="nav-item nav-link" + id="nav-authentication-tab" data-toggle="tab" href="#nav-authentication" role="tab" + aria-controls="nav-authentication" aria-selected="false">EXTERNAL + SYSTEM AUTHENTICATION + PROPERTIES</a> + </div> + </div> - </nav> - <div class="row mt-4"> - <div class="col"> - <div class="tab-content" id="nav-tabContent"> - <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" - aria-labelledby="nav-metadata-tab"> - <app-metadata-tab></app-metadata-tab> - </div> - <div class="tab-pane fade" id="nav-template" role="tabpanel" - aria-labelledby="nav-template-tab"> - <app-template-mapping></app-template-mapping> - </div> - <div class="tab-pane fade" id="nav-scripts" role="tabpanel" - aria-labelledby="nav-scripts-tab"> - <app-scripts-tab></app-scripts-tab> - </div> - <div class="tab-pane fade" id="nav-imports" role="tabpanel" - aria-labelledby="nav-imports-tab"> - <app-imports-tab></app-imports-tab> + </nav> + <div class="row mt-4"> + <div class="col"> + <div class="tab-content" id="nav-tabContent"> + <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" + aria-labelledby="nav-metadata-tab"> + <app-metadata-tab></app-metadata-tab> + </div> + <div class="tab-pane fade" id="nav-template" role="tabpanel" aria-labelledby="nav-template-tab"> + <app-template-mapping></app-template-mapping> + </div> + <div class="tab-pane fade" id="nav-scripts" role="tabpanel" aria-labelledby="nav-scripts-tab"> + <app-scripts-tab></app-scripts-tab> + </div> + <div class="tab-pane fade" id="nav-imports" role="tabpanel" aria-labelledby="nav-imports-tab"> + <app-imports-tab></app-imports-tab> - </div> - <div class="tab-pane fade" id="nav-authentication" role="tabpanel" - aria-labelledby="nav-authentication-tab"> - <div class="card creat-card"> - <div class="editor-container"> - <app-dsl-definitions-tab></app-dsl-definitions-tab> - </div> - </div> - </div> - </div> - </div> + </div> + <div class="tab-pane fade" id="nav-authentication" role="tabpanel" + aria-labelledby="nav-authentication-tab"> + <div class="card creat-card"> + <div class="editor-container"> + <app-dsl-definitions-tab></app-dsl-definitions-tab> + </div> </div> + </div> </div> + </div> </div> + </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/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index e91313b2e..4145e0f8e 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -19,18 +19,19 @@ limitations under the License. ============LICENSE_END============================================ */ -import {Component, ElementRef, OnInit, ViewChild} from '@angular/core'; -import {FilesContent, FolderNodeElement, MetaDataTabModel} from './mapping-models/metadata/MetaDataTab.model'; +import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; +import { FilesContent, FolderNodeElement, MetaDataTabModel } from './mapping-models/metadata/MetaDataTab.model'; import * as JSZip from 'jszip'; -import {PackageCreationStore} from './package-creation.store'; -import {Definition} from './mapping-models/CBAPacakge.model'; -import {PackageCreationModes} from './creationModes/PackageCreationModes'; -import {PackageCreationBuilder} from './creationModes/PackageCreationBuilder'; -import {PackageCreationUtils} from './package-creation.utils'; -import {MetadataTabComponent} from './metadata-tab/metadata-tab.component'; -import {Router} from '@angular/router'; -import {ToastrService} from 'ngx-toastr'; +import { PackageCreationStore } from './package-creation.store'; +import { Definition } from './mapping-models/CBAPacakge.model'; +import { PackageCreationModes } from './creationModes/PackageCreationModes'; +import { PackageCreationBuilder } from './creationModes/PackageCreationBuilder'; +import { PackageCreationUtils } from './package-creation.utils'; +import { MetadataTabComponent } from './metadata-tab/metadata-tab.component'; +import { Router } from '@angular/router'; +import { ToastrService } from 'ngx-toastr'; +import { TourService } from 'ngx-tour-md-menu'; @Component({ @@ -47,13 +48,14 @@ export class PackageCreationComponent implements OnInit { private packageCreationStore: PackageCreationStore, private packageCreationUtils: PackageCreationUtils, private router: Router, + private tourService: TourService, private toastService: ToastrService) { } counter = 0; modes: object[] = [ - {name: 'Designer Mode', style: 'mode-icon icon-designer-mode'}, - {name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode'}]; + { name: 'Designer Mode', style: 'mode-icon icon-designer-mode' }, + { name: 'Scripting Mode', style: 'mode-icon icon-scripting-mode' }]; metaDataTab: MetaDataTabModel = new MetaDataTabModel(); folder: FolderNodeElement = new FolderNodeElement(); zipFile: JSZip = new JSZip(); @@ -61,10 +63,10 @@ export class PackageCreationComponent implements OnInit { definition: Definition = new Definition(); isSaveEnabled = false; - @ViewChild(MetadataTabComponent, {static: false}) + @ViewChild(MetadataTabComponent, { static: false }) metadataTabComponent: MetadataTabComponent; - @ViewChild('nameit', {static: true}) + @ViewChild('nameit', { static: true }) elementRef: ElementRef; versionPattern = '^(\\d+\\.)?(\\d+\\.)?(\\*|\\d+)$'; metadataClasses = 'nav-item nav-link active complete'; @@ -89,6 +91,10 @@ export class PackageCreationComponent implements OnInit { }); } + openTourGuide(step: string) { + // this.tourService.goto(step); + } + saveBluePrint() { this.packageCreationStore.state$.subscribe( cbaPackage => { @@ -109,7 +115,7 @@ export class PackageCreationComponent implements OnInit { saveBluePrintToDataBase() { this.create(); - this.zipFile.generateAsync({type: 'blob'}) + this.zipFile.generateAsync({ type: 'blob' }) .then(blob => { this.packageCreationStore.saveBluePrint(blob).subscribe( bluePrintDetailModels => { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html index bd501c163..ea74b4435 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.html @@ -4,8 +4,8 @@ <input class="ng-pristine ng-valid ng-touched" placeholder="Enter file URL then ENTER" type="input"> <a class="enter-link" href="#"><i class="icon-enter-link"></i></a> </div> - <span class="import-container-span">Or you can also <a data-target="#scriptsModal" data-toggle="modal" - (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span> + <span tourAnchor="st-scriptsImport" class="import-container-span">Or you can also <a data-target="#scriptsModal" + data-toggle="modal" (click)="resetTheUploadedFiles()" href="#"><b>Import File</b></a></span> </div> @@ -60,8 +60,8 @@ data-parent="#accordion-script"> <div class="card-body"> <ace-editor [(text)]="file.value" (textChange)="textChanges($event,file.key)" [mode]="'kotlin'" - [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'" - #editor style="height:300px;"> + [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'" #editor + style="height:300px;"> </ace-editor> </div> </div> @@ -106,7 +106,8 @@ <tr *ngFor="let item of uploadedFiles; let i=index"> <th width="40"><img src="assets/img/icon-file-code.svg" /></th> <th>{{ item.name }}</th> - <th (click)="removeInitFile(i)" width="40" class="text-right"><img src="assets/img/icon-remove-file.svg" /></th> + <th (click)="removeInitFile(i)" width="40" class="text-right"><img + src="assets/img/icon-remove-file.svg" /></th> </tr> </thead> </table> @@ -116,10 +117,11 @@ <button (click)="resetTheUploadedFiles()" class="btn btn-sm btn-secondary" data-dismiss="modal" type="button">Cancel </button> - <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" data-dismiss="modal" type="button"> + <button (click)="setFilesToStore()" class="btn btn-sm btn-primary" [disabled]="uploadedFiles?.length<=0" + data-dismiss="modal" type="button"> Import </button> </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.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'); diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts new file mode 100644 index 000000000..87e6c1990 --- /dev/null +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts @@ -0,0 +1,127 @@ + + +export const steps = [ + // { + // 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', + stepId: 'metadataTab' + }, + { + anchorId: 'mt-packageName', + content: 'Set your package name (required)', + title: 'Package name', + }, + { + anchorId: 'mt-packageVersion', + content: 'Set your package version like 1.0.0 (required)', + title: 'Package version', + }, + { + anchorId: 'mt-packageDescription', + content: 'Set your package description (required)', + title: 'Package description', + }, + { + anchorId: 'mt-packageTags', + content: 'Set your package Tags (Optional)', + title: 'Package tag', + }, + // ------- + { + anchorId: 'mt-packageKeys', + content: 'Set your package custom keys (Optional)', + title: 'Package keys', + }, + // Temaplate & Mapping + { + anchorId: 'tm-templateTab', + content: 'Create Your \'Template & Mapping \' files', + title: 'Temaplate & Mapping', + stepId: 'tm-templateTab' + }, + { + anchorId: 'tm-templateName', + content: 'Set your Template & Mapping Name', + title: 'Temaplte & Mapping name', + stepId: 'tm-templateName' + }, + { + anchorId: 'tm-templateType', + content: 'Set your Template Type', + title: 'Temaplte Type', + }, + { + anchorId: 'tm-templateContent', + content: 'Click \'Import File\' to get content from a file, or write template content manually', + title: 'Template Content', + }, + { + anchorId: 'tm-mappingContent', + content: 'Set your mapping content from the current template, or from an external file (XML, CSV)', + title: 'Mapping Content', + }, + { + anchorId: 'tm-templateFinish', + content: 'Click your \' Finish \' button when you finish ', + title: 'Finish', + stepId: 'tm-templateFinish' + }, + { + anchorId: 'tm-templateEdit', + content: 'Create another new Template or Click on the previous one to edit', + title: 'Create & Edit', + stepId: 'tm-templateEdit' + }, + // Script + { + anchorId: 'st-scriptsTab', + content: 'Move To Scripts Tab to set your Kotlin and Python scripts', + title: 'Scripts', + stepId: 'st-scriptsTab' + }, + { + anchorId: 'st-scriptsImport', + content: 'Click \' Import File\'button kotlin and python files', + title: 'Import File' + }, + // DSL + { + anchorId: 'dslTab', + content: 'Write your Authentication Properties in Javascript', + title: 'ESAP', + stepId: 'dslTab' + }, + // save package + { + anchorId: 'packageSave', + content: 'Click \' Save \' button to create your package', + title: 'Save' + } +]; 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 bdd5f6fde..c0a48d346 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 @@ -21,7 +21,8 @@ limitations under the License. import { Component, OnInit, OnDestroy } from '@angular/core'; import { PackagesStore } from '../packages.store'; import { TourService } from 'ngx-tour-md-menu'; - +import { steps } from './guideSteps'; +declare var $: any; @Component({ selector: 'app-packages-dashboard', @@ -39,39 +40,7 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy { 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.tourService.initialize([...steps]); this.checkTour(); } @@ -82,11 +51,24 @@ export class PackagesDashboardComponent implements OnInit, OnDestroy { this.startTour = true; } } + start() { console.log('start .................'); this.tourService.start(); this.tourService.events$.subscribe(res => { console.log(res); + if (res.value && res.value.anchorId && res.value.anchorId.includes('tm-')) { + $('#nav-template-tab').trigger('click'); + } + if (res.value && res.value.anchorId && res.value.anchorId === 'tm-mappingContent') { + $('#mappingTab').trigger('click'); + } + if (res.value && res.value.anchorId && res.value.anchorId === 'dslTab') { + $('#nav-authentication-tab').trigger('click'); + } + if (res.value && res.value.anchorId && res.value.anchorId.includes('st-')) { + $('#nav-scripts-tab').trigger('click'); + } }); } |