diff --git a/src-ui/src/app/components/manage/mail/mail.component.html b/src-ui/src/app/components/manage/mail/mail.component.html index 43395109d..68187c6bd 100644 --- a/src-ui/src/app/components/manage/mail/mail.component.html +++ b/src-ui/src/app/components/manage/mail/mail.component.html @@ -32,84 +32,72 @@
- - - + + + +
+ + + + } + @if (mailAccounts.length === 0) { +
  • No mail accounts defined.
    • + } + + + + + +

    + Mail rules + +

    + + -     + @for (rule of mailRules; track rule) { +
  • +
    +
    +
    {{(mailAccountService.getCached(rule.account) | async)?.name}}
    +
    +
    + + + +
    +
    +
    +
    • + } + @if (mailRules.length === 0) { +
  • No mail rules defined.
    • + } + - -

    - Mail rules - -

    - - -     - -@if (!mailAccounts || !mailRules) { -
    - - -
    -} + @if (!mailAccounts || !mailRules) { +
    + + +
    + } diff --git a/src-ui/src/app/components/manage/mail/mail.component.spec.ts b/src-ui/src/app/components/manage/mail/mail.component.spec.ts index 79794b1a7..fcc5bcc6b 100644 --- a/src-ui/src/app/components/manage/mail/mail.component.spec.ts +++ b/src-ui/src/app/components/manage/mail/mail.component.spec.ts @@ -42,8 +42,6 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms' import { EditDialogMode } from '../../common/edit-dialog/edit-dialog.component' import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons' import { SwitchComponent } from '../../common/input/switch/switch.component' -import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component' -import { By } from '@angular/platform-browser' const mailAccounts = [ { id: 1, name: 'account1' }, @@ -86,7 +84,6 @@ describe('MailComponent', () => { PermissionsDialogComponent, PermissionsFormComponent, SwitchComponent, - ConfirmButtonComponent, ], providers: [CustomDatePipe, DatePipe, PermissionsGuard], imports: [ @@ -186,9 +183,10 @@ describe('MailComponent', () => { it('should support delete mail account, show error if needed', () => { completeSetup() - const deleteButton = fixture.debugElement.query( - By.directive(ConfirmButtonComponent) - ) + let modal: NgbModalRef + modalService.activeInstances.subscribe((refs) => (modal = refs[0])) + component.deleteMailAccount(mailAccounts[0] as MailAccount) + const deleteDialog = modal.componentInstance as ConfirmDialogComponent const deleteSpy = jest.spyOn(mailAccountService, 'delete') const toastErrorSpy = jest.spyOn(toastService, 'showError') const toastInfoSpy = jest.spyOn(toastService, 'showInfo') @@ -196,10 +194,10 @@ describe('MailComponent', () => { deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting mail account')) ) - deleteButton.nativeElement.dispatchEvent(new Event('confirm')) + deleteDialog.confirm() expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) - deleteButton.nativeElement.dispatchEvent(new Event('confirm')) + deleteDialog.confirm() expect(listAllSpy).toHaveBeenCalled() expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail account') }) @@ -224,9 +222,10 @@ describe('MailComponent', () => { it('should support delete mail rule, show error if needed', () => { completeSetup() - const deleteButton = fixture.debugElement.queryAll( - By.directive(ConfirmButtonComponent) - )[2] + let modal: NgbModalRef + modalService.activeInstances.subscribe((refs) => (modal = refs[0])) + component.deleteMailRule(mailRules[0] as MailRule) + const deleteDialog = modal.componentInstance as ConfirmDialogComponent const deleteSpy = jest.spyOn(mailRuleService, 'delete') const toastErrorSpy = jest.spyOn(toastService, 'showError') const toastInfoSpy = jest.spyOn(toastService, 'showInfo') @@ -234,10 +233,10 @@ describe('MailComponent', () => { deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting mail rule')) ) - deleteButton.nativeElement.dispatchEvent(new Event('confirm')) + deleteDialog.confirm() expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) - deleteButton.nativeElement.dispatchEvent(new Event('confirm')) + deleteDialog.confirm() expect(listAllSpy).toHaveBeenCalled() expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail rule') }) diff --git a/src-ui/src/app/components/manage/mail/mail.component.ts b/src-ui/src/app/components/manage/mail/mail.component.ts index ce349a221..d8820ed38 100644 --- a/src-ui/src/app/components/manage/mail/mail.component.ts +++ b/src-ui/src/app/components/manage/mail/mail.component.ts @@ -106,19 +106,34 @@ export class MailComponent } deleteMailAccount(account: MailAccount) { - this.mailAccountService.delete(account).subscribe({ - next: () => { - this.toastService.showInfo($localize`Deleted mail account`) - this.mailAccountService.clearCache() - this.mailAccountService - .listAll(null, null, { full_perms: true }) - .subscribe((r) => { - this.mailAccounts = r.results - }) - }, - error: (e) => { - this.toastService.showError($localize`Error deleting mail account.`, e) - }, + const modal = this.modalService.open(ConfirmDialogComponent, { + backdrop: 'static', + }) + modal.componentInstance.title = $localize`Confirm delete mail account` + modal.componentInstance.messageBold = $localize`This operation will permanently delete this mail account.` + modal.componentInstance.message = $localize`This operation cannot be undone.` + modal.componentInstance.btnClass = 'btn-danger' + modal.componentInstance.btnCaption = $localize`Proceed` + modal.componentInstance.confirmClicked.subscribe(() => { + modal.componentInstance.buttonsEnabled = false + this.mailAccountService.delete(account).subscribe({ + next: () => { + modal.close() + this.toastService.showInfo($localize`Deleted mail account`) + this.mailAccountService.clearCache() + this.mailAccountService + .listAll(null, null, { full_perms: true }) + .subscribe((r) => { + this.mailAccounts = r.results + }) + }, + error: (e) => { + this.toastService.showError( + $localize`Error deleting mail account.`, + e + ) + }, + }) }) } @@ -150,19 +165,31 @@ export class MailComponent } deleteMailRule(rule: MailRule) { - this.mailRuleService.delete(rule).subscribe({ - next: () => { - this.toastService.showInfo($localize`Deleted mail rule`) - this.mailRuleService.clearCache() - this.mailRuleService - .listAll(null, null, { full_perms: true }) - .subscribe((r) => { - this.mailRules = r.results - }) - }, - error: (e) => { - this.toastService.showError($localize`Error deleting mail rule.`, e) - }, + const modal = this.modalService.open(ConfirmDialogComponent, { + backdrop: 'static', + }) + modal.componentInstance.title = $localize`Confirm delete mail rule` + modal.componentInstance.messageBold = $localize`This operation will permanently delete this mail rule.` + modal.componentInstance.message = $localize`This operation cannot be undone.` + modal.componentInstance.btnClass = 'btn-danger' + modal.componentInstance.btnCaption = $localize`Proceed` + modal.componentInstance.confirmClicked.subscribe(() => { + modal.componentInstance.buttonsEnabled = false + this.mailRuleService.delete(rule).subscribe({ + next: () => { + modal.close() + this.toastService.showInfo($localize`Deleted mail rule`) + this.mailRuleService.clearCache() + this.mailRuleService + .listAll(null, null, { full_perms: true }) + .subscribe((r) => { + this.mailRules = r.results + }) + }, + error: (e) => { + this.toastService.showError($localize`Error deleting mail rule.`, e) + }, + }) }) }