diff --git a/src-ui/src/app/app-routing.module.ts b/src-ui/src/app/app-routing.module.ts index c62357c5d..4dad24c51 100644 --- a/src-ui/src/app/app-routing.module.ts +++ b/src-ui/src/app/app-routing.module.ts @@ -15,6 +15,7 @@ import { DirtyFormGuard } from './guards/dirty-form.guard' import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component' import { TasksComponent } from './components/manage/tasks/tasks.component' import { DirtyDocGuard } from './guards/dirty-doc.guard' +import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard' const routes: Routes = [ { path: '', redirectTo: 'dashboard', pathMatch: 'full' }, @@ -24,8 +25,16 @@ const routes: Routes = [ canDeactivate: [DirtyDocGuard], children: [ { path: 'dashboard', component: DashboardComponent }, - { path: 'documents', component: DocumentListComponent }, - { path: 'view/:id', component: DocumentListComponent }, + { + path: 'documents', + component: DocumentListComponent, + canDeactivate: [DirtySavedViewGuard], + }, + { + path: 'view/:id', + component: DocumentListComponent, + canDeactivate: [DirtySavedViewGuard], + }, { path: 'documents/:id', component: DocumentDetailComponent }, { path: 'asn/:id', component: DocumentAsnComponent }, { path: 'tags', component: TagListComponent }, diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 02fd8ea66..29c85341b 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -69,6 +69,7 @@ import { ColorComponent } from './components/common/input/color/color.component' import { DocumentAsnComponent } from './components/document-asn/document-asn.component' import { DocumentCommentsComponent } from './components/document-comments/document-comments.component' import { DirtyDocGuard } from './guards/dirty-doc.guard' +import { DirtySavedViewGuard } from './guards/dirty-saved-view.guard' import { StoragePathListComponent } from './components/manage/storage-path-list/storage-path-list.component' import { StoragePathEditDialogComponent } from './components/common/edit-dialog/storage-path-edit-dialog/storage-path-edit-dialog.component' import { SettingsService } from './services/settings.service' @@ -215,6 +216,7 @@ function initializeApp(settings: SettingsService) { { provide: NgbDateAdapter, useClass: ISODateAdapter }, { provide: NgbDateParserFormatter, useClass: LocalizedDateParserFormatter }, DirtyDocGuard, + DirtySavedViewGuard, ], bootstrap: [AppComponent], }) diff --git a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html index 92e27e370..290581a47 100644 --- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html +++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html @@ -16,4 +16,7 @@ + diff --git a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts index ddf0bfd7c..59d84bbe8 100644 --- a/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts +++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts @@ -13,6 +13,9 @@ export class ConfirmDialogComponent { @Output() public confirmClicked = new EventEmitter() + @Output() + public alternativeClicked = new EventEmitter() + @Input() title = $localize`Confirmation` @@ -28,14 +31,22 @@ export class ConfirmDialogComponent { @Input() btnCaption = $localize`Confirm` + @Input() + alternativeBtnClass = 'btn-secondary' + + @Input() + alternativeBtnCaption + @Input() buttonsEnabled = true confirmButtonEnabled = true + alternativeButtonEnabled = true seconds = 0 secondsTotal = 0 confirmSubject: Subject + alternativeSubject: Subject delayConfirm(seconds: number) { const refreshInterval = 0.15 // s @@ -68,4 +79,10 @@ export class ConfirmDialogComponent { this.confirmSubject?.next(true) this.confirmSubject?.complete() } + + alternative() { + this.alternativeClicked.emit() + this.alternativeSubject?.next(true) + this.alternativeSubject?.complete() + } } diff --git a/src-ui/src/app/components/document-list/document-list.component.html b/src-ui/src/app/components/document-list/document-list.component.html index 5cec94919..9357813f6 100644 --- a/src-ui/src/app/components/document-list/document-list.component.html +++ b/src-ui/src/app/components/document-list/document-list.component.html @@ -60,7 +60,12 @@
- +
diff --git a/src-ui/src/app/guards/dirty-saved-view.guard.ts b/src-ui/src/app/guards/dirty-saved-view.guard.ts new file mode 100644 index 000000000..0044a2e78 --- /dev/null +++ b/src-ui/src/app/guards/dirty-saved-view.guard.ts @@ -0,0 +1,51 @@ +import { CanDeactivate } from '@angular/router' +import { Injectable } from '@angular/core' +import { first, Observable, Subject } from 'rxjs' +import { DocumentListComponent } from '../components/document-list/document-list.component' +import { NgbModal } from '@ng-bootstrap/ng-bootstrap' +import { ConfirmDialogComponent } from '../components/common/confirm-dialog/confirm-dialog.component' + +@Injectable() +export class DirtySavedViewGuard + implements CanDeactivate +{ + constructor(private modalService: NgbModal) {} + + canDeactivate( + component: DocumentListComponent + ): boolean | Observable { + return component.savedViewIsModified ? this.warn(component) : true + } + + warn(component: DocumentListComponent) { + let modal = this.modalService.open(ConfirmDialogComponent, { + backdrop: 'static', + }) + modal.componentInstance.title = $localize`Unsaved Changes` + modal.componentInstance.messageBold = + $localize`You have unsaved changes to the saved view` + + ' "' + + component.getTitle() + ;('".') + modal.componentInstance.message = $localize`Are you sure you want to close this saved view?` + modal.componentInstance.btnClass = 'btn-secondary' + modal.componentInstance.btnCaption = $localize`Close` + modal.componentInstance.alternativeBtnClass = 'btn-primary' + modal.componentInstance.alternativeBtnCaption = $localize`Save and close` + modal.componentInstance.alternativeClicked.pipe(first()).subscribe(() => { + modal.componentInstance.buttonsEnabled = false + component.saveViewConfig() + modal.close() + }) + modal.componentInstance.confirmClicked.pipe(first()).subscribe(() => { + modal.componentInstance.buttonsEnabled = false + modal.close() + }) + + const subject = new Subject() + modal.componentInstance.confirmSubject = subject + modal.componentInstance.alternativeSubject = subject + + return subject + } +}