Add confirmation dialog when leaving logbook/:id

Should close: #131

scilog/src/app/app-routing.module.ts

@@ -7,42 +7,40 @@ import { LogbookItemComponent } from './logbook/widgets/logbook-item/logbook-ite
 import { ChatComponent } from './logbook/widgets/chat/chat.component';
 import { LoginComponent } from './login/login.component';
 import { OverviewComponent } from './overview/overview.component';
-import {LogbookComponent} from './logbook/logbook.component';
+import { LogbookComponent } from './logbook/logbook.component';
 import { ChartComponent } from './logbook/widgets/chart/chart.component';
 import { DashboardItemComponent } from './logbook/dashboard/dashboard-item/dashboard-item.component';
 import { SnippetViewerComponent } from './logbook/widgets/snippet-viewer/snippet-viewer.component';
-import { SettingsComponent } from '@shared/settings/settings.component';
 import { ViewSettingsComponent } from '@shared/settings/view-settings/view-settings.component';
 import { ProfileSettingsComponent } from '@shared/settings/profile-settings/profile-settings.component';
 import { DownloadComponent } from '@shared/download/download.component';
+import { NavigationGuardService } from './logbook/core/navigation-guard-service';
 
 const routes: Routes = [
   { path: '', redirectTo: '/login', pathMatch: 'full' },
   { path: 'login', component: LoginComponent },
   { path: 'overview', component: OverviewComponent },
-  { path: 'download/:fileId', component: DownloadComponent},
+  { path: 'download/:fileId', component: DownloadComponent },
   { path: 'logbooks/:logbookId', component: LogbookComponent,
-      children:[
-        { path: 'dashboard', component: DashboardComponent},
-        { path: 'todos', component: TodosComponent},
-        { path: 'logbook', component: LogbookItemComponent},
-        { path: 'snippetViewer', component: SnippetViewerComponent},
-        { path: 'chat', component: ChatComponent},
-        { path: 'graph', component: ChartComponent},
-        { path: 'dashboard-item', component: DashboardItemComponent},
+      children: [
+        { path: 'dashboard', component: DashboardComponent, canDeactivate: [NavigationGuardService] },
+        { path: 'todos', component: TodosComponent },
+        { path: 'logbook', component: LogbookItemComponent },
+        { path: 'snippetViewer', component: SnippetViewerComponent },
+        { path: 'chat', component: ChatComponent },
+        { path: 'graph', component: ChartComponent },
+        { path: 'dashboard-item', component: DashboardItemComponent, canDeactivate: [NavigationGuardService] },
         { path: '**', redirectTo: '/overview', pathMatch: 'full' },
       ]},
-  { path: 'viewSettings', component: ViewSettingsComponent, outlet:'settings'},
-  { path: 'profileSettings', component: ProfileSettingsComponent, outlet:'settings'},
+  { path: 'viewSettings', component: ViewSettingsComponent, outlet: 'settings' },
+  { path: 'profileSettings', component: ProfileSettingsComponent, outlet: 'settings' },
   { path: '**', redirectTo: '/overview', pathMatch: 'full' },
 
-
-
 ];
 
 @NgModule({
-  imports: [ RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' }) ],
-  exports: [ RouterModule ]
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy', canceledNavigationResolution: 'computed' })],
+  exports: [RouterModule]
 })
-export class AppRoutingModule {}
+export class AppRoutingModule { }
 

scilog/src/app/app.module.ts

@@ -82,6 +82,7 @@ import { DownloadComponent } from '@shared/download/download.component';
 import { SearchComponent } from '@shared/search/search.component';
 import { SearchWindowComponent } from '@shared/search-window/search-window.component';
 import { AppConfigService } from "./app-config.service";
+import { NavigationGuardService } from './logbook/core/navigation-guard-service';
 
 const appConfigInitializerFn = (appConfig: AppConfigService) => {
   return () => appConfig.loadAppConfig();
@@ -171,6 +172,7 @@ const appConfigInitializerFn = (appConfig: AppConfigService) => {
     ],
     providers: [
         AppConfigService,
+        NavigationGuardService,
         {
             provide: APP_INITIALIZER,
             useFactory: appConfigInitializerFn,

scilog/src/app/logbook/core/navigation-guard-service.spec.ts

@@ -0,0 +1,33 @@
+import { TestBed } from '@angular/core/testing';
+
+import { NavigationGuardService } from './navigation-guard-service';
+import { LogbookInfoService } from 'src/app/core/logbook-info.service';
+
+describe('CanDeactivateGuard', () => {
+  let service: NavigationGuardService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [
+        NavigationGuardService,
+        { provide: LogbookInfoService, useValue: { logbookInfo: { id: 'id' } } }
+      ]
+    });
+    service = TestBed.inject(NavigationGuardService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should return true on back', () => {
+    spyOn(window, 'confirm').and.returnValue(true);
+    expect(service.canDeactivate({canDeactivate: () => false})).toBeTrue();
+  });
+
+  it('should return false on back', () => {
+    spyOn(window, 'confirm').and.returnValue(false);
+    expect(service.canDeactivate({canDeactivate: () => false})).toBeFalse();
+  });
+
+});

scilog/src/app/logbook/core/navigation-guard-service.ts

@@ -0,0 +1,15 @@
+import { CanDeactivate } from '@angular/router';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+export interface ComponentCanDeactivate {
+  canDeactivate: () => boolean | Observable<boolean>;
+}
+
+@Injectable()
+export class NavigationGuardService implements CanDeactivate<ComponentCanDeactivate> {
+
+  canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
+    return component.canDeactivate() || confirm('You are about to leave the page. Do you want to continue?');
+  }
+}

scilog/src/app/logbook/dashboard/dashboard-item/dashboard-item.component.ts

@@ -1,21 +1,20 @@
-import { Component, OnInit, Input, Output, EventEmitter, ViewChild, ElementRef } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, ViewChild, HostListener } from '@angular/core';
 import { MatDialogConfig, MatDialog } from '@angular/material/dialog';
 import { WidgetPreferencesComponent } from '../../widgets/widget-preferences/widget-preferences.component';
 import { LogbookItemComponent } from '../../widgets/logbook-item/logbook-item.component';
 import { ActivatedRoute } from '@angular/router';
 import { ViewsService } from '@shared/views.service';
-import { take } from 'rxjs/operators';
 import { Subscription } from 'rxjs';
-import { LogbookItemDataService } from '@shared/remote-data.service';
 import { ExportDialogComponent } from './export-dialog/export-dialog.component';
 import { WidgetItemConfig } from '@model/config';
+import { ComponentCanDeactivate } from '../../core/navigation-guard-service';
 
 @Component({
   selector: 'dashboard-item',
   templateUrl: './dashboard-item.component.html',
   styleUrls: ['./dashboard-item.component.scss']
 })
-export class DashboardItemComponent implements OnInit {
+export class DashboardItemComponent implements OnInit, ComponentCanDeactivate {
 
   @Input()
   configIndex: number;
@@ -102,4 +101,11 @@ export class DashboardItemComponent implements OnInit {
     this.subscriptions.forEach(
       (subscription) => subscription.unsubscribe());
   }
+
+  @HostListener('window:beforeunload')
+  canDeactivate(): boolean {
+    if (false) return true;
+    return false;
+  }
+
 }

scilog/src/app/logbook/dashboard/dashboard.component.ts

@@ -1,19 +1,19 @@
-import { Component, OnInit } from '@angular/core';
-import { CompactType, DisplayGrid, GridsterConfig, GridsterItem, GridsterItemComponent, GridsterPush, GridType } from 'angular-gridster2';
-import { MatOptionSelectionChange } from '@angular/material/core';
+import { Component, HostListener, OnInit } from '@angular/core';
+import { CompactType, DisplayGrid, GridsterConfig, GridsterItemComponent, GridType } from 'angular-gridster2';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Subscription } from 'rxjs';
 import { ViewsService } from '@shared/views.service';
 import { WidgetConfig } from '@model/config';
 import { MediaObserver } from '@angular/flex-layout';
 import { Hotkeys } from '@shared/hotkeys.service';
+import { ComponentCanDeactivate } from '../core/navigation-guard-service';
 
 @Component({
   selector: 'dashboard',
   templateUrl: './dashboard.component.html',
   styleUrls: ['./dashboard.component.scss']
 })
-export class DashboardComponent implements OnInit {
+export class DashboardComponent implements OnInit, ComponentCanDeactivate {
 
 
   urlPath: object;
@@ -226,5 +226,10 @@ export class DashboardComponent implements OnInit {
       (subscription) => subscription.unsubscribe());
   }
 
+  @HostListener('window:beforeunload')
+  canDeactivate(): boolean {
+    if (false) return true;
+    return false;
+  }
 
 }

scilog/src/app/logbook/logbook.component.spec.ts

@@ -1,6 +1,5 @@
 import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
-import { Router } from '@angular/router';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppConfigService } from '../app-config.service';
 
@@ -31,15 +30,4 @@ describe('LogbookComponent', () => {
     expect(component).toBeTruthy();
   });
 
-  it('should unset the logbook', () => {
-    const popStateEvent = new PopStateEvent('popstate');
-    Object.defineProperty(
-      popStateEvent, 
-      'target', 
-      {writable: false, value: {location: {pathname: '/overview'}}}
-    );
-    window.dispatchEvent(popStateEvent);
-    expect(component['logbookInfo'].logbookInfo).toBeNull();
-  });
-
 });

scilog/src/app/logbook/logbook.component.ts

@@ -1,4 +1,4 @@
-import { Component, OnInit, HostListener } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { ChangeStreamService } from '@shared/change-stream.service';
 import { ChangeStreamNotification } from '@shared/changestreamnotification.model'
 import { MediaObserver } from '@angular/flex-layout';
@@ -149,10 +149,4 @@ export class LogbookComponent implements OnInit {
       (subscription) => subscription.unsubscribe());
   }
 
-  @HostListener('window:popstate', ['$event'])
-  onPopState(event: Event & {target: Window}) {
-    if (event.target.location.pathname === '/overview')
-      this.logbookInfo.logbookInfo = null;
-  }
-
 }

scilog/src/app/overview/overview.component.ts

@@ -8,7 +8,6 @@ import { AddCollectionComponent } from './add-collection/add-collection.componen
 import { AddLogbookComponent } from './add-logbook/add-logbook.component';
 import { LogbookInfoService } from '@shared/logbook-info.service';
 import { CookiesService } from '@shared/cookies.service';
-import { Router } from '@angular/router';
 import { LogbookDataService } from '@shared/remote-data.service';
 import { LogbookIconScrollService } from './logbook-icon-scroll-service.service';
 import { debounceTime } from 'rxjs/operators';
@@ -47,12 +46,12 @@ export class OverviewComponent implements OnInit {
     public dialog: MatDialog,
     private logbookInfo: LogbookInfoService,
     private cookie: CookiesService,
-    private router: Router,
     private dataService: LogbookDataService) {
 
   }
 
   ngOnInit(): void {
+    this.logbookInfo.logbookInfo = null;
     console.log(this.logbookInfo.logbookInfo);
     this.subscriptions.push(this.userPreferences.currentCollectionsConfig.subscribe(data => {
       console.log("collections:", data);