From d73b71a2385f100e924bd377b0299e2b2d9898ca Mon Sep 17 00:00:00 2001 From: Ahmedeldeeb50 Date: Sun, 30 Aug 2020 15:59:29 +0200 Subject: adding tour-guide to package dashboard Stop popup autoclose Issue-ID: CCSDK-2705 Signed-off-by: Ahmedeldeeb50 Change-Id: Id6349d2d3b72fb3b316bc405498fabc71a6f7bbd --- cds-ui/designer-client/package-lock.json | 22 +++++++ cds-ui/designer-client/package.json | 2 + cds-ui/designer-client/proxy.conf.json | 8 +-- cds-ui/designer-client/src/app/app.component.css | 9 +++ .../package-list/package-list.component.html | 15 +++-- .../package-list/package-list.component.ts | 33 +++++++--- .../packages-dashboard.component.css | 17 ++++++ .../packages-dashboard.component.html | 23 ++++--- .../packages-dashboard.component.ts | 71 ++++++++++++++++++++-- .../search-by-packages.component.html | 2 +- .../feature-modules/packages/packages.module.ts | 4 +- cds-ui/designer-client/src/index.html | 68 +++++++++++++-------- 12 files changed, 211 insertions(+), 63 deletions(-) (limited to 'cds-ui/designer-client') diff --git a/cds-ui/designer-client/package-lock.json b/cds-ui/designer-client/package-lock.json index 7cf4be069..6ee937186 100644 --- a/cds-ui/designer-client/package-lock.json +++ b/cds-ui/designer-client/package-lock.json @@ -8496,6 +8496,23 @@ "tslib": "^1.9.0" } }, + "ngx-tour-core": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ngx-tour-core/-/ngx-tour-core-4.1.1.tgz", + "integrity": "sha512-Nfs9FgVJ1A7DyazEp3yALvmoo1CxoP1RvmiURDFVW1/gJWtMhoD+lBTAUsdw1+rhv8n/e8iKXpRYB60m772Bog==", + "requires": { + "tslib": "^1.9.0" + } + }, + "ngx-tour-md-menu": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/ngx-tour-md-menu/-/ngx-tour-md-menu-4.1.1.tgz", + "integrity": "sha512-6W76D9HOT3HGr4gewzNj0aEZ2qeKRPexTX3lULGyIZ+tjdg4We5mE0qg5PxAgNTvjvTol65tt7P6BgzTKsNaOQ==", + "requires": { + "tslib": "^1.9.0", + "withinviewport": "^2.0.0" + } + }, "ngx-ui-loader": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/ngx-ui-loader/-/ngx-ui-loader-8.0.0.tgz", @@ -13649,6 +13666,11 @@ "integrity": "sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho=", "dev": true }, + "withinviewport": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/withinviewport/-/withinviewport-2.1.2.tgz", + "integrity": "sha512-bOZt20QiBkAroXwCAVnb+ajYNPAzVrTKCKuVAuWtLbXlOk3e5cAS5diZMWhYP4Cpyq3GS47jk+fsb5tQqhIxtg==" + }, "wordwrap": { "version": "0.0.3", "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz", diff --git a/cds-ui/designer-client/package.json b/cds-ui/designer-client/package.json index 1902d367d..517b2dab1 100644 --- a/cds-ui/designer-client/package.json +++ b/cds-ui/designer-client/package.json @@ -45,6 +45,8 @@ "ngx-file-drop": "^8.0.8", "ngx-toastr": "^11.3.3", "ngx-ui-loader": "^8.0.0", + "ngx-tour-core": "^4.1.1", + "ngx-tour-md-menu": "^4.1.1", "rxjs": "~6.4.0", "stream": "0.0.2", "tslib": "^1.10.0", diff --git a/cds-ui/designer-client/proxy.conf.json b/cds-ui/designer-client/proxy.conf.json index 1f63613ac..4e8ef0aab 100644 --- a/cds-ui/designer-client/proxy.conf.json +++ b/cds-ui/designer-client/proxy.conf.json @@ -1,16 +1,14 @@ { "/controllerblueprint/*": { - "target": "localhost", - // "target": "https://41.128.168.198:3000", + "target": "https://localhost:3000", "secure": false, "logLevel": "debug", "changeOrigin": true }, "/resourcedictionary/*": { - "target": "localhost", - // "target": "https://41.128.168.198:3000", + "target": "https://localhost:3000", "secure": false, "logLevel": "debug", "changeOrigin": true } -} +} \ No newline at end of file diff --git a/cds-ui/designer-client/src/app/app.component.css b/cds-ui/designer-client/src/app/app.component.css index e69de29bb..9a0cd34c1 100644 --- a/cds-ui/designer-client/src/app/app.component.css +++ b/cds-ui/designer-client/src/app/app.component.css @@ -0,0 +1,9 @@ +.cdk-overlay-container { + position: none; + z-index: 0; +} + +.cdk-overlay-backdrop { + position: none; + z-index: 0; +} \ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html index 35ca1e2c9..5712f80a0 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html @@ -7,13 +7,13 @@
- Create Package
- Import Package + Import Package
@@ -76,9 +76,8 @@

Last modified {{ bluePrint.createdDate | date:'short' }}

-

By {{bluePrint.updatedBy.split('<')[0]}}

-

By {{bluePrint.updatedBy.split('<')[0]}}

+

{{bluePrint.artifactDescription}}

  • @@ -105,7 +104,7 @@
- +
@@ -121,4 +120,4 @@
-
+
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts index 352f33b91..3cecd33fd 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts @@ -1,9 +1,11 @@ -import {Component, OnInit} from '@angular/core'; -import {BlueprintModel} from '../../model/BluePrint.model'; -import {PackagesStore} from '../../packages.store'; -import {Router} from '@angular/router'; -import {ConfigurationDashboardService} from '../../configuration-dashboard/configuration-dashboard.service'; -import {saveAs} from 'file-saver'; +import { Component, OnInit } from '@angular/core'; +import { BlueprintModel } from '../../model/BluePrint.model'; +import { PackagesStore } from '../../packages.store'; +import { Router } from '@angular/router'; +import { ConfigurationDashboardService } from '../../configuration-dashboard/configuration-dashboard.service'; +import { saveAs } from 'file-saver'; +import { NgxUiLoaderService } from 'ngx-ui-loader'; +import { TourService } from 'ngx-tour-md-menu'; @Component({ selector: 'app-packages-list', @@ -15,9 +17,17 @@ export class PackageListComponent implements OnInit { viewedPackages: BlueprintModel[] = []; - constructor(private packagesStore: PackagesStore, private router: Router - , private configurationDashboardService: ConfigurationDashboardService) { + constructor( + private packagesStore: PackagesStore, + private router: Router, + private configurationDashboardService: ConfigurationDashboardService, + private ngxLoader: NgxUiLoaderService, + private tourService: TourService, + ) { console.log('PackageListComponent'); + + + this.packagesStore.state$.subscribe(state => { console.log(state); if (state.filteredPackages) { @@ -26,8 +36,13 @@ export class PackageListComponent implements OnInit { }); } + ngOnInit() { this.packagesStore.getAll(); + + + + } view(id) { @@ -40,7 +55,7 @@ export class PackageListComponent implements OnInit { downloadPackage(artifactName: string, artifactVersion: string) { this.configurationDashboardService.downloadResource(artifactName + '/' + artifactVersion).subscribe(response => { - const blob = new Blob([response], {type: 'application/octet-stream'}); + const blob = new Blob([response], { type: 'application/octet-stream' }); saveAs(blob, artifactName + '-' + artifactVersion + '-CBA.zip'); }); } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css index e69de29bb..74ace1a35 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css @@ -0,0 +1,17 @@ +.panel-wrap button label{ + cursor: pointer; +} + +.panel-wrap .panel{ + border-radius: 8px; +} + +.cdk-overlay-container { + position: none; + z-index: 0; +} + +.cdk-overlay-backdrop { + position: none; + z-index: 0; +} \ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html index a632568c8..8391530d6 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html @@ -1,20 +1,24 @@ +
- - + +
- +

Welcome to CDS

Want a tour? Our helpful guide will introduce you to new CDS Designer UI.

- +
@@ -22,12 +26,13 @@
- All + All Deployed - Under Construction + Under + Construction Archived
@@ -38,7 +43,7 @@
-
+
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 4e33a9df1..bdd5f6fde 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 @@ -18,20 +18,83 @@ See the License for the specific language governing permissions and limitations under the License. ============LICENSE_END============================================ */ -import {Component, OnInit} from '@angular/core'; -import {PackagesStore} from '../packages.store'; +import { Component, OnInit, OnDestroy } from '@angular/core'; +import { PackagesStore } from '../packages.store'; +import { TourService } from 'ngx-tour-md-menu'; + @Component({ selector: 'app-packages-dashboard', templateUrl: './packages-dashboard.component.html', styleUrls: ['./packages-dashboard.component.css'] }) -export class PackagesDashboardComponent implements OnInit { +export class PackagesDashboardComponent implements OnInit, OnDestroy { - constructor() { } + startTour = false; + constructor( + private tourService: TourService, + ) { } ngOnInit() { 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.checkTour(); + } + + checkTour() { + if (localStorage.getItem('tour-guide') && localStorage.getItem('tour-guide') === 'false') { + this.startTour = false; + } else { + this.startTour = true; + } + } + start() { + console.log('start .................'); + this.tourService.start(); + this.tourService.events$.subscribe(res => { + console.log(res); + }); + } + + stopTour() { + localStorage.setItem('tour-guide', 'false'); + } + + ngOnDestroy(): void { + this.tourService.pause(); } } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html index e7c605fd1..b304c264a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html @@ -1,4 +1,4 @@
- +
\ No newline at end of file diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts index 47927cef6..8e5d8b0b8 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts @@ -30,6 +30,7 @@ import { TemplMappListingComponent } from './package-creation/template-mapping/t import { DataTablesModule } from 'angular-datatables'; import { DesignerSourceViewComponent } from './designer/source-view/source-view.component'; import { NgxUiLoaderModule } from 'ngx-ui-loader'; +import {TourMatMenuModule} from 'ngx-tour-md-menu'; @NgModule({ declarations: [PackagesDashboardComponent, @@ -64,7 +65,8 @@ import { NgxUiLoaderModule } from 'ngx-ui-loader'; AceEditorModule, DataTablesModule, // Import NgxUiLoaderModule - NgxUiLoaderModule + NgxUiLoaderModule, + TourMatMenuModule.forRoot() ], providers: [ApiService, JsonPipe], bootstrap: [] diff --git a/cds-ui/designer-client/src/index.html b/cds-ui/designer-client/src/index.html index 537d26d57..96e7b003a 100644 --- a/cds-ui/designer-client/src/index.html +++ b/cds-ui/designer-client/src/index.html @@ -2,37 +2,53 @@ - - CDS - - + + CDS + + - - - - - - - + + + + + + + - - - - - + + + + + + - - - - - + + + + + + + + \ No newline at end of file -- cgit 1.2.3-korg