[incubator-streampipes] branch dev updated: [STREAMPIPES-228] Add confirm dialog before leaving dashboard view

[ri...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git


The following commit(s) were added to refs/heads/dev by this push:
     new 744c652a3 [STREAMPIPES-228] Add confirm dialog before leaving dashboard view
744c652a3 is described below

commit 744c652a3057fd557262d38b971fb9bb6eb65903
Author: Dominik Riemer <do...@gmail.com>
AuthorDate: Mon Aug 8 11:06:40 2022 +0200

    [STREAMPIPES-228] Add confirm dialog before leaving dashboard view
---
 .../components/panel/dashboard-panel.component.ts  | 33 ++++++++++++++++++--
 .../dashboard/dashboard.can-deactivate.guard.ts    | 35 ++++++++++++++++++++++
 ui/src/app/dashboard/dashboard.module.ts           |  5 +++-
 3 files changed, 69 insertions(+), 4 deletions(-)

diff --git a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
index 3ae5cb356..b244e59ca 100644
--- a/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
+++ b/ui/src/app/dashboard/components/panel/dashboard-panel.component.ts
@@ -18,14 +18,16 @@
 
 import { Component, EventEmitter, OnInit, Output } from '@angular/core';
 import { ClientDashboardItem, Dashboard, DashboardService, DashboardWidgetModel } from '@streampipes/platform-services';
-import { forkJoin, Observable, Subscription } from 'rxjs';
+import { forkJoin, Observable, of, Subscription } from 'rxjs';
 import { AddVisualizationDialogComponent } from '../../dialogs/add-widget/add-visualization-dialog.component';
 import { RefreshDashboardService } from '../../services/refresh-dashboard.service';
-import { DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui';
-import { ActivatedRoute } from '@angular/router';
+import { ConfirmDialogComponent, DialogService, PanelType, SpBreadcrumbService } from '@streampipes/shared-ui';
+import { ActivatedRoute, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
 import { UserPrivilege } from '../../../_enums/user-privilege.enum';
 import { AuthService } from '../../../services/auth.service';
 import { SpDashboardRoutes } from '../../dashboard.routes';
+import { map } from 'rxjs/operators';
+import { MatDialog } from '@angular/material/dialog';
 
 @Component({
     selector: 'dashboard-panel',
@@ -49,6 +51,7 @@ export class DashboardPanelComponent implements OnInit {
 
     constructor(private dashboardService: DashboardService,
                 private dialogService: DialogService,
+                private dialog: MatDialog,
                 private refreshDashboardService: RefreshDashboardService,
                 private route: ActivatedRoute,
                 private authService: AuthService,
@@ -155,4 +158,28 @@ export class DashboardPanelComponent implements OnInit {
             this.dashboardService.deleteWidget(widgetId).subscribe();
         });
     }
+
+    confirmLeaveDashboard(route: ActivatedRouteSnapshot,
+                          state: RouterStateSnapshot): Observable<boolean> {
+        if (this.editMode) {
+            const dialogRef = this.dialog.open(ConfirmDialogComponent, {
+                width: '500px',
+                data: {
+                    'title': 'Save changes?',
+                    'subtitle': 'Update all changes to dashboard widgets or discard current changes.',
+                    'cancelTitle': 'Discard changes',
+                    'okTitle': 'Update',
+                    'confirmAndCancel': true
+                },
+            });
+            return dialogRef.afterClosed().pipe(map(shouldUpdate => {
+                if (shouldUpdate) {
+                    this.updateDashboardAndCloseEditMode();
+                }
+                return true;
+            }));
+        } else {
+            return of(true);
+        }
+    }
 }
diff --git a/ui/src/app/dashboard/dashboard.can-deactivate.guard.ts b/ui/src/app/dashboard/dashboard.can-deactivate.guard.ts
new file mode 100644
index 000000000..b720de508
--- /dev/null
+++ b/ui/src/app/dashboard/dashboard.can-deactivate.guard.ts
@@ -0,0 +1,35 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+import { Injectable } from '@angular/core';
+import { ActivatedRouteSnapshot, CanDeactivate, RouterStateSnapshot } from '@angular/router';
+import { Observable } from 'rxjs';
+import { DashboardPanelComponent } from './components/panel/dashboard-panel.component';
+
+@Injectable({providedIn: 'root'})
+export class DashboardPanelCanDeactivateGuard implements CanDeactivate<DashboardPanelComponent> {
+
+  canDeactivate(
+    component: DashboardPanelComponent,
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot
+  ): Observable<boolean> | boolean {
+
+    return component.confirmLeaveDashboard(route, state);
+  }
+}
diff --git a/ui/src/app/dashboard/dashboard.module.ts b/ui/src/app/dashboard/dashboard.module.ts
index d77c77677..a736ce936 100644
--- a/ui/src/app/dashboard/dashboard.module.ts
+++ b/ui/src/app/dashboard/dashboard.module.ts
@@ -61,6 +61,8 @@ import { CustomMaterialModule } from '../CustomMaterial/custom-material.module';
 import { ServicesModule } from '../services/services.module';
 import { RouterModule } from '@angular/router';
 import { SharedUiModule } from '@streampipes/shared-ui';
+import { DataExplorerPanelCanDeactivateGuard } from '../data-explorer/data-explorer-panel.can-deactivate.guard';
+import { DashboardPanelCanDeactivateGuard } from './dashboard.can-deactivate.guard';
 
 @NgModule({
   imports: [
@@ -97,7 +99,8 @@ import { SharedUiModule } from '@streampipes/shared-ui';
           },
           {
             path: ':id',
-            component: DashboardPanelComponent
+            component: DashboardPanelComponent,
+            canDeactivate: [DashboardPanelCanDeactivateGuard]
           }
         ]
       }