diff options
12 files changed, 209 insertions, 59 deletions
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 6b81a884a..4e8ef0aab 100644 --- a/cds-ui/designer-client/proxy.conf.json +++ b/cds-ui/designer-client/proxy.conf.json @@ -11,4 +11,4 @@ "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 @@ </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">×</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: [] 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 @@ <html lang="en"> <head> - <meta charset="utf-8"> - <title>CDS</title> - <base href="/"> - <meta name="viewport" content="width=device-width, initial-scale=1"> + <meta charset="utf-8"> + <title>CDS</title> + <base href="/"> + <meta name="viewport" content="width=device-width, initial-scale=1"> - <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png"> - <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png"> - <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png"> - <link rel="manifest" href="/assets/img/favicon/site.webmanifest"> - <link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5"> - <meta name="msapplication-TileColor" content="#da532c"> - <meta name="theme-color" content="#ffffff"> + <link rel="apple-touch-icon" sizes="180x180" href="/assets/img/favicon/apple-touch-icon.png"> + <link rel="icon" type="image/png" sizes="32x32" href="/assets/img/favicon/favicon-32x32.png"> + <link rel="icon" type="image/png" sizes="16x16" href="/assets/img/favicon/favicon-16x16.png"> + <link rel="manifest" href="/assets/img/favicon/site.webmanifest"> + <link rel="mask-icon" href="/assets/img/favicon/safari-pinned-tab.svg" color="#5bbad5"> + <meta name="msapplication-TileColor" content="#da532c"> + <meta name="theme-color" content="#ffffff"> - <link rel="stylesheet" href="/assets/icomoon/style.css"> - <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900" rel="stylesheet"> - <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> - <!-- <link rel="shortcut icon" href="https://www.onap.org/wp-content/uploads/sites/20/2018/01/favicon.png" /> --> - <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" - crossorigin="anonymous"> + <link rel="stylesheet" href="/assets/icomoon/style.css"> + <link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800,900" rel="stylesheet"> + <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> + <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> + <!-- <link rel="shortcut icon" href="https://www.onap.org/wp-content/uploads/sites/20/2018/01/favicon.png" /> --> + <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" + integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" + crossorigin="anonymous"> </head> <body> -<app-root></app-root> -<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" - crossorigin="anonymous"></script> -<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" - crossorigin="anonymous"></script> -<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" - crossorigin="anonymous"></script> -<!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> --> + <app-root></app-root> + <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" + integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" + crossorigin="anonymous"></script> + <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" + integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" + crossorigin="anonymous"></script> + <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" + integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" + crossorigin="anonymous"></script> + <!-- <script src="https://code.jquery.com/jquery-3.4.1.js"></script> --> </body> +<style> + .cdk-overlay-container { + position: unset; + z-index: 0; + } -</html> + .cdk-overlay-backdrop { + position: unset; + z-index: 0; + } +</style> + +</html>
\ No newline at end of file |