diff options
Diffstat (limited to 'cds-ui/designer-client/src/app/modules/feature-modules/packages/packages-dashboard')
6 files changed, 130 insertions, 31 deletions
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 |