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/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 +- 8 files changed, 142 insertions(+), 32 deletions(-) (limited to 'cds-ui/designer-client/src/app') 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: [] -- cgit 1.2.3-korg