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 68187c6bd..43395109d 100644 --- a/src-ui/src/app/components/manage/mail/mail.component.html +++ b/src-ui/src/app/components/manage/mail/mail.component.html @@ -32,72 +32,84 @@
- - -
- - - - } - @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) { +
    + + +
    +} 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 fcc5bcc6b..79794b1a7 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,6 +42,8 @@ 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' }, @@ -84,6 +86,7 @@ describe('MailComponent', () => { PermissionsDialogComponent, PermissionsFormComponent, SwitchComponent, + ConfirmButtonComponent, ], providers: [CustomDatePipe, DatePipe, PermissionsGuard], imports: [ @@ -183,10 +186,9 @@ describe('MailComponent', () => { it('should support delete mail account, show error if needed', () => { completeSetup() - let modal: NgbModalRef - modalService.activeInstances.subscribe((refs) => (modal = refs[0])) - component.deleteMailAccount(mailAccounts[0] as MailAccount) - const deleteDialog = modal.componentInstance as ConfirmDialogComponent + const deleteButton = fixture.debugElement.query( + By.directive(ConfirmButtonComponent) + ) const deleteSpy = jest.spyOn(mailAccountService, 'delete') const toastErrorSpy = jest.spyOn(toastService, 'showError') const toastInfoSpy = jest.spyOn(toastService, 'showInfo') @@ -194,10 +196,10 @@ describe('MailComponent', () => { deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting mail account')) ) - deleteDialog.confirm() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) - deleteDialog.confirm() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) expect(listAllSpy).toHaveBeenCalled() expect(toastInfoSpy).toHaveBeenCalledWith('Deleted mail account') }) @@ -222,10 +224,9 @@ describe('MailComponent', () => { it('should support delete mail rule, show error if needed', () => { completeSetup() - let modal: NgbModalRef - modalService.activeInstances.subscribe((refs) => (modal = refs[0])) - component.deleteMailRule(mailRules[0] as MailRule) - const deleteDialog = modal.componentInstance as ConfirmDialogComponent + const deleteButton = fixture.debugElement.queryAll( + By.directive(ConfirmButtonComponent) + )[2] const deleteSpy = jest.spyOn(mailRuleService, 'delete') const toastErrorSpy = jest.spyOn(toastService, 'showError') const toastInfoSpy = jest.spyOn(toastService, 'showInfo') @@ -233,10 +234,10 @@ describe('MailComponent', () => { deleteSpy.mockReturnValueOnce( throwError(() => new Error('error deleting mail rule')) ) - deleteDialog.confirm() + deleteButton.nativeElement.dispatchEvent(new Event('confirm')) expect(toastErrorSpy).toBeCalled() deleteSpy.mockReturnValueOnce(of(true)) - deleteDialog.confirm() + deleteButton.nativeElement.dispatchEvent(new Event('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 d8820ed38..ce349a221 100644 --- a/src-ui/src/app/components/manage/mail/mail.component.ts +++ b/src-ui/src/app/components/manage/mail/mail.component.ts @@ -106,34 +106,19 @@ export class MailComponent } deleteMailAccount(account: MailAccount) { - 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 - ) - }, - }) + 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) + }, }) } @@ -165,31 +150,19 @@ export class MailComponent } deleteMailRule(rule: MailRule) { - 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) - }, - }) + 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) + }, }) }