From b1d66c260586e7dc202a62ecd8266f41fbb08e87 Mon Sep 17 00:00:00 2001 From: Ahmedeldeeb50 Date: Wed, 2 Sep 2020 15:23:19 +0200 Subject: First version of tour-guide steps Issue-ID: CCSDK-2705 Signed-off-by: Ahmedeldeeb50 Change-Id: I4667c10eac2b4eac3266b93c76d0a25b0178aa79 --- .../metadata-tab/metadata-tab.component.html | 24 ++- .../package-creation.component.html | 202 +++++++++++---------- .../package-creation/package-creation.component.ts | 36 ++-- .../scripts-tab/scripts-tab.component.html | 16 +- .../templ-mapp-creation.component.html | 24 +-- .../templ-mapp-creation.component.ts | 6 +- .../templ-mapp-listing.component.html | 4 +- .../templ-mapp-listing.component.ts | 6 +- .../packages/packages-dashboard/guideSteps.ts | 127 +++++++++++++ .../packages-dashboard.component.ts | 50 ++--- 10 files changed, 314 insertions(+), 181 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts 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 @@ +
@@ -32,8 +33,8 @@
- +
- - - -
-
- +
+ + -
-
-
- - -
+ +
- -
-
-
- - - - +
+
- + + \ 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 @@ - Or you can also Import File + Or you can also Import File @@ -60,8 +60,8 @@ data-parent="#accordion-script">
+ [autoUpdateContent]="true" [durationBeforeCallback]="1000" [theme]="'eclipse'" #editor + style="height:300px;">
@@ -106,7 +106,8 @@ {{ item.name }} - + @@ -116,10 +117,11 @@ - - + \ 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 - +
@@ -19,8 +20,8 @@
- +
@@ -40,7 +41,7 @@
-
+
-
+ [(text)]="templateFileContent"> +
@@ -84,8 +86,8 @@
- @@ -102,8 +104,8 @@
Use Current Template Instance - +
Upload Attributes List
@@ -300,4 +302,4 @@
-
+ \ 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 @@ -
+
@@ -62,4 +62,4 @@
-
+
\ 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'); + } }); } -- cgit 1.2.3-korg