+<tour-step-template></tour-step-template>
<div class="card creat-card">
<div class="single-line-model">
<label class="label-name">Mode</label>
<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
<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">
<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">
<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>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
<app-header></app-header>
-
+<tour-step-template></tour-step-template>
<div class="new-wrapper">
-
<div class="container-fluid main-container">
- <header class="page-title">
- <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>
<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>
</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
============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({
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();
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';
});
}
+ openTourGuide(step: string) {
+ // this.tourService.goto(step);
+ }
+
saveBluePrint() {
this.packageCreationStore.state$.subscribe(
cbaPackage => {
saveBluePrintToDataBase() {
this.create();
- this.zipFile.generateAsync({type: 'blob'})
+ this.zipFile.generateAsync({ type: 'blob' })
.then(blob => {
this.packageCreationStore.saveBluePrint(blob).subscribe(
bluePrintDetailModels => {
<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>
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>
<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>
<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
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">
</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>
<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']">
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>
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>
<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>
<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>
</div>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
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({
private templateStore: TemplateStore,
private packageCreationUtils: PackageCreationUtils,
private toastr: ToastrService,
- private sharedService: SharedService
+ private sharedService: SharedService,
+ private tourService: TourService,
) {
}
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');
</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">
</div>
</div>
</div>
-</div>
+</div>
\ No newline at end of file
import { TemplateAndMapping } from '../TemplateAndMapping';
import { ActivatedRoute } from '@angular/router';
import { SharedService } from '../shared-service';
+import { TourService } from 'ngx-tour-md-menu';
@Component({
private packageCreationStore: PackageCreationStore,
private templateStore: TemplateStore,
private route: ActivatedRoute,
- private sharedService: SharedService
+ private sharedService: SharedService,
+ private tourService: TourService,
+
) {
}
createNewTemplate() {
this.openCreationView();
this.sharedService.disableEdit();
+ this.tourService.goto('tm-templateName');
}
openCreationView() {
this.showCreationView.emit('tell parent to open create views');
--- /dev/null
+
+
+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'
+ }
+];
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',
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();
}
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');
+ }
});
}
Code Review / ccsdk / cds.git / commitdiff