Settings navigation warning dialog

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()
 
@@ -30,10 +29,16 @@ export class ConfirmDialogComponent implements OnInit {
 
   @Input()
   buttonsEnabled = true
-  
+
   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())
     })
   }