UI: Display confirm on exit when editing dashboard.

ui-ngx/src/app/modules/dashboard/dashboard-pages.routing.module.ts

@@ -25,6 +25,7 @@ import { DashboardUtilsService } from '@core/services/dashboard-utils.service';
 import { DashboardResolver } from '@app/modules/home/pages/dashboard/dashboard-routing.module';
 import { UtilsService } from '@core/services/utils.service';
 import { Widget } from '@app/shared/models/widget.models';
+import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 
 @Injectable()
 export class WidgetEditorDashboardResolver implements Resolve<Dashboard> {
@@ -59,6 +60,7 @@ const routes: Routes = [
   {
     path: 'dashboard/:dashboardId',
     component: DashboardPageComponent,
+    canDeactivate: [ConfirmOnExitGuard],
     data: {
       breadcrumb: {
         skip: true
@@ -75,6 +77,7 @@ const routes: Routes = [
   {
     path: 'widget-editor',
     component: DashboardPageComponent,
+    canDeactivate: [ConfirmOnExitGuard],
     data: {
       breadcrumb: {
         skip: true

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html

@@ -115,7 +115,7 @@
                     matTooltip="{{'action.save' | translate}}"
                     matTooltipPosition="below">
               <mat-icon>done</mat-icon></button>
-            <button fxHide.lt-lg mat-button (click)="saveDashboard()">
+            <button fxHide.lt-lg mat-stroked-button (click)="saveDashboard()">
               <mat-icon>done</mat-icon>{{ 'action.save' | translate }}</button>
             <button fxHide.gt-md mat-icon-button (click)="toggleDashboardEditMode()"
                     matTooltip="{{'action.cancel' | translate}}"

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts

@@ -150,6 +150,7 @@ import { tap } from 'rxjs/operators';
 import { LayoutFixedSize, LayoutWidthType } from '@home/components/dashboard-page/layout/layout.models';
 import { TbPopoverComponent } from '@shared/components/popover.component';
 import { ResizeObserver } from '@juggle/resize-observer';
+import { HasDirtyFlag } from '@core/guards/confirm-on-exit.guard';
 
 // @dynamic
 @Component({
@@ -159,7 +160,15 @@ import { ResizeObserver } from '@juggle/resize-observer';
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class DashboardPageComponent extends PageComponent implements IDashboardController, OnInit, AfterViewInit, OnDestroy {
+export class DashboardPageComponent extends PageComponent implements IDashboardController, HasDirtyFlag, OnInit, AfterViewInit, OnDestroy {
+
+  get isDirty(): boolean {
+    return this.isEdit;
+  }
+
+  set isDirty(value: boolean) {
+
+  }
 
   authState: AuthState = getCurrentAuthState(this.store);
 

ui-ngx/src/app/modules/home/pages/customer/customer-routing.module.ts

@@ -251,6 +251,7 @@ const routes: Routes = [
           {
             path: ':dashboardId',
             component: DashboardPageComponent,
+            canDeactivate: [ConfirmOnExitGuard],
             data: {
               breadcrumb: {
                 labelFunction: dashboardBreadcumbLabelFunction,

ui-ngx/src/app/modules/home/pages/dashboard/dashboard-routing.module.ts

@@ -32,6 +32,7 @@ import { UserDashboardAction } from '@shared/models/user-settings.models';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { getCurrentAuthUser } from '@core/auth/auth.selectors';
+import { ConfirmOnExitGuard } from '@core/guards/confirm-on-exit.guard';
 
 @Injectable()
 export class DashboardResolver implements Resolve<Dashboard> {
@@ -85,6 +86,7 @@ const routes: Routes = [
       {
         path: ':dashboardId',
         component: DashboardPageComponent,
+        canDeactivate: [ConfirmOnExitGuard],
         data: {
           breadcrumb: {
             labelFunction: dashboardBreadcumbLabelFunction,

ui-ngx/src/app/modules/home/pages/edge/edge-routing.module.ts

@@ -241,6 +241,7 @@ const routes: Routes = [
               {
                 path: ':dashboardId',
                 component: DashboardPageComponent,
+                canDeactivate: [ConfirmOnExitGuard],
                 data: {
                   breadcrumb: {
                     labelFunction: dashboardBreadcumbLabelFunction,