From 5bea5e75c0457ad957d6816530feabcb0bc7dad5 Mon Sep 17 00:00:00 2001 From: jonaswinkler Date: Sun, 13 Dec 2020 14:28:37 +0100 Subject: [PATCH] Refactored delete dialog into a more generic confirm dialog --- src-ui/src/app/app.module.ts | 4 +- .../confirm-dialog.component.html} | 6 +-- .../confirm-dialog.component.scss} | 0 .../confirm-dialog.component.spec.ts} | 12 +++--- .../confirm-dialog.component.ts | 37 +++++++++++++++++++ .../delete-dialog/delete-dialog.component.ts | 31 ---------------- .../document-detail.component.ts | 13 ++++--- .../generic-list/generic-list.component.ts | 13 ++++--- 8 files changed, 64 insertions(+), 52 deletions(-) rename src-ui/src/app/components/common/{delete-dialog/delete-dialog.component.html => confirm-dialog/confirm-dialog.component.html} (67%) rename src-ui/src/app/components/common/{delete-dialog/delete-dialog.component.scss => confirm-dialog/confirm-dialog.component.scss} (100%) rename src-ui/src/app/components/common/{delete-dialog/delete-dialog.component.spec.ts => confirm-dialog/confirm-dialog.component.spec.ts} (52%) create mode 100644 src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts delete mode 100644 src-ui/src/app/components/common/delete-dialog/delete-dialog.component.ts diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 0ee36b478..a1ae10d14 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -16,7 +16,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { DatePipe } from '@angular/common'; import { NotFoundComponent } from './components/not-found/not-found.component'; import { CorrespondentListComponent } from './components/manage/correspondent-list/correspondent-list.component'; -import { DeleteDialogComponent } from './components/common/delete-dialog/delete-dialog.component'; +import { ConfirmDialogComponent } from './components/common/confirm-dialog/confirm-dialog.component'; import { CorrespondentEditDialogComponent } from './components/manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component'; import { TagEditDialogComponent } from './components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component'; import { DocumentTypeEditDialogComponent } from './components/manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component'; @@ -63,7 +63,7 @@ import { DocumentTitlePipe } from './pipes/document-title.pipe'; SettingsComponent, NotFoundComponent, CorrespondentEditDialogComponent, - DeleteDialogComponent, + ConfirmDialogComponent, TagEditDialogComponent, DocumentTypeEditDialogComponent, TagComponent, diff --git a/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.html b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html similarity index 67% rename from src-ui/src/app/components/common/delete-dialog/delete-dialog.component.html rename to src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html index 2de507549..53b613244 100644 --- a/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.html +++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.html @@ -5,10 +5,10 @@ \ No newline at end of file diff --git a/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.scss b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.scss similarity index 100% rename from src-ui/src/app/components/common/delete-dialog/delete-dialog.component.scss rename to src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.scss diff --git a/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.spec.ts b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.spec.ts similarity index 52% rename from src-ui/src/app/components/common/delete-dialog/delete-dialog.component.spec.ts rename to src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.spec.ts index 33c7d6e88..fe08dc57a 100644 --- a/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.spec.ts +++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.spec.ts @@ -1,20 +1,20 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'; -import { DeleteDialogComponent } from './delete-dialog.component'; +import { ConfirmDialogComponent } from './confirm-dialog.component'; -describe('DeleteDialogComponent', () => { - let component: DeleteDialogComponent; - let fixture: ComponentFixture; +describe('ConfirmDialogComponent', () => { + let component: ConfirmDialogComponent; + let fixture: ComponentFixture; beforeEach(async () => { await TestBed.configureTestingModule({ - declarations: [ DeleteDialogComponent ] + declarations: [ ConfirmDialogComponent ] }) .compileComponents(); }); beforeEach(() => { - fixture = TestBed.createComponent(DeleteDialogComponent); + fixture = TestBed.createComponent(ConfirmDialogComponent); component = fixture.componentInstance; fixture.detectChanges(); }); 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 new file mode 100644 index 000000000..e207f4598 --- /dev/null +++ b/src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts @@ -0,0 +1,37 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; + +@Component({ + selector: 'app-confirm-dialog', + templateUrl: './confirm-dialog.component.html', + styleUrls: ['./confirm-dialog.component.scss'] +}) +export class ConfirmDialogComponent implements OnInit { + + constructor(public activeModal: NgbActiveModal) { } + + @Output() + public confirmClicked = new EventEmitter() + + @Input() + title = "Confirmation" + + @Input() + messageBold + + @Input() + message + + @Input() + btnClass = "btn-primary" + + @Input() + btnCaption = "Confirm" + + ngOnInit(): void { + } + + cancelClicked() { + this.activeModal.close() + } +} diff --git a/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.ts b/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.ts deleted file mode 100644 index 20114c78c..000000000 --- a/src-ui/src/app/components/common/delete-dialog/delete-dialog.component.ts +++ /dev/null @@ -1,31 +0,0 @@ -import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; -import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; - -@Component({ - selector: 'app-delete-dialog', - templateUrl: './delete-dialog.component.html', - styleUrls: ['./delete-dialog.component.scss'] -}) -export class DeleteDialogComponent implements OnInit { - - constructor(public activeModal: NgbActiveModal) { } - - @Output() - public deleteClicked = new EventEmitter() - - @Input() - title = "Delete confirmation" - - @Input() - message = "Do you really want to delete this?" - - @Input() - message2 - - ngOnInit(): void { - } - - cancelClicked() { - this.activeModal.close() - } -} diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts index c80a8b1ce..4aac9c769 100644 --- a/src-ui/src/app/components/document-detail/document-detail.component.ts +++ b/src-ui/src/app/components/document-detail/document-detail.component.ts @@ -13,7 +13,7 @@ import { CorrespondentService } from 'src/app/services/rest/correspondent.servic import { DocumentTypeService } from 'src/app/services/rest/document-type.service'; import { DocumentService } from 'src/app/services/rest/document.service'; import { environment } from 'src/environments/environment'; -import { DeleteDialogComponent } from '../common/delete-dialog/delete-dialog.component'; +import { ConfirmDialogComponent } from '../common/confirm-dialog/confirm-dialog.component'; import { CorrespondentEditDialogComponent } from '../manage/correspondent-list/correspondent-edit-dialog/correspondent-edit-dialog.component'; import { DocumentTypeEditDialogComponent } from '../manage/document-type-list/document-type-edit-dialog/document-type-edit-dialog.component'; @@ -155,10 +155,13 @@ export class DocumentDetailComponent implements OnInit { } delete() { - let modal = this.modalService.open(DeleteDialogComponent, {backdrop: 'static'}) - modal.componentInstance.message = `Do you really want to delete document '${this.document.title}'?` - modal.componentInstance.message2 = `The files for this document will be deleted permanently. This operation cannot be undone.` - modal.componentInstance.deleteClicked.subscribe(() => { + let modal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'}) + modal.componentInstance.title = "Confirm delete" + modal.componentInstance.messageBold = `Do you really want to delete document '${this.document.title}'?` + modal.componentInstance.message = `The files for this document will be deleted permanently. This operation cannot be undone.` + modal.componentInstance.btnClass = "btn-danger" + modal.componentInstance.btnCaption = "Delete document" + modal.componentInstance.confirmClicked.subscribe(() => { this.documentsService.delete(this.document).subscribe(() => { modal.close() this.close() diff --git a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts index d5477d010..59a5f09ed 100644 --- a/src-ui/src/app/components/manage/generic-list/generic-list.component.ts +++ b/src-ui/src/app/components/manage/generic-list/generic-list.component.ts @@ -4,7 +4,7 @@ import { MatchingModel, MATCHING_ALGORITHMS, MATCH_AUTO } from 'src/app/data/mat import { ObjectWithId } from 'src/app/data/object-with-id'; import { SortableDirective, SortEvent } from 'src/app/directives/sortable.directive'; import { AbstractPaperlessService } from 'src/app/services/rest/abstract-paperless-service'; -import { DeleteDialogComponent } from '../../common/delete-dialog/delete-dialog.component'; +import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'; @Directive() export abstract class GenericListComponent implements OnInit { @@ -88,10 +88,13 @@ export abstract class GenericListComponent implements On } openDeleteDialog(object: T) { - var activeModal = this.modalService.open(DeleteDialogComponent, {backdrop: 'static'}) - activeModal.componentInstance.message = `Do you really want to delete ${this.getObjectName(object)}?` - activeModal.componentInstance.message2 = "Associated documents will not be deleted." - activeModal.componentInstance.deleteClicked.subscribe(() => { + var activeModal = this.modalService.open(ConfirmDialogComponent, {backdrop: 'static'}) + activeModal.componentInstance.title = "Confirm delete" + activeModal.componentInstance.messageBold = `Do you really want to delete ${this.getObjectName(object)}?` + activeModal.componentInstance.message = "Associated documents will not be deleted." + activeModal.componentInstance.btnClass = "btn-danger" + activeModal.componentInstance.btnCaption = "Delete" + activeModal.componentInstance.confirmPressed.subscribe(() => { this.service.delete(object).subscribe(_ => { activeModal.close() this.reloadData()