Settings navigation warning dialog

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

@@ -11,6 +11,7 @@ import { SettingsComponent } from './components/manage/settings/settings.compone
 import { TagListComponent } from './components/manage/tag-list/tag-list.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { SearchComponent } from './components/search/search.component';
+import { FormDirtyGuard } from './guards/dirty-form.guard';
 
 const routes: Routes = [
   {path: '', redirectTo: 'dashboard', pathMatch: 'full'},
@@ -25,7 +26,7 @@ const routes: Routes = [
     {path: 'documenttypes', component: DocumentTypeListComponent },
     {path: 'correspondents', component: CorrespondentListComponent },
     {path: 'logs', component: LogsComponent },
-    {path: 'settings', component: SettingsComponent },
+    {path: 'settings', component: SettingsComponent, canDeactivate: [FormDirtyGuard] },
   ]},
 
   {path: '404', component: NotFoundComponent},

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html

@@ -1,6 +1,6 @@
     <div class="modal-header">
       <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
-      <button type="button" class="close" aria-label="Close" (click)="cancelClicked()">
+      <button type="button" class="close" aria-label="Close" (click)="cancel()">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
@@ -9,8 +9,8 @@
       <p *ngIf="message">{{message}}</p>
     </div>
     <div class="modal-footer">
-      <button type="button" class="btn btn-outline-dark" (click)="cancelClicked()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
-      <button type="button" class="btn" [class]="btnClass" (click)="confirmClicked.emit()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+      <button type="button" class="btn btn-outline-dark" (click)="cancel()" [disabled]="!buttonsEnabled" i18n>Cancel</button>
+      <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
         {{btnCaption}}
         <span *ngIf="!confirmButtonEnabled"> ({{seconds}})</span>
       </button>

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -1,5 +1,6 @@
 import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
 import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
+import { Subject } from 'rxjs';
 
 @Component({
   selector: 'app-confirm-dialog',
@@ -8,8 +9,6 @@ import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';
 })
 export class ConfirmDialogComponent implements OnInit {
 
-  constructor(public activeModal: NgbActiveModal) { }
-
   @Output()
   public confirmClicked = new EventEmitter()
 
@@ -34,6 +33,12 @@ export class ConfirmDialogComponent implements OnInit {
   confirmButtonEnabled = true
   seconds = 0
 
+  subject: Subject<boolean>
+
+  constructor(public activeModal: NgbActiveModal) {
+    this.confirmClicked.asObservable()
+  }
+
   delayConfirm(seconds: number) {
     this.confirmButtonEnabled = false
     this.seconds = seconds
@@ -49,7 +54,15 @@ export class ConfirmDialogComponent implements OnInit {
   ngOnInit(): void {
   }
 
-  cancelClicked() {
+  cancel() {
+    this.subject?.next(false)
+    this.subject?.complete()
     this.activeModal.close()
   }
+
+  confirm() {
+    this.subject?.next(true)
+    this.subject?.complete()
+    this.confirmClicked.emit()
+  }
 }

src-ui/src/app/components/manage/settings/settings.component.ts

@@ -32,9 +32,9 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
 
   savedViews: PaperlessSavedView[]
 
-  store: BehaviorSubject<any>;
-  storeSub: Subscription;
-  isDirty$: Observable<boolean>;
+  store: BehaviorSubject<any>
+  storeSub: Subscription
+  isDirty$: Observable<boolean>
 
   get computedDateLocale(): string {
     return this.settingsForm.value.dateLocale || this.settingsForm.value.displayLanguage
@@ -82,10 +82,10 @@ export class SettingsComponent implements OnInit, OnDestroy, DirtyComponent {
 
       this.storeSub = this.store.asObservable().subscribe(state => {
         this.settingsForm.patchValue(state, { emitEvent: false })
-      });
+      })
 
       // Initialize dirtyCheck
-      this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable());
+      this.isDirty$ = dirtyCheck(this.settingsForm, this.store.asObservable())
     })
   }
 

src-ui/src/app/guards/dirty-form.guard.ts

@@ -0,0 +1,29 @@
+import { Injectable } from '@angular/core';
+import { DirtyCheckGuard } from '@ngneat/dirty-check-forms';
+import { Observable, Subject } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
+import { ConfirmDialogComponent } from 'src/app/components/common/confirm-dialog/confirm-dialog.component';
+
+@Injectable({ providedIn: 'root' })
+export class FormDirtyGuard extends DirtyCheckGuard {
+  constructor(private modalService: NgbModal) {
+    super();
+  }
+
+  confirmChanges(): Observable<boolean> {
+    let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'})
+    modal.componentInstance.title = $localize`Confirm`
+    modal.componentInstance.messageBold = $localize`You have unsaved changes.`
+    modal.componentInstance.message = $localize`Are you sure you want to leave?`
+    modal.componentInstance.btnClass = "btn-warning"
+    modal.componentInstance.btnCaption = $localize`Ok`
+    modal.componentInstance.confirmClicked.subscribe(() => {
+      modal.componentInstance.buttonsEnabled = false
+      modal.close()
+    })
+    const subject = new Subject<boolean>()
+    modal.componentInstance.subject = subject
+    return subject.asObservable()
+  }
+}