S54251323 - When leaving Create Job the warning message does not show.

Showing Warning message when leaving the create job page without saving

frontend/angular/src/app/components/admin-portal/admin-portal-layout/admin-portal-layout.component.html

@@ -2,7 +2,7 @@
     <div class="container-fluid">
         <div class="row" style="background-color: #ffffff;">
             <div class="site-logo">
-                <a [routerLink]="['admin/iframe-page', homeURL]"><img src="assets/images/headerlogo.jpg"></a>
+                <a (click)="menuItemClick(['admin/iframe-page', homeURL])"><img src="assets/images/headerlogo.jpg"></a>
             </div>
             <div class="search-bar">
                 <div class="header-select" *ngIf="companyUser">
@@ -82,6 +82,16 @@
         </ng-container>
     </div>
 </ng-template>
+<ng-template #jobNotSavedModal>
+    <div class="modal-body main-welcome-popup">
+        <h2>You haven't saved changes on Job!</h2>
+        <p>Are you sure you want to continue?</p>
+        <div class="create-y-f-job">
+            <a href="javascript:void(0)" (click)="closeJobNotSavedPopup()" class="n-btn">No</a>
+            <a (click)="gotoNextPage()" class="y-btn">Yes</a>
+        </div>
+    </div>
+</ng-template>
 <div class="container-fluid">
     <div class="row content">
         <div class="sidebar-menu fixed">
@@ -90,7 +100,7 @@
                     <ng-container *ngFor="let menuItem of sidebarMenu.children; let i = index">
                         <span class="brack-line" *ngIf="menuItem.brakeLine"></span>
                         <li [class]="menuItem.disabled">
-                            <a [class]="menuItem.linkCSSClass" [routerLink]="menuItem.routerLink">
+                            <a [class]="menuItem.linkCSSClass" (click)="menuItemClick(menuItem.routerLink)">
                                 <span [class]="menuItem.iconCSSClass"></span>
                                 {{ menuItem.title }}
                             </a>

frontend/angular/src/app/components/admin-portal/admin-portal-layout/admin-portal-layout.component.ts

@@ -22,6 +22,7 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
 
     @ViewChild('reachedCapModal') reachedCapModal;
     @ViewChild('trialNotAllowedModal') trialNotAllowedModal;
+    @ViewChild('jobNotSavedModal') jobNotSavedModal;
     showLoader: boolean;
     subscriptions: Array<Subscription> = [];
     successMsgs: Array<Message> = [];
@@ -44,6 +45,8 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
     showChat = false;
     showBubble = false;
     jobApplicationID: string;
+    jobNotSaved: boolean = false;
+    gotoURL: any;
 
     constructor(
         private deviceService: DeviceDetectorService,
@@ -97,6 +100,11 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
                     if (message.message === true) {
                         this.loadMenu();
                     }
+                } else if (message.name === 'OnJobScreen') {
+                    if(message.message != this.jobNotSaved) {
+                        this.jobNotSaved  = message.message;
+                        this.changeDetector.detectChanges();
+                    }
                 }
             }
         ));
@@ -225,6 +233,24 @@ export class AdminPortalLayoutComponent implements OnInit, OnDestroy {
         }
     }
 
+    menuItemClick(routerURL): void {
+        if (this.jobNotSaved) {
+            this.gotoURL = routerURL;
+            this.modalService.show(this.jobNotSavedModal);
+        } else {
+            this.router.navigate(routerURL);
+        }
+    }
+
+    closeJobNotSavedPopup() {
+        this.modalService.hide(1);
+    }
+
+    gotoNextPage() {
+        this.modalService.hide(1);
+        this.router.navigate(this.gotoURL);
+    }
+
     minimizeWindow(response: any): void {
         this.showChat = false;
 

frontend/angular/src/assets/css/common.css

@@ -2912,6 +2912,16 @@ a.forgot-pass {
     color: #ffffff;
     line-height: 60px;
 }
+.create-y-f-job a.y-btn{
+    width: 150px;
+}
+.create-y-f-job a.n-btn{
+    width: 150px;
+    background-color: transparent;
+    color: #9b9b9b;
+    border: solid 1px #dfdfdf;
+    margin-right: 20px;
+}
 .overlayer-dark::before {
     background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
     bottom: 0;