aboutsummaryrefslogtreecommitdiffstats
path: root/cds-ui/designer-client/src/app
diff options
context:
space:
mode:
authorShaabanEltanany <shaaban.eltanany.ext@orange.com>2020-09-13 14:16:23 +0200
committerShaabanEltanany <shaaban.eltanany.ext@orange.com>2020-09-13 14:16:23 +0200
commit3ccdf7e6e266578b98063e898b4acca0f1d15eda (patch)
tree0e0d562eea0b7d96990ca6e1c9b704dcd670a901 /cds-ui/designer-client/src/app
parent8de37f9d3035b4a41e696b967f2222806c250925 (diff)
keeping package changes safe
give user chance to discard changes or save changes Issue-ID: CCSDK-2336 Signed-off-by: ShaabanEltanany <shaaban.eltanany.ext@orange.com> Change-Id: If1e1c94ef65822428f25cca071103c9022add144
Diffstat (limited to 'cds-ui/designer-client/src/app')
-rw-r--r--cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivate.ts14
-rw-r--r--cds-ui/designer-client/src/app/common/core/canDactivate/ComponentCanDeactivateGuard.ts19
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html104
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.ts9
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.ts10
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts68
-rw-r--r--cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.routing.module.ts9
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({