diff options
Diffstat (limited to 'cds-ui/designer-client/src/app')
7 files changed, 142 insertions, 91 deletions
diff --git a/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivate.ts b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivate.ts new file mode 100644 index 000000000..e0dac0dc3 --- /dev/null +++ b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivate.ts @@ -0,0 +1,14 @@ +import {HostListener} from '@angular/core'; + +export abstract class ComponentCanDeactivate { + + abstract canDeactivate(): boolean; + + + @HostListener('window:beforeunload', ['$event']) + unloadNotification($event: any) { + if (!this.canDeactivate()) { + $event.returnValue = true; + } + } +} diff --git a/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivateGuard.ts b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivateGuard.ts new file mode 100644 index 000000000..b24784262 --- /dev/null +++ b/cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivateGuard.ts @@ -0,0 +1,19 @@ +import {Injectable} from '@angular/core'; + +import {CanDeactivate} from '@angular/router'; +import {ComponentCanDeactivate} from './ComponentCanDeactivate'; + +@Injectable() +export class ComponentCanDeactivateGuard implements CanDeactivate<ComponentCanDeactivate> { + canDeactivate(component: ComponentCanDeactivate): boolean { + + if (component.canDeactivate()) { + if (confirm('You have unsaved changes! If you leave, your changes will be lost.')) { + return true; + } else { + return false; + } + } + return true; + } +} diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html index 0ffd9cb5e..2b6ba4c63 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html @@ -13,60 +13,60 @@ </h2> <div class="col profile-help"> <nav class="navbar navbar-expand-lg navbar-light"> - <ul class="navbar-nav ml-auto"> - <!-- <li class="nav-item help-btn"> - <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" - [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a> - </li> --> - <!--Help Menu--> - <div class="nav-item dropdown helpMenu"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div> - <ul class="dropdown-content"> - <!-- <li> - <i class="icon-get_started" aria-hidden="true"></i> - <p> - <input id="clicker3" [checked]="startTour" type="checkbox" /> - <label for="clicker"> - Getting Started - <span>Quick steps to help you get started</span> - </label> - </p> + <ul class="navbar-nav ml-auto"> + <!-- <li class="nav-item help-btn"> + <a class="nav-link mr-2" href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank" + [delay]="300" tooltip="Help" placement="bottom"><i class="icon-info" aria-hidden="true"></i></a> </li> --> - <li> - <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"> - <i class="icon-user_guide" aria-hidden="true"></i> - <p> - Tutorials - <span>CDS Designer's User Guide</span> - </p> - </a> - </li> - </ul> - </div> - <!--User Menu--> - <div class="nav-item dropdown userMenu"> - <input class="dropdown-toggle" type="text"> - <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div> - <ul class="dropdown-content"> - <li> - <a href="#">Username</a> - </li> - <li> - <a href="#">Settings</a> - </li> - <li> - <a href="#">Projects</a> - </li> - <li> - <a href="#">Log out</a> - </li> - </ul> - </div> + <!--Help Menu--> + <div class="nav-item dropdown helpMenu"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"><i class="icon-info" aria-hidden="true"></i></div> + <ul class="dropdown-content"> + <!-- <li> + <i class="icon-get_started" aria-hidden="true"></i> + <p> + <input id="clicker3" [checked]="startTour" type="checkbox" /> + <label for="clicker"> + Getting Started + <span>Quick steps to help you get started</span> + </label> + </p> + </li> --> + <li> + <a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank"> + <i class="icon-user_guide" aria-hidden="true"></i> + <p> + Tutorials + <span>CDS Designer's User Guide</span> + </p> + </a> + </li> + </ul> + </div> + <!--User Menu--> + <div class="nav-item dropdown userMenu"> + <input class="dropdown-toggle" type="text"> + <div class="dropdown-text"><img src="../assets/img/img-user.jpeg" align="right"></div> + <ul class="dropdown-content"> + <li> + <a href="#">Username</a> + </li> + <li> + <a href="#">Settings</a> + </li> + <li> + <a href="#">Projects</a> + </li> + <li> + <a href="#">Log out</a> + </li> + </ul> + </div> - </ul> + </ul> </nav> - </div> + </div> </div> </header> @@ -757,7 +757,7 @@ <div class="col"> <div class="tab-content" id="nav-tabContent" (change)="clickEvent()"> <div class="tab-pane fade show active" id="nav-metadata" role="tabpanel" - aria-labelledby="nav-metadata-tab" > + aria-labelledby="nav-metadata-tab"> <app-metadata-tab></app-metadata-tab> </div> <div class="tab-pane fade" id="nav-template" role="tabpanel" diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts index 71afa155d..968d4e16a 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts @@ -16,13 +16,14 @@ import {DesignerStore} from '../designer/designer.store'; import {ToastrService} from 'ngx-toastr'; import {NgxFileDropEntry} from 'ngx-file-drop'; import {PackageCreationService} from '../package-creation/package-creation.service'; +import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate'; @Component({ selector: 'app-configuration-dashboard', templateUrl: './configuration-dashboard.component.html', styleUrls: ['./configuration-dashboard.component.css'], }) -export class ConfigurationDashboardComponent implements OnInit { +export class ConfigurationDashboardComponent extends ComponentCanDeactivate implements OnInit { viewedPackage: BluePrintDetailModel = new BluePrintDetailModel(); @ViewChild(MetadataTabComponent, {static: false}) metadataTabComponent: MetadataTabComponent; @@ -55,6 +56,7 @@ export class ConfigurationDashboardComponent implements OnInit { private designerStore: DesignerStore, private toastService: ToastrService ) { + super(); this.packageCreationStore.state$.subscribe( cbaPackage => { this.cbaPackage = cbaPackage; @@ -329,4 +331,9 @@ export class ConfigurationDashboardComponent implements OnInit { clickEvent() { this.isSaveEnabled = true; } + + canDeactivate(): boolean { + return this.isSaveEnabled; + } + } diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts index 9a38c62be..d2f2e0a8b 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts @@ -33,6 +33,7 @@ import {Router} from '@angular/router'; import {ToastrService} from 'ngx-toastr'; import {TourService} from 'ngx-tour-md-menu'; import {PackageCreationService} from './package-creation.service'; +import {ComponentCanDeactivate} from '../../../../common/core/canDactivate/ComponentCanDeactivate'; @Component({ @@ -40,7 +41,8 @@ import {PackageCreationService} from './package-creation.service'; templateUrl: './package-creation.component.html', styleUrls: ['./package-creation.component.css'] }) -export class PackageCreationComponent implements OnInit { +export class PackageCreationComponent extends ComponentCanDeactivate implements OnInit { + // adding initial referencing to designer mode @@ -52,6 +54,8 @@ export class PackageCreationComponent implements OnInit { private router: Router, private tourService: TourService, private toastService: ToastrService) { + + super(); } counter = 0; @@ -152,4 +156,8 @@ export class PackageCreationComponent implements OnInit { this.metadataTabComponent.saveMetaDataToStore(); } + + canDeactivate(): boolean { + return this.isSaveEnabled; + } } 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 8e5d8b0b8..c0ec679f7 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 @@ -1,36 +1,37 @@ -import { NgModule } from '@angular/core'; -import { CommonModule, JsonPipe } from '@angular/common'; -import { ApiService } from '../../../common/core/services/api.typed.service'; -import { PackagesRoutingModule } from './packages.routing.module'; -import { NgbPaginationModule } from '@ng-bootstrap/ng-bootstrap'; -import { SharedModulesModule } from '../../shared-modules/shared-modules.module'; -import { PackagesDashboardComponent } from './packages-dashboard/packages-dashboard.component'; -import { PackageListComponent } from './packages-dashboard/package-list/package-list.component'; -import { DesignerComponent } from './designer/designer.component'; -import { SidebarModule } from 'ng-sidebar'; -import { PackagePaginationComponent } from './packages-dashboard/package-pagination/package-pagination.component'; -import { SortPackagesComponent } from './packages-dashboard/sort-packages/sort-packages.component'; -import { PackagesHeaderComponent } from './packages-dashboard/packages-header/packages-header.component'; -import { PackagesSearchComponent } from './packages-dashboard/search-by-packages/search-by-packages.component'; -import { TagsFilteringComponent } from './packages-dashboard/filter-by-tags/filter-by-tags.component'; -import { ConfigurationDashboardComponent } from './configuration-dashboard/configuration-dashboard.component'; -import { ActionsComponent } from './designer/actions/actions.component'; -import { PackageCreationComponent } from './package-creation/package-creation.component'; -import { FormsModule } from '@angular/forms'; -import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component'; -import { NgxFileDropModule } from 'ngx-file-drop'; -import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component'; -import { SourceEditorComponent } from './source-editor/source-editor.component'; -import { ScriptsTabComponent } from './package-creation/scripts-tab/scripts-tab.component'; -import { AceEditorModule } from 'ng2-ace-editor'; -import { MetadataTabComponent } from './package-creation/metadata-tab/metadata-tab.component'; -import { DslDefinitionsTabComponent } from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component'; -import { TemplMappCreationComponent } from './package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component'; -import { TemplMappListingComponent } from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component'; -import { DataTablesModule } from 'angular-datatables'; -import { DesignerSourceViewComponent } from './designer/source-view/source-view.component'; -import { NgxUiLoaderModule } from 'ngx-ui-loader'; +import {NgModule} from '@angular/core'; +import {CommonModule, JsonPipe} from '@angular/common'; +import {ApiService} from '../../../common/core/services/api.typed.service'; +import {PackagesRoutingModule} from './packages.routing.module'; +import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap'; +import {SharedModulesModule} from '../../shared-modules/shared-modules.module'; +import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component'; +import {PackageListComponent} from './packages-dashboard/package-list/package-list.component'; +import {DesignerComponent} from './designer/designer.component'; +import {SidebarModule} from 'ng-sidebar'; +import {PackagePaginationComponent} from './packages-dashboard/package-pagination/package-pagination.component'; +import {SortPackagesComponent} from './packages-dashboard/sort-packages/sort-packages.component'; +import {PackagesHeaderComponent} from './packages-dashboard/packages-header/packages-header.component'; +import {PackagesSearchComponent} from './packages-dashboard/search-by-packages/search-by-packages.component'; +import {TagsFilteringComponent} from './packages-dashboard/filter-by-tags/filter-by-tags.component'; +import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component'; +import {ActionsComponent} from './designer/actions/actions.component'; +import {PackageCreationComponent} from './package-creation/package-creation.component'; +import {FormsModule} from '@angular/forms'; +import {ImportsTabComponent} from './package-creation/imports-tab/imports-tab.component'; +import {NgxFileDropModule} from 'ngx-file-drop'; +import {TemplateMappingComponent} from './package-creation/template-mapping/template-mapping.component'; +import {SourceEditorComponent} from './source-editor/source-editor.component'; +import {ScriptsTabComponent} from './package-creation/scripts-tab/scripts-tab.component'; +import {AceEditorModule} from 'ng2-ace-editor'; +import {MetadataTabComponent} from './package-creation/metadata-tab/metadata-tab.component'; +import {DslDefinitionsTabComponent} from './package-creation/dsl-definitions-tab/dsl-definitions-tab.component'; +import {TemplMappCreationComponent} from './package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component'; +import {TemplMappListingComponent} from './package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component'; +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'; +import {ComponentCanDeactivateGuard} from '../../../common/core/canDactivate/ComponentCanDeactivateGuard'; @NgModule({ declarations: [PackagesDashboardComponent, @@ -53,6 +54,7 @@ import {TourMatMenuModule} from 'ngx-tour-md-menu'; MetadataTabComponent, DslDefinitionsTabComponent, DesignerSourceViewComponent, + ], imports: [ CommonModule, @@ -68,7 +70,7 @@ import {TourMatMenuModule} from 'ngx-tour-md-menu'; NgxUiLoaderModule, TourMatMenuModule.forRoot() ], - providers: [ApiService, JsonPipe], + providers: [ApiService, JsonPipe, ComponentCanDeactivateGuard], bootstrap: [] }) export class PackagesModule { diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts index f357bc167..d9671d04c 100644 --- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts +++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts @@ -1,10 +1,11 @@ import {NgModule} from '@angular/core'; -import {Routes, RouterModule} from '@angular/router'; +import {RouterModule, Routes} from '@angular/router'; import {PackagesDashboardComponent} from './packages-dashboard/packages-dashboard.component'; import {DesignerComponent} from './designer/designer.component'; import {PackageCreationComponent} from './package-creation/package-creation.component'; import {ConfigurationDashboardComponent} from './configuration-dashboard/configuration-dashboard.component'; -import { DesignerSourceViewComponent } from './designer/source-view/source-view.component'; +import {DesignerSourceViewComponent} from './designer/source-view/source-view.component'; +import {ComponentCanDeactivateGuard} from '../../../common/core/canDactivate/ComponentCanDeactivateGuard'; const routes: Routes = [ @@ -14,8 +15,8 @@ const routes: Routes = [ }, {path: 'designer/:id', component: DesignerComponent}, {path: 'designer/source/:id', component: DesignerSourceViewComponent}, - {path: 'package/:id', component: ConfigurationDashboardComponent}, - {path: 'createPackage', component: PackageCreationComponent} + {path: 'package/:id', component: ConfigurationDashboardComponent, canDeactivate: [ComponentCanDeactivateGuard]}, + {path: 'createPackage', component: PackageCreationComponent, canDeactivate: [ComponentCanDeactivateGuard]} ]; @NgModule({ |