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

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({