Feature: email document button (#8950)

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.html

@@ -0,0 +1,32 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
+</div>
+<div class="modal-body">
+    <div class="mb-1">
+        <label for="email" class="form-label" i18n>Email address(es)</label>
+        <input type="email" class="form-control" id="email" [(ngModel)]="emailAddress">
+    </div>
+    <div class="mb-1">
+        <label for="email" class="form-label" i18n>Subject</label>
+        <input type="email" class="form-control" id="subject" [(ngModel)]="emailSubject">
+    </div>
+    <div>
+        <label for="message" class="form-label" i18n>Message</label>
+        <textarea class="form-control" id="message" rows="3" [(ngModel)]="emailMessage"></textarea>
+    </div>
+</div>
+<div class="modal-footer">
+    <div class="input-group">
+        <div class="input-group-text flex-grow-1">
+            <input class="form-check-input mt-0 me-2" type="checkbox" role="switch" id="useArchiveVersion" [disabled]="!hasArchiveVersion" [(ngModel)]="useArchiveVersion">
+            <label class="form-check-label w-100 text-start" for="useArchiveVersion" i18n>Use archive version</label>
+        </div>
+        <button type="submit" class="btn btn-outline-primary" (click)="emailDocument()" [disabled]="loading || emailAddress.length === 0 || emailMessage.length === 0 || emailSubject.length === 0">
+            @if (loading) {
+                <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+            }
+            <ng-container i18n>Send email</ng-container>
+        </button>
+    </div>
+</div>

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.spec.ts

@@ -0,0 +1,72 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of, throwError } from 'rxjs'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { PermissionsService } from 'src/app/services/permissions.service'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { EmailDocumentDialogComponent } from './email-document-dialog.component'
+
+describe('EmailDocumentDialogComponent', () => {
+  let component: EmailDocumentDialogComponent
+  let fixture: ComponentFixture<EmailDocumentDialogComponent>
+  let documentService: DocumentService
+  let permissionsService: PermissionsService
+  let toastService: ToastService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        EmailDocumentDialogComponent,
+        IfPermissionsDirective,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+      providers: [
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+        NgbActiveModal,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(EmailDocumentDialogComponent)
+    documentService = TestBed.inject(DocumentService)
+    toastService = TestBed.inject(ToastService)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should set hasArchiveVersion and useArchiveVersion', () => {
+    expect(component.hasArchiveVersion).toBeTruthy()
+    component.hasArchiveVersion = false
+    expect(component.hasArchiveVersion).toBeFalsy()
+    expect(component.useArchiveVersion).toBeFalsy()
+  })
+
+  it('should support sending document via email, showing error if needed', () => {
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    const toastSuccessSpy = jest.spyOn(toastService, 'showInfo')
+    component.emailAddress = 'hello@paperless-ngx.com'
+    component.emailSubject = 'Hello'
+    component.emailMessage = 'World'
+    jest
+      .spyOn(documentService, 'emailDocument')
+      .mockReturnValue(throwError(() => new Error('Unable to email document')))
+    component.emailDocument()
+    expect(toastErrorSpy).toHaveBeenCalled()
+
+    jest.spyOn(documentService, 'emailDocument').mockReturnValue(of(true))
+    component.emailDocument()
+    expect(toastSuccessSpy).toHaveBeenCalled()
+  })
+
+  it('should close the dialog', () => {
+    const activeModal = TestBed.inject(NgbActiveModal)
+    const closeSpy = jest.spyOn(activeModal, 'close')
+    component.close()
+    expect(closeSpy).toHaveBeenCalled()
+  })
+})

src-ui/src/app/components/common/email-document-dialog/email-document-dialog.component.ts

@@ -0,0 +1,77 @@
+import { Component, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ToastService } from 'src/app/services/toast.service'
+import { LoadingComponentWithPermissions } from '../../loading-component/loading.component'
+
+@Component({
+  selector: 'pngx-email-document-dialog',
+  templateUrl: './email-document-dialog.component.html',
+  styleUrl: './email-document-dialog.component.scss',
+  imports: [FormsModule, NgxBootstrapIconsModule],
+})
+export class EmailDocumentDialogComponent extends LoadingComponentWithPermissions {
+  @Input()
+  title = $localize`Email Document`
+
+  @Input()
+  documentId: number
+
+  private _hasArchiveVersion: boolean = true
+
+  @Input()
+  set hasArchiveVersion(value: boolean) {
+    this._hasArchiveVersion = value
+    this.useArchiveVersion = value
+  }
+
+  get hasArchiveVersion(): boolean {
+    return this._hasArchiveVersion
+  }
+
+  public useArchiveVersion: boolean = true
+
+  public emailAddress: string = ''
+  public emailSubject: string = ''
+  public emailMessage: string = ''
+
+  constructor(
+    private activeModal: NgbActiveModal,
+    private documentService: DocumentService,
+    private toastService: ToastService
+  ) {
+    super()
+    this.loading = false
+  }
+
+  public emailDocument() {
+    this.loading = true
+    this.documentService
+      .emailDocument(
+        this.documentId,
+        this.emailAddress,
+        this.emailSubject,
+        this.emailMessage,
+        this.useArchiveVersion
+      )
+      .subscribe({
+        next: () => {
+          this.loading = false
+          this.emailAddress = ''
+          this.emailSubject = ''
+          this.emailMessage = ''
+          this.toastService.showInfo($localize`Email sent`)
+        },
+        error: (e) => {
+          this.loading = false
+          this.toastService.showError($localize`Error emailing document`, e)
+        },
+      })
+  }
+
+  public close() {
+    this.activeModal.close()
+  }
+}