First version of tour-guide steps

Issue-ID: CCSDK-2705

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

2 files changed, 143 insertions, 34 deletions

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');
+            }
         });
     }