summaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app
diff options
context:
space:
mode:
authorAhmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-08-30 15:59:29 +0200
committerAhmedeldeeb50 <ahmed.eldeeb.ext@orange.com>2020-08-31 09:42:46 +0200
commitd73b71a2385f100e924bd377b0299e2b2d9898ca (patch)
tree99366c34e0a1e2fffb74627359a2086aab07af7e /cds-ui/designer-client/src/app
parent65a445a2afd3ca2d1022d2e7c7fc71ec12698e87 (diff)
adding tour-guide to package dashboard
Stop popup autoclose Issue-ID: CCSDK-2705 Signed-off-by: Ahmedeldeeb50 <ahmed.eldeeb.ext@orange.com> Change-Id: Id6349d2d3b72fb3b316bc405498fabc71a6f7bbd
Diffstat (limited to 'cds-ui/designer-client/src/app')
-rw-r--r--cds-ui/designer-client/src/app/app.component.css9
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.html15
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/package-list/package-list.component.ts33
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.css17
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.html23
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/packages-dashboard.component.ts71
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard/search-by-packages/search-by-packages.component.html2
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts4
8 files changed, 142 insertions, 32 deletions
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 @@
</div>
<div class="card-footer row">
<div class="col text-center">
- <a routerLink="/packages/createPackage" role="button" aria-pressed="true"
+ <a tourAnchor="create" routerLink="/packages/createPackage" role="button" aria-pressed="true"
class="btn-create-package float"><i class="icon-create-white" aria-hidden="true"></i>Create
Package
</a>
<br />
- <a href="#" role="button" aria-pressed="true" class="btn-import-package float"><i
- class="icon-import-blue" aria-hidden="true"></i>Import Package
+ <a href="#" id="clone-btn" role="button" aria-pressed="true" class="btn-import-package float"><i
+ tourAnchor="import" class="icon-import-blue" aria-hidden="true"></i>Import Package
</a>
<ngx-ui-loader></ngx-ui-loader>
</div>
@@ -76,9 +76,8 @@
<div class="col">
<p class="mb-0 mt-1">Last modified {{ bluePrint.createdDate | date:'short' }}
</p>
- <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
- <p class="package-desc" [delay]="300"
- tooltip="{{bluePrint.artifactDescription}}"
+ <p class="mb-2">By {{bluePrint.updatedBy.split('<')[0]}}</p>
+ <p class="package-desc" [delay]="300" tooltip="{{bluePrint.artifactDescription}}"
placement="bottom left">{{bluePrint.artifactDescription}}</p>
<ul class="package-contributers">
<li>
@@ -105,7 +104,7 @@
</div>
<div class="card-footer">
<div class="row">
-
+
<div class="col">
<button type="button" (click)="view(bluePrint.id)" class="btn btn-card-config"><i
class="icon-btn-card-config" aria-hidden="true"></i>Configuration</button>
@@ -121,4 +120,4 @@
</div>
</div>
-</div>
+</div> \ 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 @@
<app-header>
</app-header>
+<tour-step-template></tour-step-template>
<div class="new-wrapper">
<div class="container-fluid main-container">
<app-packages-header></app-packages-header>
<div class="container-fluid body-container">
<!--Tour Starter-->
- <input id="clicker" type="checkbox" />
- <label for="clicker">Start the tour</label>
+ <input id="clicker" [checked]="startTour" type="checkbox" />
+ <label class="ml-1" for="clicker">Start the tour</label>
<div class="panel-wrap">
<div class="panel">
- <button id="clicker1" type="button"><label for="clicker">Dismiss</label>
+ <button id="clicker1" class="close" type="button" (click)="stopTour()">
+ <label for="clicker">&times;</label>
</button>
+
<h3>Welcome to CDS</h3>
<p>Want a tour? Our helpful guide will introduce you to new CDS Designer UI.</p>
- <button type="button" class="btn" style="background-color: #fff;">Let's get started</button>
+ <button type="button" class="btn" style="background-color: #fff;margin:0">
+ <label style="margin: 0;" (click)="start()" for="clicker">Let's get started</label></button>
</div>
</div>
<!---->
@@ -22,12 +26,13 @@
<!--Nav Tabs-->
<div class="col pr-0">
<div class="nav nav-tabs " id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home"
- role="tab" aria-controls="nav-home" aria-selected="true">All</a>
+ <a tourAnchor="allTab" class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab"
+ href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">All</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile"
role="tab" aria-controls="nav-profile" aria-selected="false">Deployed</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact"
- role="tab" aria-controls="nav-contact" aria-selected="false">Under Construction</a>
+ <a tourAnchor="test3" class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab"
+ href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Under
+ Construction</a>
<a class="nav-item nav-link" id="nav-contact1-tab" data-toggle="tab" href="#nav-contact1"
role="tab" aria-controls="nav-contact1" aria-selected="false">Archived</a>
</div>
@@ -38,7 +43,7 @@
<div class="col-7">
<app-packages-search></app-packages-search>
</div>
- <div class="col-5 pl-2">
+ <div class="col-5 pl-2" tourAnchor="tagFilter">
<app-filter-by-tags class="w-100"></app-filter-by-tags>
</div>
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 @@
<div class="searchBox">
- <input class="searchInput" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
+ <input class="searchInput" tourAnchor="search" [ngClass]="{'searchBox-expanded': searchQuery}" (input)="searchPackages($event)" type="text" name="" placeholder="Search packages">
<button class="searchButton" href="#"></button>
</div> \ 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: []