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 --- .../packages/packages-dashboard/guideSteps.ts | 127 +++++++++++++++++++++ .../packages-dashboard.component.ts | 50 +++----- 2 files changed, 143 insertions(+), 34 deletions(-) create mode 100644 cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/guideSteps.ts (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard') 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