Docs only

[skip ci]

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

@@ -3,19 +3,19 @@ title="Trash"
 i18n-title
 info="Manage trashed items."
 >
-<button class="btn btn-sm btn-outline-secondary" (click)="clearSelection()" [hidden]="selectedObjects.size === 0">
+<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-danger" (click)="emptyTrash(selectedObjects)" [disabled]="selectedObjects.size === 0">
-  <i-bs name="trash"></i-bs>&nbsp;<ng-container i18n>Delete objects</ng-container>
+<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]="trashedObjects.length === 0">
+<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]="trashedObjects.length" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+    <ngb-pagination class="col-auto" [pageSize]="25" [collectionSize]="documentsInTrash.length" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
   </div>
 
   <div class="card border table-responsive mb-3">
@@ -24,7 +24,7 @@ info="Manage trashed items."
             <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)]="togggleAll" [disabled]="trashedObjects.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
+                <input type="checkbox" class="form-check-input" id="all-objects" [(ngModel)]="togggleAll" [disabled]="documentsInTrash.length === 0" (click)="toggleAll($event); $event.stopPropagation();">
                 <label class="form-check-label" for="all-objects"></label>
                 </div>
             </th>
@@ -42,16 +42,16 @@ info="Manage trashed items."
                     </td>
                 </tr>
             }
-            @for (object of trashedObjects; track object.id) {
-                <tr (click)="toggleSelected(object); $event.stopPropagation();">
+            @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="{{object.id}}" [checked]="selectedObjects.has(object.id)" (click)="toggleSelected(object); $event.stopPropagation();">
-                        <label class="form-check-label" for="{{object.id}}"></label>
+                        <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">{{ object['name'] ?? object['title'] }}</td>
-                    <td scope="row">{{ object['deleted_at'] | customDate }}</td>
+                    <td scope="row">{{ document.title }}</td>
+                    <td scope="row">{{ document.deleted_at | customDate }}</td>
                     <td scope="row">
                     <div class="btn-group d-block d-sm-none">
                         <div ngbDropdown container="body" class="d-inline-block">
@@ -59,16 +59,16 @@ info="Manage trashed items."
                             <i-bs name="three-dots-vertical"></i-bs>
                         </button>
                         <div ngbDropdownMenu aria-labelledby="actionsMenuMobile">
-                            <button (click)="restoreObject(object)" ngbDropdownItem i18n>Restore</button>
-                            <button (click)="deleteObject(object)" ngbDropdownItem i18n>Delete</button>
+                            <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)="restoreObject(object); $event.stopPropagation();">
+                        <button class="btn btn-sm btn-outline-secondary" (click)="restore(document); $event.stopPropagation();">
                         <i-bs width="1em" height="1em" name="restore"></i-bs>&nbsp;<ng-container i18n>Restore</ng-container>
                         </button>
-                        <button class="btn btn-sm btn-outline-danger" (click)="deleteObject(object); $event.stopPropagation();">
+                        <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>
@@ -82,13 +82,13 @@ info="Manage trashed items."
 @if (!isLoading) {
     <div class="d-flex mb-2">
         <div>
-            <ng-container i18n>{trashedObjects.length, plural, =1 {One object in trash} other {{{trashedObjects.length || 0}} total objects in trash}}</ng-container>
-            @if (selectedObjects.size > 0) {
-            &nbsp;({{selectedObjects.size}} selected)
+            <ng-container i18n>{documentsInTrash.length, plural, =1 {One object in trash} other {{{documentsInTrash.length || 0}} total documents in trash}}</ng-container>
+            @if (selectedDocuments.size > 0) {
+            &nbsp;({{selectedDocuments.size}} selected)
             }
         </div>
-        @if (trashedObjects.length > 20) {
-            <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="trashedObjects.length" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
+        @if (documentsInTrash.length > 20) {
+            <ngb-pagination class="ms-auto" [pageSize]="25" [collectionSize]="documentsInTrash.length" [(page)]="page" [maxSize]="5" (pageChange)="reload()" size="sm" aria-label="Pagination"></ngb-pagination>
         }
     </div>
 }

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

@@ -1,57 +1,91 @@
-import { HttpClient } from '@angular/common/http'
-import { Component } from '@angular/core'
-import { ObjectWithId } from 'src/app/data/object-with-id'
+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 { environment } from 'src/environments/environment'
+import { ConfirmDialogComponent } from '../../common/confirm-dialog/confirm-dialog.component'
+import { Subject, takeUntil } from 'rxjs'
 
 @Component({
   selector: 'pngx-trash',
   templateUrl: './trash.component.html',
   styleUrl: './trash.component.scss',
 })
-export class TrashComponent {
-  public trashedObjects: ObjectWithId[] = []
-  public selectedObjects: Set<number> = new Set()
+export class TrashComponent implements OnDestroy {
+  public documentsInTrash: Document[] = []
+  public selectedDocuments: Set<number> = new Set()
   public togggleAll: boolean = false
   public page: number = 1
   public isLoading: boolean = false
+  unsubscribeNotifier: Subject<void> = new Subject()
 
   constructor(
     private trashService: TrashService,
-    private toastService: ToastService
+    private toastService: ToastService,
+    private modalService: NgbModal
   ) {
     this.reload()
   }
 
+  ngOnDestroy() {
+    this.unsubscribeNotifier.next()
+    this.unsubscribeNotifier.complete()
+  }
+
   reload() {
     this.isLoading = true
-    this.trashService.getTrash().subscribe((trash) => {
-      this.trashedObjects = trash
+    this.trashService.getTrash().subscribe((documentsInTrash) => {
+      this.documentsInTrash = documentsInTrash
       this.isLoading = false
-      console.log('Trash:', trash)
+      console.log('Trash:', documentsInTrash)
     })
   }
 
-  deleteObject(object: ObjectWithId) {
-    this.trashService.emptyTrash([object.id]).subscribe(() => {
-      this.toastService.showInfo($localize`Object deleted`)
-      this.reload()
+  delete(document: Document) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
     })
-  }
-
-  emptyTrash(objects: Set<number> = null) {
-    console.log('Emptying trash')
-    this.trashService
-      .emptyTrash(objects ? Array.from(objects) : [])
+    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(() => {
-        this.toastService.showInfo($localize`Object(s) deleted`)
-        this.reload()
+        modal.componentInstance.buttonsEnabled = false
+        this.trashService.emptyTrash([document.id]).subscribe(() => {
+          this.toastService.showInfo($localize`Document deleted`)
+          this.reload()
+        })
       })
   }
 
-  restoreObject(object: ObjectWithId) {
-    this.trashService.restoreObjects([object.id]).subscribe(() => {
+  emptyTrash(documents: Set<number> = null) {
+    let modal = this.modalService.open(ConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Confirm delete`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete ${
+      documents?.size ?? $localize`all`
+    } documents.`
+    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) : [])
+          .subscribe(() => {
+            this.toastService.showInfo($localize`Document(s) deleted`)
+            this.reload()
+          })
+      })
+  }
+
+  restore(document: Document) {
+    this.trashService.restoreDocuments([document.id]).subscribe(() => {
       this.toastService.showInfo($localize`Object restored`)
       this.reload()
     })
@@ -59,7 +93,7 @@ export class TrashComponent {
 
   restoreAll(objects: Set<number> = null) {
     this.trashService
-      .restoreObjects(objects ? Array.from(this.selectedObjects) : [])
+      .restoreDocuments(objects ? Array.from(this.selectedDocuments) : [])
       .subscribe(() => {
         this.toastService.showInfo($localize`Object(s) restored`)
         this.reload()
@@ -68,20 +102,20 @@ export class TrashComponent {
 
   toggleAll(event: PointerEvent) {
     if ((event.target as HTMLInputElement).checked) {
-      this.selectedObjects = new Set(this.trashedObjects.map((t) => t.id))
+      this.selectedDocuments = new Set(this.documentsInTrash.map((t) => t.id))
     } else {
       this.clearSelection()
     }
   }
 
-  toggleSelected(object: ObjectWithId) {
-    this.selectedObjects.has(object.id)
-      ? this.selectedObjects.delete(object.id)
-      : this.selectedObjects.add(object.id)
+  toggleSelected(object: Document) {
+    this.selectedDocuments.has(object.id)
+      ? this.selectedDocuments.delete(object.id)
+      : this.selectedDocuments.add(object.id)
   }
 
   clearSelection() {
     this.togggleAll = false
-    this.selectedObjects.clear()
+    this.selectedDocuments.clear()
   }
 }

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.ts

@@ -708,8 +708,9 @@ export class BulkEditorComponent
     let modal = this.modalService.open(ConfirmDialogComponent, {
       backdrop: 'static',
     })
-    modal.componentInstance.title = $localize`Delete confirm`
+    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

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

@@ -2,7 +2,7 @@ import { HttpClient } from '@angular/common/http'
 import { Injectable } from '@angular/core'
 import { Observable } from 'rxjs'
 import { environment } from 'src/environments/environment'
-import { ObjectWithId } from '../data/object-with-id'
+import { Document } from '../data/document'
 
 @Injectable({
   providedIn: 'root',
@@ -10,18 +10,18 @@ import { ObjectWithId } from '../data/object-with-id'
 export class TrashService {
   constructor(private http: HttpClient) {}
 
-  public getTrash(): Observable<ObjectWithId[]> {
-    return this.http.get<ObjectWithId[]>(`${environment.apiBaseUrl}trash/`)
+  public getTrash(): Observable<Document[]> {
+    return this.http.get<Document[]>(`${environment.apiBaseUrl}trash/`)
   }
 
-  public emptyTrash(documents: number[] = []) {
+  public emptyTrash(documents: number[] = []): Observable<any> {
     return this.http.post(`${environment.apiBaseUrl}trash/`, {
       action: 'empty',
       documents,
     })
   }
 
-  public restoreObjects(documents: number[]): Observable<any> {
+  public restoreDocuments(documents: number[]): Observable<any> {
     return this.http.post(`${environment.apiBaseUrl}trash/`, {
       action: 'restore',
       documents,