Feature: send document via email on-demand

Side-by-side layout

src-ui/src/app/components/common/share-document-dropdown/share-document-dropdown.component.html

@@ -0,0 +1,104 @@
+<div ngbDropdown>
+  <button class="btn btn-sm btn-outline-primary" id="shareDocumentDropdown" [disabled]="disabled" ngbDropdownToggle>
+    <i-bs name="box-arrow-up"></i-bs>
+    <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Share</ng-container></div>
+  </button>
+  <div ngbDropdownMenu aria-labelledby="shareDocumentDropdown" class="shadow share-document-dropdown" [class.x2]="emailEnabled">
+    <div class="row px-3 py-2">
+      @if (emailEnabled) {
+        <div class="col col-md-6 border-end">
+          <h6 class="fw-normal"><i-bs class="me-2" name="envelope"></i-bs><ng-container i18n>Email document</ng-container></h6>
+          <div class="mb-1">
+            <label for="email" class="form-label small" 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 small" i18n>Subject</label>
+            <input type="email" class="form-control" id="subject" [(ngModel)]="emailSubject">
+          </div>
+          <div class="mb-3">
+            <label for="message" class="form-label small" i18n>Message</label>
+            <textarea class="form-control" id="message" rows="3" [(ngModel)]="emailMessage"></textarea>
+          </div>
+          <div class="input-group input-group-sm">
+            <div class="input-group-text flex-grow-1">
+              <input class="form-check-input mt-0 me-2" type="checkbox" role="switch" id="emailUseArchiveVersion" [disabled]="!hasArchiveVersion" [(ngModel)]="emailUseArchiveVersion">
+              <label class="form-check-label small w-100 text-start" for="emailUseArchiveVersion" i18n>Use archive version</label>
+            </div>
+            <button type="submit" class="btn btn-sm btn-outline-primary" (click)="emailDocument()" [disabled]="emailLoading || 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>
+      }
+      <div class="col col-md-6 mt-4 mt-md-0" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }">
+        <h6 class="fw-normal"><i-bs class="me-2" name="link"></i-bs><ng-container i18n>Share links</ng-container></h6>
+        <ul class="list-group list-group-flush">
+          @if (!shareLinks || shareLinks.length === 0) {
+            <li class="list-group-item fst-italic small text-center text-secondary" i18n>
+              No existing links
+            </li>
+          }
+          @for (link of shareLinks; track link) {
+            <li class="list-group-item">
+              <div class="input-group input-group-sm w-100">
+                <input type="text" class="form-control" aria-label="Share link" [value]="getShareUrl(link)" readonly>
+                @if (link.expiration) {
+                  <span class="input-group-text">
+                    {{ getDaysRemaining(link) }}
+                  </span>
+                }
+                <button type="button" class="btn btn-sm btn-outline-primary" (click)="copy(link)">
+                  @if (copied !== link.id) {
+                    <i-bs width="1.2em" height="1.2em" name="clipboard-fill"></i-bs>
+                  }
+                  @if (copied === link.id) {
+                    <i-bs width="1.2em" height="1.2em" name="clipboard-check-fill"></i-bs>
+                  }
+                  <span class="visually-hidden" i18n>Copy</span>
+                </button>
+                @if (canShare(link)) {
+                  <button type="button" class="btn btn-sm btn-outline-primary" (click)="share(link)">
+                    <i-bs width="1.2em" height="1.2em" name="box-arrow-up"></i-bs><span class="visually-hidden" i18n>Share</span>
+                  </button>
+                }
+                <button type="button" class="btn btn-sm btn-outline-danger" (click)="delete(link)">
+                  <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="visually-hidden" i18n>Delete</span>
+                </button>
+              </div>
+              <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied === link.id" i18n>Copied!</span>
+            </li>
+          }
+          <li class="list-group-item pt-3 pb-2">
+            <div class="input-group input-group-sm w-100">
+              <div class="form-check form-switch ms-auto small">
+                <input class="form-check-input" type="checkbox" role="switch" id="versionSwitch" [disabled]="!hasArchiveVersion" [(ngModel)]="useArchiveVersion">
+                <label class="form-check-label" for="versionSwitch" i18n>Share archive version</label>
+              </div>
+            </div>
+            <div class="input-group input-group-sm w-100 mt-2">
+              <label class="input-group-text" for="addLink"><ng-container i18n>Expires</ng-container>:</label>
+              <select class="form-select form-select-sm" [(ngModel)]="expirationDays">
+                @for (option of EXPIRATION_OPTIONS; track option) {
+                  <option [ngValue]="option.value">{{ option.label }}</option>
+                }
+              </select>
+              <button class="btn btn-sm btn-outline-primary ms-auto" type="button" (click)="createLink()" [disabled]="loading">
+                @if (loading) {
+                  <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                }
+                @if (!loading) {
+                  <i-bs name="plus"></i-bs>
+                }
+                <ng-container i18n>Create</ng-container>
+              </button>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</div>

src-ui/src/app/components/common/share-document-dropdown/share-document-dropdown.component.scss

@@ -0,0 +1,17 @@
+.share-document-dropdown {
+    min-width: 360px;
+
+    .col {
+        min-width: 350px;
+    }
+
+    @media screen and (min-width: 1024px) {
+        &.x2 {
+            width: 720px;
+        }
+    }
+}
+
+.copied-badge {
+    right: 7.5em;
+}

src-ui/src/app/components/common/share-document-dropdown/share-document-dropdown.component.spec.ts

@@ -14,23 +14,30 @@ import { By } from '@angular/platform-browser'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { of, throwError } from 'rxjs'
 import { FileVersion, ShareLink } from 'src/app/data/share-link'
+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 { ShareLinkService } from 'src/app/services/rest/share-link.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
-import { ShareLinksDropdownComponent } from './share-links-dropdown.component'
+import { ShareDocumentDropdownComponent } from './share-document-dropdown.component'
 
-describe('ShareLinksDropdownComponent', () => {
-  let component: ShareLinksDropdownComponent
-  let fixture: ComponentFixture<ShareLinksDropdownComponent>
+describe('ShareDocumentDropdownComponent', () => {
+  let component: ShareDocumentDropdownComponent
+  let fixture: ComponentFixture<ShareDocumentDropdownComponent>
   let shareLinkService: ShareLinkService
+  let documentService: DocumentService
+  let permissionsService: PermissionsService
   let toastService: ToastService
   let httpController: HttpTestingController
   let clipboard: Clipboard
 
   beforeEach(() => {
     TestBed.configureTestingModule({
+      declarations: [],
       imports: [
-        ShareLinksDropdownComponent,
+        ShareDocumentDropdownComponent,
+        IfPermissionsDirective,
         NgxBootstrapIconsModule.pick(allIcons),
       ],
       providers: [
@@ -39,12 +46,15 @@ describe('ShareLinksDropdownComponent', () => {
       ],
     })
 
-    fixture = TestBed.createComponent(ShareLinksDropdownComponent)
+    fixture = TestBed.createComponent(ShareDocumentDropdownComponent)
     shareLinkService = TestBed.inject(ShareLinkService)
+    documentService = TestBed.inject(DocumentService)
+    permissionsService = TestBed.inject(PermissionsService)
     toastService = TestBed.inject(ToastService)
     httpController = TestBed.inject(HttpTestingController)
     clipboard = TestBed.inject(Clipboard)
 
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
     component = fixture.componentInstance
     fixture.detectChanges()
   })
@@ -232,4 +242,21 @@ describe('ShareLinksDropdownComponent', () => {
       ]
     ).toBeTruthy()
   })
+
+  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()
+  })
 })

src-ui/src/app/components/common/share-document-dropdown/share-document-dropdown.component.ts

@@ -5,33 +5,40 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { first } from 'rxjs'
 import { FileVersion, ShareLink } from 'src/app/data/share-link'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+import { IfPermissionsDirective } from 'src/app/directives/if-permissions.directive'
+import { DocumentService } from 'src/app/services/rest/document.service'
 import { ShareLinkService } from 'src/app/services/rest/share-link.service'
+import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { environment } from 'src/environments/environment'
+import { ComponentWithPermissions } from '../../with-permissions/with-permissions.component'
+
+const EXPIRATION_OPTIONS = [
+  { label: $localize`1 day`, value: 1 },
+  { label: $localize`7 days`, value: 7 },
+  { label: $localize`30 days`, value: 30 },
+  { label: $localize`Never`, value: null },
+]
 
 @Component({
-  selector: 'pngx-share-links-dropdown',
-  templateUrl: './share-links-dropdown.component.html',
-  styleUrls: ['./share-links-dropdown.component.scss'],
+  selector: 'pngx-share-document-dropdown',
+  templateUrl: './share-document-dropdown.component.html',
+  styleUrls: ['./share-document-dropdown.component.scss'],
   imports: [
+    IfPermissionsDirective,
     FormsModule,
     ReactiveFormsModule,
     NgbDropdownModule,
     NgxBootstrapIconsModule,
   ],
 })
-export class ShareLinksDropdownComponent implements OnInit {
-  EXPIRATION_OPTIONS = [
-    { label: $localize`1 day`, value: 1 },
-    { label: $localize`7 days`, value: 7 },
-    { label: $localize`30 days`, value: 30 },
-    { label: $localize`Never`, value: null },
-  ]
-
-  @Input()
-  title = $localize`Share Links`
-
-  _documentId: number
+export class ShareDocumentDropdownComponent
+  extends ComponentWithPermissions
+  implements OnInit
+{
+  public EXPIRATION_OPTIONS = EXPIRATION_OPTIONS
+  private _documentId: number
 
   @Input()
   set documentId(id: number) {
@@ -50,6 +57,7 @@ export class ShareLinksDropdownComponent implements OnInit {
   set hasArchiveVersion(value: boolean) {
     this._hasArchiveVersion = value
     this.useArchiveVersion = value
+    this.emailUseArchiveVersion = value
   }
 
   get hasArchiveVersion(): boolean {
@@ -66,11 +74,21 @@ export class ShareLinksDropdownComponent implements OnInit {
 
   useArchiveVersion: boolean = true
 
+  emailLoading: boolean = false
+  emailAddress: string = ''
+  emailSubject: string = ''
+  emailMessage: string = ''
+  emailUseArchiveVersion: boolean = true
+
   constructor(
     private shareLinkService: ShareLinkService,
+    private documentService: DocumentService,
+    private settingsService: SettingsService,
     private toastService: ToastService,
     private clipboard: Clipboard
-  ) {}
+  ) {
+    super()
+  }
 
   ngOnInit(): void {
     if (this._documentId !== undefined) this.refresh()
@@ -169,4 +187,33 @@ export class ShareLinksDropdownComponent implements OnInit {
         },
       })
   }
+
+  get emailEnabled(): boolean {
+    return this.settingsService.get(SETTINGS_KEYS.EMAIL_ENABLED)
+  }
+
+  public emailDocument() {
+    this.emailLoading = true
+    this.documentService
+      .emailDocument(
+        this._documentId,
+        this.emailAddress,
+        this.emailSubject,
+        this.emailMessage,
+        this.emailUseArchiveVersion
+      )
+      .subscribe({
+        next: () => {
+          this.emailLoading = false
+          this.emailAddress = ''
+          this.emailSubject = ''
+          this.emailMessage = ''
+          this.toastService.showInfo($localize`Email sent`)
+        },
+        error: (e) => {
+          this.emailLoading = false
+          this.toastService.showError($localize`Error emailing document`, e)
+        },
+      })
+  }
 }

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.html

@@ -1,70 +0,0 @@
-<div ngbDropdown>
-  <button class="btn btn-sm btn-outline-primary" id="shareLinksDropdown" [disabled]="disabled" ngbDropdownToggle>
-    <i-bs name="link"></i-bs>
-    <div class="d-none d-sm-inline">&nbsp;<ng-container i18n>Share Links</ng-container></div>
-  </button>
-  <div ngbDropdownMenu aria-labelledby="shareLinksDropdown" class="shadow share-links-dropdown">
-    <ul class="list-group list-group-flush">
-      @if (!shareLinks || shareLinks.length === 0) {
-        <li class="list-group-item fst-italic small text-center text-secondary" i18n>
-          No existing links
-        </li>
-      }
-      @for (link of shareLinks; track link) {
-        <li class="list-group-item">
-          <div class="input-group input-group-sm w-100">
-            <input type="text" class="form-control" aria-label="Share link" [value]="getShareUrl(link)" readonly>
-            @if (link.expiration) {
-              <span class="input-group-text">
-                {{ getDaysRemaining(link) }}
-              </span>
-            }
-            <button type="button" class="btn btn-sm btn-outline-primary" (click)="copy(link)">
-                @if (copied !== link.id) {
-                  <i-bs width="1.2em" height="1.2em" name="clipboard-fill"></i-bs>
-                }
-                @if (copied === link.id) {
-                  <i-bs width="1.2em" height="1.2em" name="clipboard-check-fill"></i-bs>
-                }
-                <span class="visually-hidden" i18n>Copy</span>
-              </button>
-              @if (canShare(link)) {
-                <button type="button" class="btn btn-sm btn-outline-primary" (click)="share(link)">
-                  <i-bs width="1.2em" height="1.2em" name="box-arrow-up"></i-bs><span class="visually-hidden" i18n>Share</span>
-                  </button>
-                }
-                <button type="button" class="btn btn-sm btn-outline-danger" (click)="delete(link)">
-                  <i-bs width="1.2em" height="1.2em" name="trash"></i-bs><span class="visually-hidden" i18n>Delete</span>
-                  </button>
-                </div>
-                <span class="badge copied-badge bg-primary small fade ms-4 position-absolute top-50 translate-middle-y pe-none z-3" [class.show]="copied === link.id" i18n>Copied!</span>
-              </li>
-            }
-            <li class="list-group-item pt-3 pb-2">
-              <div class="input-group input-group-sm w-100">
-                <div class="form-check form-switch ms-auto small">
-                  <input class="form-check-input" type="checkbox" role="switch" id="versionSwitch" [disabled]="!hasArchiveVersion" [(ngModel)]="useArchiveVersion">
-                  <label class="form-check-label" for="versionSwitch" i18n>Share archive version</label>
-                </div>
-              </div>
-              <div class="input-group input-group-sm w-100 mt-2">
-                <label class="input-group-text" for="addLink"><ng-container i18n>Expires</ng-container>:</label>
-                <select class="form-select form-select-sm" [(ngModel)]="expirationDays">
-                  @for (option of EXPIRATION_OPTIONS; track option) {
-                    <option [ngValue]="option.value">{{ option.label }}</option>
-                  }
-                </select>
-                <button class="btn btn-sm btn-outline-primary ms-auto" type="button" (click)="createLink()" [disabled]="loading">
-                  @if (loading) {
-                    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
-                  }
-                  @if (!loading) {
-                    <i-bs name="plus"></i-bs>
-                  }
-                  <ng-container i18n>Create</ng-container>
-                </button>
-              </div>
-            </li>
-          </ul>
-        </div>
-      </div>

src-ui/src/app/components/common/share-links-dropdown/share-links-dropdown.component.scss

@@ -1,14 +0,0 @@
-.share-links-dropdown {
-    min-width: 350px;
-
-    // correct position on mobile
-    @media (max-width: 575.98px) {
-        &.show {
-            margin-left: -175px !important;
-        }
-    }
-}
-
-.copied-badge {
-    right: 7.5em;
-}

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -81,7 +81,7 @@
     (added)="addField($event)">
   </pngx-custom-fields-dropdown>
 
-  <pngx-share-links-dropdown [documentId]="documentId" [hasArchiveVersion]="!!document?.archived_file_name" [disabled]="!userCanEdit && !userIsOwner" *pngxIfPermissions="{ action: PermissionAction.Add, type: PermissionType.ShareLink }"></pngx-share-links-dropdown>
+  <pngx-share-document-dropdown [documentId]="documentId" [hasArchiveVersion]="!!document?.archived_file_name" [disabled]="!userCanEdit && !userIsOwner"></pngx-share-document-dropdown>
 </pngx-page-header>
 
 <div class="row">

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -99,7 +99,7 @@ import { TagsComponent } from '../common/input/tags/tags.component'
 import { TextComponent } from '../common/input/text/text.component'
 import { UrlComponent } from '../common/input/url/url.component'
 import { PageHeaderComponent } from '../common/page-header/page-header.component'
-import { ShareLinksDropdownComponent } from '../common/share-links-dropdown/share-links-dropdown.component'
+import { ShareDocumentDropdownComponent } from '../common/share-document-dropdown/share-document-dropdown.component'
 import { DocumentHistoryComponent } from '../document-history/document-history.component'
 import { DocumentNotesComponent } from '../document-notes/document-notes.component'
 import { ComponentWithPermissions } from '../with-permissions/with-permissions.component'
@@ -145,7 +145,7 @@ export enum ZoomSetting {
     CustomFieldsDropdownComponent,
     DocumentNotesComponent,
     DocumentHistoryComponent,
-    ShareLinksDropdownComponent,
+    ShareDocumentDropdownComponent,
     CheckComponent,
     DateComponent,
     DocumentLinkComponent,

src-ui/src/app/services/rest/document.service.spec.ts

@@ -355,6 +355,21 @@ it('should include custom fields in sort fields if user has permission', () => {
   ])
 })
 
+it('should call appropriate api endpoint for email document', () => {
+  subscription = service
+    .emailDocument(
+      documents[0].id,
+      'hello@paperless-ngx.com',
+      'hello',
+      'world',
+      true
+    )
+    .subscribe()
+  httpTestingController.expectOne(
+    `${environment.apiBaseUrl}${endpoint}/${documents[0].id}/email/`
+  )
+})
+
 afterEach(() => {
   subscription?.unsubscribe()
   httpTestingController.verify()

src-ui/src/app/services/rest/document.service.ts

@@ -258,4 +258,19 @@ export class DocumentService extends AbstractPaperlessService<Document> {
   public get searchQuery(): string {
     return this._searchQuery
   }
+
+  emailDocument(
+    documentId: number,
+    addresses: string,
+    subject: string,
+    message: string,
+    useArchiveVersion: boolean
+  ): Observable<any> {
+    return this.http.post(this.getResourceUrl(documentId, 'email'), {
+      addresses: addresses,
+      subject: subject,
+      message: message,
+      use_archive_version: useArchiveVersion,
+    })
+  }
 }