Feature: documents trash aka soft delete (#6944)

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
+  }
+}