Feature: documents trash aka soft delete (#6944)

src-ui/src/app/app-routing.module.ts

@@ -26,6 +26,7 @@ import { MailComponent } from './components/manage/mail/mail.component'
 import { UsersAndGroupsComponent } from './components/admin/users-groups/users-groups.component'
 import { CustomFieldsComponent } from './components/manage/custom-fields/custom-fields.component'
 import { ConfigComponent } from './components/admin/config/config.component'
+import { TrashComponent } from './components/admin/trash/trash.component'
 
 export const routes: Routes = [
   { path: '', redirectTo: 'dashboard', pathMatch: 'full' },
@@ -144,6 +145,14 @@ export const routes: Routes = [
           requireAdmin: true,
         },
       },
+      {
+        path: 'trash',
+        component: TrashComponent,
+        canActivate: [PermissionsGuard],
+        data: {
+          requireAdmin: true,
+        },
+      },
       // redirect old paths
       {
         path: 'settings/mail',

src-ui/src/app/app.module.ts

@@ -125,6 +125,7 @@ import { CustomFieldDisplayComponent } from './components/common/custom-field-di
 import { GlobalSearchComponent } from './components/app-frame/global-search/global-search.component'
 import { HotkeyDialogComponent } from './components/common/hotkey-dialog/hotkey-dialog.component'
 import { DeletePagesConfirmDialogComponent } from './components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
+import { TrashComponent } from './components/admin/trash/trash.component'
 import {
   airplane,
   archive,
@@ -497,6 +498,7 @@ function initializeApp(settings: SettingsService) {
     GlobalSearchComponent,
     HotkeyDialogComponent,
     DeletePagesConfirmDialogComponent,
+    TrashComponent,
   ],
   imports: [
     BrowserModule,

src-ui/src/app/components/admin/settings/settings.component.html

@@ -192,7 +192,7 @@
 
         <div class="row mb-3">
           <div class="offset-md-3 col">
-            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs" i18n-hint hint="Deleting documents will always ask for confirmation."></pngx-input-check>
+            <pngx-input-check i18n-title title="Show confirmation dialogs" formControlName="bulkEditConfirmationDialogs"></pngx-input-check>
             <pngx-input-check i18n-title title="Apply on close" formControlName="bulkEditApplyOnClose"></pngx-input-check>
           </div>
         </div>

src-ui/src/app/components/admin/trash/trash.component.html

@@ -0,0 +1,98 @@
+<pngx-page-header
+    title="Trash"
+    i18n-title
+    info="Manage trashed documents that are pending deletion."
+    i18n-info
+    infoLink="usage/#document-trash">
+    <button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedDocuments.size === 0">
+        <i-bs name="x"></i-bs>&nbsp;<ng-container i18n>Clear selection</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-primary" (click)="restoreAll(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
+        <i-bs name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore selected</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash(selectedDocuments)" [disabled]="selectedDocuments.size === 0">
+        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete selected</ng-container>
+    </button>
+    <button type="button" class="btn btn-sm btn-outline-danger" (click)="emptyTrash()" [disabled]="documentsInTrash.length === 0">
+        <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Empty trash</ng-container>
+    </button>
+</pngx-page-header>
+
+<div class="row mb-3">
+    <ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+</div>
+
+<div class="card border table-responsive mb-3">
+    <table class="table table-striped align-middle shadow-sm mb-0">
+        <thead>
+            <tr>
+            <th scope="col">
+                <div class="form-check m-0 ms-2 me-n2">
+                <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="allToggled" [disabled]="documentsInTrash.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <label class="form-check-label" for="all-objects"></label>
+                </div>
+            </th>
+            <th scope="col" class="fw-normal" i18n>Name</th>
+            <th scope="col" class="fw-normal d-none d-sm-table-cell" i18n>Remaining</th>
+            <th scope="col" class="fw-normal" i18n>Actions</th>
+            </tr>
+        </thead>
+        <tbody>
+            @if (isLoading) {
+                <tr>
+                    <td colspan="5">
+                    <div class="spinner-border spinner-border-sm me-2" role="status"></div>
+                    <ng-container i18n>Loading...</ng-container>
+                    </td>
+                </tr>
+            }
+            @for (document of documentsInTrash; track document.id) {
+                <tr (click)="toggleSelected(document); $event.stopPropagation();">
+                    <td>
+                    <div class="form-check m-0 ms-2 me-n2">
+                        <input type="checkbox" class="form-check-input" id="{{document.id}}" [checked]="selectedDocuments.has(document.id)" (click)="toggleSelected(document); $event.stopPropagation();">
+                        <label class="form-check-label" for="{{document.id}}"></label>
+                    </div>
+                    </td>
+                    <td scope="row">{{ document.title }}</td>
+                    <td scope="row" i18n>{{ getDaysRemaining(document) }} days</td>
+                    <td scope="row">
+                    <div class="btn-group d-block d-sm-none">
+                        <div ngbDropdown container="body" class="d-inline-block">
+                        <button type="button" class="btn btn-link" id="actionsMenuMobile" (click)="$event.stopPropagation()" ngbDropdownToggle>
+                            <i-bs name="three-dots-vertical"></i-bs>
+                        </button>
+                        <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
+                            <button (click)="restore(document)" ngbDropdownItem i18n>Restore</button>
+                            <button (click)="delete(document)" ngbDropdownItem i18n>Delete</button>
+                        </div>
+                        </div>
+                    </div>
+                    <div class="btn-group d-none d-sm-block">
+                        <button class="btn btn-sm btn-outline-secondary" (click)="restore(document); $event.stopPropagation();">
+                            <i-bs width="1em" height="1em" name="arrow-counterclockwise"></i-bs>&nbsp;<ng-container i18n>Restore</ng-container>
+                        </button>
+                        <button class="btn btn-sm btn-outline-danger" (click)="delete(document); $event.stopPropagation();">
+                            <i-bs width="1em" height="1em" name="trash"></i-bs>&nbsp;<ng-container i18n>Delete</ng-container>
+                        </button>
+                    </div>
+                    </td>
+                </tr>
+            }
+        </tbody>
+    </table>
+</div>
+
+@if (!isLoading) {
+    <div class="d-flex mb-2">
+        <div>
+            <ng-container i18n>{totalDocuments, plural, =1 {One document in trash} other {{{totalDocuments || 0}} total documents in trash}}</ng-container>
+            @if (selectedDocuments.size > 0) {
+                &nbsp;({{selectedDocuments.size}} selected)
+            }
+        </div>
+        @if (documentsInTrash.length > 20) {
+            <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="totalDocuments" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+        }
+    </div>
+}

src-ui/src/app/components/admin/trash/trash.component.spec.ts

@@ -0,0 +1,163 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { TrashComponent } from './trash.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { PageHeaderComponent } from '../../common/page-header/page-header.component'
+import {
+  NgbModal,
+  NgbPaginationModule,
+  NgbPopoverModule,
+} from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { TrashService } from 'src/app/services/trash.service'
+import { of } from 'rxjs'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { By } from '@angular/platform-browser'
+
+const documentsInTrash = [
+  {
+    id: 1,
+    name: 'test1',
+    created: new Date('2023-03-01T10:26:03.093116Z'),
+    deleted_at: new Date('2023-03-01T10:26:03.093116Z'),
+  },
+  {
+    id: 2,
+    name: 'test2',
+    created: new Date('2023-03-01T10:26:03.093116Z'),
+    deleted_at: new Date('2023-03-01T10:26:03.093116Z'),
+  },
+]
+
+describe('TrashComponent', () => {
+  let component: TrashComponent
+  let fixture: ComponentFixture<TrashComponent>
+  let trashService: TrashService
+  let modalService: NgbModal
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [
+        TrashComponent,
+        PageHeaderComponent,
+        ConfirmDialogComponent,
+      ],
+      imports: [
+        HttpClientTestingModule,
+        FormsModule,
+        ReactiveFormsModule,
+        NgbPopoverModule,
+        NgbPaginationModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(TrashComponent)
+    trashService = TestBed.inject(TrashService)
+    modalService = TestBed.inject(NgbModal)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should call correct service method on reload', () => {
+    const trashSpy = jest.spyOn(trashService, 'getTrash')
+    trashSpy.mockReturnValue(
+      of({
+        count: 2,
+        all: documentsInTrash.map((d) => d.id),
+        results: documentsInTrash,
+      })
+    )
+    component.reload()
+    expect(trashSpy).toHaveBeenCalled()
+    expect(component.documentsInTrash).toEqual(documentsInTrash)
+  })
+
+  it('should support delete document', () => {
+    const trashSpy = jest.spyOn(trashService, 'emptyTrash')
+    let modal
+    modalService.activeInstances.subscribe((instances) => {
+      modal = instances[0]
+    })
+    trashSpy.mockReturnValue(of('OK'))
+    component.delete(documentsInTrash[0])
+    expect(modal).toBeDefined()
+    modal.componentInstance.confirmClicked.next()
+    expect(trashSpy).toHaveBeenCalled()
+  })
+
+  it('should support empty trash', () => {
+    const trashSpy = jest.spyOn(trashService, 'emptyTrash')
+    let modal
+    modalService.activeInstances.subscribe((instances) => {
+      modal = instances[instances.length - 1]
+    })
+    trashSpy.mockReturnValue(of('OK'))
+    component.emptyTrash()
+    expect(modal).toBeDefined()
+    modal.componentInstance.confirmClicked.next()
+    expect(trashSpy).toHaveBeenCalled()
+    modal.close()
+    component.emptyTrash(new Set([1, 2]))
+    modal.componentInstance.confirmClicked.next()
+    expect(trashSpy).toHaveBeenCalledWith([1, 2])
+  })
+
+  it('should support restore document', () => {
+    const restoreSpy = jest.spyOn(trashService, 'restoreDocuments')
+    const reloadSpy = jest.spyOn(component, 'reload')
+    restoreSpy.mockReturnValue(of('OK'))
+    component.restore(documentsInTrash[0])
+    expect(restoreSpy).toHaveBeenCalledWith([documentsInTrash[0].id])
+    expect(reloadSpy).toHaveBeenCalled()
+  })
+
+  it('should support restore all documents', () => {
+    const restoreSpy = jest.spyOn(trashService, 'restoreDocuments')
+    const reloadSpy = jest.spyOn(component, 'reload')
+    restoreSpy.mockReturnValue(of('OK'))
+    component.restoreAll()
+    expect(restoreSpy).toHaveBeenCalled()
+    expect(reloadSpy).toHaveBeenCalled()
+    component.restoreAll(new Set([1, 2]))
+    expect(restoreSpy).toHaveBeenCalledWith([1, 2])
+  })
+
+  it('should support toggle all items in view', () => {
+    component.documentsInTrash = documentsInTrash
+    expect(component.selectedDocuments.size).toEqual(0)
+    const toggleAllSpy = jest.spyOn(component, 'toggleAll')
+    const checkButton = fixture.debugElement.queryAll(
+      By.css('input.form-check-input')
+    )[0]
+    checkButton.nativeElement.dispatchEvent(new Event('click'))
+    checkButton.nativeElement.checked = true
+    checkButton.nativeElement.dispatchEvent(new Event('click'))
+    expect(toggleAllSpy).toHaveBeenCalled()
+    expect(component.selectedDocuments.size).toEqual(documentsInTrash.length)
+  })
+
+  it('should support toggle item', () => {
+    component.selectedDocuments = new Set([1])
+    component.toggleSelected(documentsInTrash[0])
+    expect(component.selectedDocuments.size).toEqual(0)
+    component.toggleSelected(documentsInTrash[0])
+    expect(component.selectedDocuments.size).toEqual(1)
+  })
+
+  it('should support clear selection', () => {
+    component.selectedDocuments = new Set([1])
+    component.clearSelection()
+    expect(component.selectedDocuments.size).toEqual(0)
+  })
+
+  it('should correctly display days remaining', () => {
+    expect(component.getDaysRemaining(documentsInTrash[0])).toBeLessThan(0)
+    const tenDaysAgo = new Date()
+    tenDaysAgo.setDate(tenDaysAgo.getDate() - 10)
+    expect(
+      component.getDaysRemaining({ deleted_at: tenDaysAgo })
+    ).toBeGreaterThan(0) // 10 days ago but depends on month
+  })
+})

src-ui/src/app/components/admin/trash/trash.component.ts

@@ -0,0 +1,137 @@
+import { Component, OnDestroy } from '@angular/core'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import { Document } from 'src/app/data/document'
+import { ToastService } from 'src/app/services/toast.service'
+import { TrashService } from 'src/app/services/trash.service'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { Subject, takeUntil } from 'rxjs'
+import { SettingsService } from 'src/app/services/settings.service'
+import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
+
+@Component({
+  selector: 'pngx-trash',
+  templateUrl: './trash.component.html',
+  styleUrl: './trash.component.scss',
+})
+export class TrashComponent implements OnDestroy {
+  public documentsInTrash: Document[] = []
+  public selectedDocuments: Set<number> = new Set()
+  public allToggled: boolean = false
+  public page: number = 1
+  public totalDocuments: number
+  public isLoading: boolean = false
+  unsubscribeNotifier: Subject<void> = new Subject()
+
+  constructor(
+    private trashService: TrashService,
+    private toastService: ToastService,
+    private modalService: NgbModal,
+    private settingsService: SettingsService
+  ) {
+    this.reload()
+  }
+
+  ngOnDestroy() {
+    this.unsubscribeNotifier.next()
+    this.unsubscribeNotifier.complete()
+  }
+
+  reload() {
+    this.isLoading = true
+    this.trashService.getTrash(this.page).subscribe((r) => {
+      this.documentsInTrash = r.results
+      this.totalDocuments = r.count
+      this.isLoading = false
+      this.selectedDocuments.clear()
+    })
+  }
+
+  delete(document: Document) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete this document.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Delete`
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        this.trashService.emptyTrash([document.id]).subscribe(() => {
+          this.toastService.showInfo($localize`Document deleted`)
+          modal.close()
+          this.reload()
+        })
+      })
+  }
+
+  emptyTrash(documents?: Set<number>) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete`
+    modal.componentInstance.messageBold = documents
+      ? $localize`This operation will permanently delete the selected documents.`
+      : $localize`This operation will permanently delete all documents in the trash.`
+    modal.componentInstance.message = $localize`This operation cannot be undone.`
+    modal.componentInstance.btnClass = 'btn-danger'
+    modal.componentInstance.btnCaption = $localize`Delete`
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.trashService
+          .emptyTrash(documents ? Array.from(documents) : null)
+          .subscribe(() => {
+            this.toastService.showInfo($localize`Document(s) deleted`)
+            this.allToggled = false
+            modal.close()
+            this.reload()
+          })
+      })
+  }
+
+  restore(document: Document) {
+    this.trashService.restoreDocuments([document.id]).subscribe(() => {
+      this.toastService.showInfo($localize`Document restored`)
+      this.reload()
+    })
+  }
+
+  restoreAll(documents: Set<number> = null) {
+    this.trashService
+      .restoreDocuments(documents ? Array.from(documents) : null)
+      .subscribe(() => {
+        this.toastService.showInfo($localize`Document(s) restored`)
+        this.allToggled = false
+        this.reload()
+      })
+  }
+
+  toggleAll(event: PointerEvent) {
+    if ((event.target as HTMLInputElement).checked) {
+      this.selectedDocuments = new Set(this.documentsInTrash.map((t) => t.id))
+    } else {
+      this.clearSelection()
+    }
+  }
+
+  toggleSelected(object: Document) {
+    this.selectedDocuments.has(object.id)
+      ? this.selectedDocuments.delete(object.id)
+      : this.selectedDocuments.add(object.id)
+  }
+
+  clearSelection() {
+    this.allToggled = false
+    this.selectedDocuments.clear()
+  }
+
+  getDaysRemaining(document: Document): number {
+    const delay = this.settingsService.get(SETTINGS_KEYS.EMPTY_TRASH_DELAY)
+    const diff = new Date().getTime() - new Date(document.deleted_at).getTime()
+    const days = Math.ceil(diff / (1000 * 3600 * 24))
+    return delay - days
+  }
+}

src-ui/src/app/components/app-frame/app-frame.component.html

@@ -267,6 +267,13 @@
                 </a>
               </li>
             }
+            <li class="nav-item app-link" *pngxIfPermissions="{ action: PermissionAction.Delete, type: PermissionType.Document }">
+              <a class="nav-link" routerLink="trash" routerLinkActive="active" (click)="closeMenu()" ngbPopover="Trash"
+                i18n-ngbPopover [disablePopover]="!slimSidebarEnabled" placement="end" container="body"
+                triggers="mouseenter:mouseleave" popoverClass="popover-slim">
+                <i-bs class="me-1" name="trash"></i-bs><span>&nbsp;<ng-container i18n>Trash</ng-container></span>
+              </a>
+            </li>
             <li class="nav-item mt-2" tourAnchor="tour.outro">
               <a class="px-3 py-2 text-muted small d-flex align-items-center flex-wrap text-decoration-none"
                 target="_blank" rel="noopener noreferrer" href="https://docs.paperless-ngx.com" ngbPopover="Documentation"

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

@@ -86,14 +86,4 @@ describe('ConfirmDialogComponent', () => {
     expect(closeModalSpy).toHaveBeenCalled()
     expect(confirmSubjectResult).toBeFalsy()
   })
-
-  it('should support delay confirm', fakeAsync(() => {
-    component.confirmButtonEnabled = false
-    component.delayConfirm(1)
-    expect(component.confirmButtonEnabled).toBeFalsy()
-    tick(1500)
-    fixture.detectChanges()
-    expect(component.confirmButtonEnabled).toBeTruthy()
-    discardPeriodicTasks()
-  }))
 })

src-ui/src/app/components/common/confirm-dialog/confirm-dialog.component.ts

@@ -54,26 +54,6 @@ export class ConfirmDialogComponent {
   confirmSubject: Subject<boolean>
   alternativeSubject: Subject<boolean>
 
-  delayConfirm(seconds: number) {
-    const refreshInterval = 0.15 // s
-
-    this.secondsTotal = seconds
-    this.seconds = seconds
-
-    interval(refreshInterval * 1000)
-      .pipe(
-        take(this.secondsTotal / refreshInterval + 2) // need 2 more for animation to complete after 0
-      )
-      .subscribe((count) => {
-        this.seconds = Math.max(
-          0,
-          this.secondsTotal - refreshInterval * (count + 1)
-        )
-        this.confirmButtonEnabled =
-          this.secondsTotal - refreshInterval * count < 0
-      })
-  }
-
   cancel() {
     this.confirmSubject?.next(false)
     this.confirmSubject?.complete()

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

@@ -773,11 +773,11 @@ export class DocumentDetailComponent
     let modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',
     })
-    modal.componentInstance.title = $localize`Confirm delete`
-    modal.componentInstance.messageBold = $localize`Do you really want to delete document "${this.document.title}"?`
-    modal.componentInstance.message = $localize`The files for this document will be deleted permanently. This operation cannot be undone.`
+    modal.componentInstance.title = $localize`Confirm`
+    modal.componentInstance.messageBold = $localize`Do you really want to move the document "${this.document.title}" to the trash?`
+    modal.componentInstance.message = $localize`Documents can be restored prior to permanent deletion.`
     modal.componentInstance.btnClass = 'btn-danger'
-    modal.componentInstance.btnCaption = $localize`Delete document`
+    modal.componentInstance.btnCaption = $localize`Move to trash`
     this.subscribeModalDelete(modal) // so can be re-subscribed if error
   }
 

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.spec.ts

@@ -858,7 +858,7 @@ describe('BulkEditorComponent', () => {
     )
   })
 
-  it('should support bulk delete with confirmation', () => {
+  it('should support bulk delete with confirmation or without', () => {
     let modal: NgbModalRef
     modalService.activeInstances.subscribe((m) => (modal = m[0]))
     jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
@@ -891,6 +891,13 @@ describe('BulkEditorComponent', () => {
     httpTestingController.match(
       `${environment.apiBaseUrl}documents/?page=1&page_size=100000&fields=id`
     ) // listAllFilteredIds
+
+    component.showConfirmationDialogs = false
+    fixture.detectChanges()
+    component.applyDelete()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
   })
 
   it('should not be accessible with insufficient global permissions', () => {

src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.ts

@@ -705,21 +705,24 @@ export class BulkEditorComponent
   }
 
   applyDelete() {
-    let modal = this.modalService.open(ConfirmDialogComponent, {
-      backdrop: 'static',
-    })
-    modal.componentInstance.delayConfirm(5)
-    modal.componentInstance.title = $localize`Delete confirm`
-    modal.componentInstance.messageBold = $localize`This operation will permanently delete ${this.list.selected.size} selected document(s).`
-    modal.componentInstance.message = $localize`This operation cannot be undone.`
-    modal.componentInstance.btnClass = 'btn-danger'
-    modal.componentInstance.btnCaption = $localize`Delete document(s)`
-    modal.componentInstance.confirmClicked
-      .pipe(takeUntil(this.unsubscribeNotifier))
-      .subscribe(() => {
-        modal.componentInstance.buttonsEnabled = false
-        this.executeBulkOperation(modal, 'delete', {})
+    if (this.showConfirmationDialogs) {
+      let modal = this.modalService.open(ConfirmDialogComponent, {
+        backdrop: 'static',
       })
+      modal.componentInstance.title = $localize`Confirm`
+      modal.componentInstance.messageBold = $localize`Move ${this.list.selected.size} selected document(s) to the trash?`
+      modal.componentInstance.message = $localize`Documents can be restored prior to permanent deletion.`
+      modal.componentInstance.btnClass = 'btn-danger'
+      modal.componentInstance.btnCaption = $localize`Move to trash`
+      modal.componentInstance.confirmClicked
+        .pipe(takeUntil(this.unsubscribeNotifier))
+        .subscribe(() => {
+          modal.componentInstance.buttonsEnabled = false
+          this.executeBulkOperation(modal, 'delete', {})
+        })
+    } else {
+      this.executeBulkOperation(null, 'delete', {})
+    }
   }
 
   downloadSelected() {

src-ui/src/app/data/document.ts

@@ -144,6 +144,8 @@ export interface Document extends ObjectWithPermissions {
 
   added?: Date
 
+  deleted_at?: Date
+
   original_file_name?: string
 
   archived_file_name?: string

src-ui/src/app/data/ui-settings.ts

@@ -63,6 +63,7 @@ export const SETTINGS_KEYS = {
     'general-settings:document-editing:remove-inbox-tags',
   SEARCH_DB_ONLY: 'general-settings:search:db-only',
   SEARCH_FULL_TYPE: 'general-settings:search:more-link',
+  EMPTY_TRASH_DELAY: 'general-settings:trash:empty-trash-delay',
 }
 
 export const SETTINGS: UiSetting[] = [
@@ -236,4 +237,9 @@ export const SETTINGS: UiSetting[] = [
     type: 'string',
     default: GlobalSearchType.TITLE_CONTENT,
   },
+  {
+    key: SETTINGS_KEYS.EMPTY_TRASH_DELAY,
+    type: 'number',
+    default: 30,
+  },
 ]

src-ui/src/app/services/trash.service.spec.ts

@@ -0,0 +1,59 @@
+import { TestBed } from '@angular/core/testing'
+
+import { TrashService } from './trash.service'
+import {
+  HttpClientTestingModule,
+  HttpTestingController,
+} from '@angular/common/http/testing'
+import { environment } from 'src/environments/environment'
+
+describe('TrashService', () => {
+  let service: TrashService
+  let httpTestingController: HttpTestingController
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+    })
+    service = TestBed.inject(TrashService)
+    httpTestingController = TestBed.inject(HttpTestingController)
+  })
+
+  it('should call correct endpoint for getTrash', () => {
+    service.getTrash().subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}trash/?page=1`
+    )
+    expect(req.request.method).toEqual('GET')
+  })
+
+  it('should call correct endpoint for emptyTrash', () => {
+    service.emptyTrash().subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}trash/`
+    )
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toEqual({ action: 'empty' })
+
+    service.emptyTrash([1, 2, 3]).subscribe()
+    const req2 = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}trash/`
+    )
+    expect(req2.request.body).toEqual({
+      action: 'empty',
+      documents: [1, 2, 3],
+    })
+  })
+
+  it('should call correct endpoint for restoreDocuments', () => {
+    service.restoreDocuments([1, 2, 3]).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}trash/`
+    )
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toEqual({
+      action: 'restore',
+      documents: [1, 2, 3],
+    })
+  })
+})

src-ui/src/app/services/trash.service.ts

@@ -0,0 +1,37 @@
+import { HttpClient, HttpParams } from '@angular/common/http'
+import { Injectable } from '@angular/core'
+import { Observable } from 'rxjs'
+import { environment } from 'src/environments/environment'
+import { Document } from '../data/document'
+import { Results } from '../data/results'
+
+@Injectable({
+  providedIn: 'root',
+})
+export class TrashService {
+  constructor(private http: HttpClient) {}
+
+  public getTrash(page: number = 1): Observable<Results<Document>> {
+    const httpParams = new HttpParams().set('page', page.toString())
+    return this.http.get<Results<Document>>(`${environment.apiBaseUrl}trash/`, {
+      params: httpParams,
+    })
+  }
+
+  public emptyTrash(documents?: number[]): Observable<any> {
+    const data = {
+      action: 'empty',
+    }
+    if (documents?.length) {
+      data['documents'] = documents
+    }
+    return this.http.post(`${environment.apiBaseUrl}trash/`, data)
+  }
+
+  public restoreDocuments(documents: number[]): Observable<any> {
+    return this.http.post(`${environment.apiBaseUrl}trash/`, {
+      action: 'restore',
+      documents,
+    })
+  }
+}