FOGL-8470: Alert user with an info on Cancel/Esc button event if a modal/form has changes

src/app/components/common/node-editor/flow-editor.module.ts

@@ -20,11 +20,13 @@ import { AddTaskWizardComponent } from '../../core/north/add-task-wizard/add-tas
 import { ReadingsCountComponent } from './south/asset-readings/readings-count.component';
 import { DirectivesModule } from '../../../directives/directives.module';
 import { AssetTrackerComponent } from './south/asset-tracker/asset-tracker.component';
+import { canDeactivateGuard } from '../../../guards/can-deactivate/can-deactivate.guard';
 
 const routes: Routes = [
   {
     path: 'editor/:from',
     component: NodeEditorComponent,
+    canDeactivate: [canDeactivateGuard]
   },
   {
     path: 'editor/:from/:name/details',

src/app/components/common/node-editor/node-editor.component.html

@@ -42,8 +42,10 @@
     </ng-container>
   </div>
   <ng-container *ngIf="from === 'notifications'">
-      <app-notification-service-warning [isEnabled]="serviceInfo.isEnabled" [isInstalled]="serviceInfo.isInstalled" [isAvailable]="serviceInfo.isAvailable"
-      [serviceName]="serviceInfo.name" (serviceConfigureModal)="openServiceConfigureModal()" (refreshService)="refreshServiceInfo()"></app-notification-service-warning>
+    <app-notification-service-warning [isEnabled]="serviceInfo.isEnabled" [isInstalled]="serviceInfo.isInstalled"
+      [isAvailable]="serviceInfo.isAvailable" [serviceName]="serviceInfo.name"
+      (serviceConfigureModal)="openServiceConfigureModal()"
+      (refreshService)="refreshServiceInfo()"></app-notification-service-warning>
   </ng-container>
   <ng-container *ngIf="!isAddFilterWizard">
     <div class="rete" #rete></div>
@@ -54,7 +56,7 @@
     </div>
   </ng-contafiner>
   <!-- Quick View -->
-  <app-quickview [showReadings]="showReadings">
+  <app-quickview #quickView [showReadings]="showReadings" (closeAction)="closeRightDrawer()">
     <ng-container *ngIf="showPluginConfiguration">
       <app-configuration-group *ngIf="category" [category]="category" [from]="'south'" [sourceName]="serviceName"
         (changedConfigEvent)="getChangedConfig($event)"
@@ -93,16 +95,17 @@
 
     <!-- Notification Instance Configuration in Quickview -->
     <ng-container *ngIf="showNotificationConfiguration && from === 'notifications'">
-      <app-configuration-group #notificationConfigView *ngIf="category" [sourceName]="serviceName" [category]="category" [from]="'notifications'"
-        (changedConfigEvent)="getChangedNotificationConfig($event)"
+      <app-configuration-group #notificationConfigView *ngIf="category" [sourceName]="serviceName" [category]="category"
+        [from]="'notifications'" (changedConfigEvent)="getChangedNotificationConfig($event)"
         (formStatusEvent)="validConfigurationForm = $event">
       </app-configuration-group>
-      <hr *ngIf="notification != undefined" class="hr-text notification-hr" [attr.data-content]="'Rule - ' + notification.rule">
+      <hr *ngIf="notification != undefined" class="hr-text notification-hr"
+        [attr.data-content]="'Rule - ' + notification.rule">
       <div class="columns">
         <div class="column">
           <div class="field">
-            <app-configuration-group #ruleConfigView *ngIf="ruleCategory" [sourceName]="serviceName" [category]="ruleCategory"
-              [from]="'rule-modal'" (changedConfigEvent)="getChangedRuleConfig($event)"
+            <app-configuration-group #ruleConfigView *ngIf="ruleCategory" [sourceName]="serviceName"
+              [category]="ruleCategory" [from]="'rule-modal'" (changedConfigEvent)="getChangedRuleConfig($event)"
               (formStatusEvent)="validConfigurationForm = $event">
             </app-configuration-group>
           </div>
@@ -113,8 +116,8 @@
       <div class="columns">
         <div class="column">
           <div class="field">
-            <app-configuration-group #deliveryConfigView *ngIf="deliveryCategory"
-              [category]="deliveryCategory" [sourceName]="serviceName" [from]="'delivery-modal'"
+            <app-configuration-group #deliveryConfigView *ngIf="deliveryCategory" [category]="deliveryCategory"
+              [sourceName]="serviceName" [from]="'delivery-modal'"
               (changedConfigEvent)="getChangedDeliveryConfig($event)"
               (formStatusEvent)="validConfigurationForm = $event">
             </app-configuration-group>
@@ -126,7 +129,8 @@
           <div class="column">
             <div class="field is-grouped is-pulled-left">
               <p class="control">
-                <button class="button is-small is-link ml-4" (click)="saveNotificationConfiguration()" [appDisableUntilResponse]="reenableButton">Save</button>
+                <button class="button is-small is-link ml-4" (click)="saveNotificationConfiguration()"
+                  [appDisableUntilResponse]="reenableButton">Save</button>
               </p>
             </div>
           </div>
@@ -138,21 +142,23 @@
     </ng-container>
     <ng-container *ngIf="showReadings">
       <app-asset-tracker [service]="readingService" [isAlive]="isAlive" [reenableButton]="reenableButton"
-      (selectedAsset)="selectAsset($event)"
-      (reloadReadings)="getSouthservices()" (exportReading)="getAssetReadings(readingService)"></app-asset-tracker>
+        (selectedAsset)="selectAsset($event)" (reloadReadings)="getSouthservices()"
+        (exportReading)="getAssetReadings(readingService)"></app-asset-tracker>
     </ng-container>
   </app-quickview>
 </div>
 
 <app-confirmation-dialog id="delete-service-dialog" *ngIf="rolesService.hasEditPermissions()">
   <header class="modal-card-head">
     <span class="modal-card-title is-size-6">
-      {{ task && task?.execution == "task" ? "Delete Task": (from === 'notifications' ? 'Delete Instance' : 'Delete Service')}}
+      {{ task && task?.execution == "task" ? "Delete Task": (from === 'notifications' ? 'Delete Instance' :
+      'Delete Service')}}
     </span>
     <button class="delete" aria-label="close" (click)="closeModal('delete-service-dialog')"></button>
   </header>
   <section class="modal-card-body">
-    Deleting {{dialogServiceName}} {{ task && task?.execution == "task"? 'task': (from === 'notifications' ? 'instance' : 'service')}} cannot be undone. Continue?
+    Deleting {{dialogServiceName}} {{ task && task?.execution == "task"? 'task': (from === 'notifications' ? 'instance'
+    : 'service')}} cannot be undone. Continue?
   </section>
   <footer class="modal-card-foot">
     <button class="button is-small" (click)="closeModal('delete-service-dialog')">Cancel</button>
@@ -191,6 +197,8 @@
   </footer>
 </app-confirmation-dialog>
 
+<!--  Unsaved changes dialog  -->
+<app-unsaved-changes-dialog (discardChanges)="resetForm()"></app-unsaved-changes-dialog>
 <app-confirmation-dialog id="state-change-dialog">
   <header class="modal-card-head">
     <span class="modal-card-title is-size-6">{{btnText}} Instance</span>
@@ -201,6 +209,7 @@
   </section>
   <footer class="modal-card-foot">
     <button class="button is-small" (click)="closeModal('state-change-dialog')">Cancel</button>
-    <button class="button is-small" [ngClass]="{'is-danger': btnText === 'Disable', 'is-info': btnText === 'Enable'}" (click)="toggleState(btnText)">{{btnText}}</button>
+    <button class="button is-small" [ngClass]="{'is-danger': btnText === 'Disable', 'is-info': btnText === 'Enable'}"
+      (click)="toggleState(btnText)">{{btnText}}</button>
   </footer>
 </app-confirmation-dialog>

src/app/components/common/node-editor/node-editor.component.ts

@@ -10,7 +10,7 @@ import {
 import { AdditionalServicesUtils } from '../../core/developer/additional-services/additional-services-utils.service';
 import { catchError, delay, map, mergeMap, repeatWhen, skip, take, takeUntil, takeWhile } from 'rxjs/operators';
 import { Service } from '../../core/south/south-service';
-import { EMPTY, Subject, Subscription, forkJoin, interval, of } from 'rxjs';
+import { EMPTY, Observable, Subject, Subscription, forkJoin, interval, of } from 'rxjs';
 import { FlowEditorService } from './flow-editor.service';
 import { cloneDeep, isEmpty } from 'lodash';
 import { DialogService } from '../confirmation-dialog/dialog.service';
@@ -19,6 +19,7 @@ import { Notification } from '../../core/notifications/notification';
 import { NotificationServiceWarningComponent } from '../../core/notifications/notification-service-warning/notification-service-warning.component';
 import { ServiceConfigComponent } from '../../core/notifications/service-config/service-config.component';
 import Utils, { MAX_INT_SIZE, POLLING_INTERVAL } from '../../../utils';
+import { QuickviewComponent } from '../quickview/quickview.component';
 import { DocService } from '../../../services/doc.service';
 
 @Component({
@@ -45,7 +46,7 @@ export class NodeEditorComponent implements OnInit {
   private removeFilterSubscription: Subscription;
   private exportReadingSubscription: Subscription;
   private serviceDetailsSubscription: Subscription;
-  
+
   showPluginConfiguration: boolean = false;
   showFilterConfiguration: boolean = false;
   showLogs: boolean = false;
@@ -68,7 +69,7 @@ export class NodeEditorComponent implements OnInit {
   changedConfig: any;
   changedFilterConfig: any;
   pluginConfiguration;
-  
+
   filterPluginConfiguration;
   advancedConfiguration = [];
   public reenableButton = new EventEmitter<boolean>(false);
@@ -88,13 +89,15 @@ export class NodeEditorComponent implements OnInit {
   deliveryPluginChangedConfig: any;
   ruleConfiguration: any;
   deliveryConfiguration: any;
-  serviceInfo = {added: false, type: '', isEnabled: true, process: '', name: '', isInstalled: false, isAvailable: false};
+  serviceInfo = { added: false, type: '', isEnabled: true, process: '', name: '', isInstalled: false, isAvailable: false };
   btnText = '';
 
   taskSchedule = { id: '', name: '', exclusive: false, repeatTime: '', repeatDays: 0 };
   selectedAsset = '';
   MAX_RANGE = MAX_INT_SIZE / 2;
 
+  @ViewChild('quickView') private quickView: QuickviewComponent;
+
   constructor(public injector: Injector,
     private route: ActivatedRoute,
     private filterService: FilterService,
@@ -150,25 +153,47 @@ export class NodeEditorComponent implements OnInit {
       this.flowEditorService.canvasClick.next({ canvasClicked: true, connectionId: this.selectedConnectionId });
     }
   }
+
+  canDeactivate(): Observable<boolean> | boolean {
+    return this.dialogService.confirm({ id: 'unsaved-changes-dialog', changeExist: this.changeExist() });
+  }
+
+  closeRightDrawer() {
+    // this.dialogService.confirm({ id: 'unsaved-changes-dialog', changeExist: this.changeExist() });
+    this.canDeactivate()
+    if (isEmpty(this.changedConfig)) {
+      this.quickView.close();
+    }
+  }
+
+  changeExist(): boolean {
+    return !isEmpty(this.changedConfig) || !isEmpty(this.changedFilterConfig)
+  }
+
+  resetForm() {
+    this.changedConfig = {};
+    this.closeRightDrawer();
+  }
+
   ngOnInit(): void {
     this.subscription = this.flowEditorService.showItemsInQuickview.pipe(skip(1)).subscribe(data => {
       if (this.from === 'notifications') {
         this.showNotificationConfiguration = data.showNotificationConfiguration ? true : false;
-        this.showLogs = data.showLogs ? true: false;
+        this.showLogs = data.showLogs ? true : false;
         this.notification = data.notification;
         this.serviceName = data.notification.name;
         if (this.showNotificationConfiguration) {
           this.getCategory();
           this.getRuleConfiguration();
           this.getDeliveryConfiguration();
-        }  
+        }
         return;
       }
-      this.showPluginConfiguration = data.showPluginConfiguration ? true: false;
-      this.showFilterConfiguration = data.showFilterConfiguration ? true: false;
-      this.showLogs = data.showLogs ? true: false;
-      this.showTaskSchedule = data.showTaskSchedule ? true: false;
-      this.showReadings = data.showReadings ? true: false;
+      this.showPluginConfiguration = data.showPluginConfiguration ? true : false;
+      this.showFilterConfiguration = data.showFilterConfiguration ? true : false;
+      this.showLogs = data.showLogs ? true : false;
+      this.showTaskSchedule = data.showTaskSchedule ? true : false;
+      this.showReadings = data.showReadings ? true : false;
       this.serviceName = data.serviceName;
       if (this.showPluginConfiguration || this.showNotificationConfiguration) {
         this.getCategory();
@@ -227,7 +252,7 @@ export class NodeEditorComponent implements OnInit {
       } else {
         this.openModal('state-change-dialog');
         this.btnText = data.buttonText;
-      }    
+      }
     });
 
     this.exportReadingSubscription = this.flowEditorService.exportReading.pipe(skip(1)).subscribe(data => {
@@ -249,14 +274,14 @@ export class NodeEditorComponent implements OnInit {
       .subscribe(() => {
         if (this.from == 'north') {
           this.getNorthTasks();
-        } 
+        }
         if (this.from == 'south') {
           this.getSouthservices();
         }
       });
-      if (this.from == 'notifications') {
-        this.getNotifications();
-      }
+    if (this.from == 'notifications') {
+      this.getNotifications();
+    }
     this.removeFilterSubscription = this.flowEditorService.removeFilter.pipe(skip(1)).subscribe(data => {
       if (data) {
         removeNode(data.id);
@@ -319,11 +344,11 @@ export class NodeEditorComponent implements OnInit {
                   data.task = this.task;
                 }
                 if (r.services) {
-                    const services = r.services as Service[];
-                    this.services = services;
-                    this.service = services.find(service => (service.name == this.source));
-                    data.services = services;
-                    data.service = this.service;
+                  const services = r.services as Service[];
+                  this.services = services;
+                  this.service = services.find(service => (service.name == this.source));
+                  data.services = services;
+                  data.service = this.service;
                 }
                 if (r.notifications) {
                   this.serviceDetailsSubscription = this.sharedService.installedServicePkgs.subscribe(service => {
@@ -354,7 +379,7 @@ export class NodeEditorComponent implements OnInit {
 
                       data.isServiceEnabled = this.serviceInfo.isEnabled;
                       createEditor(el, this.injector, this.flowEditorService, this.rolesService, data);
-                    }       
+                    }
                   });
                 }
                 if (r.result) {
@@ -379,13 +404,13 @@ export class NodeEditorComponent implements OnInit {
             else {
               if (this.from !== 'notifications') {
                 createEditor(el, this.injector, this.flowEditorService, this.rolesService, data);
-              }       
+              }
             }
-          });       
+          });
       }
     }
   }
-  
+
   getChangedNotificationConfig(changedConfiguration: any) {
     this.notificationChangedConfig = this.configurationControlService.getChangedConfiguration(changedConfiguration, this.pluginConfiguration);
   }
@@ -513,7 +538,7 @@ export class NodeEditorComponent implements OnInit {
           if (this.from === 'notifications') {
             data.channel['readonly'] = 'true';
             data.rule['readonly'] = 'true';
-          }        
+          }
           this.category = { name: this.serviceName, config: data };
           this.pluginConfiguration = cloneDeep({ name: this.serviceName, config: data });
         },
@@ -910,7 +935,7 @@ export class NodeEditorComponent implements OnInit {
   }
 
   deleteService() {
-    if(this.from === 'notifications') {
+    if (this.from === 'notifications') {
       this.deleteNotification();
       return;
     }
@@ -1074,9 +1099,9 @@ export class NodeEditorComponent implements OnInit {
   /**
      * Open Configure Service modal
      */
-   openServiceConfigureModal() {
+  openServiceConfigureModal() {
     this.serviceInfo.process = 'notification';
-    this.router.navigate(['/developer/options/additional-services/config'], { state: { ...this.serviceInfo }});
+    this.router.navigate(['/developer/options/additional-services/config'], { state: { ...this.serviceInfo } });
   }
 
   ngOnDestroy() {

src/app/components/common/quickview/quickview.component.html

@@ -1,8 +1,8 @@
 <div id="quickviewDefault" class="quickview" #quickView>
-    <div class="quickview-body">
-        <div class="quickview-block" #quickViewBlock>
-            <ng-content></ng-content>
-        </div>
-        <span class="delete mt-5 mr-2" data-dismiss="quickview"></span>
+  <div class="quickview-body">
+    <div class="quickview-block" #quickViewBlock>
+      <ng-content></ng-content>
     </div>
+    <span class="delete mt-5 mr-2" (click)="dismiss()"></span>
+  </div>
 </div>