Enhancement: delete pages PDF action (#6772)

2025-07-28 18:24:38 -05:00 · 2024-05-22 16:01:15 -07:00
parent 2116964f67
commit 3e62f13f96
16 changed files with 658 additions and 142 deletions
--- a/src-ui/src/app/app.module.ts
+++ b/src-ui/src/app/app.module.ts
@@ -124,6 +124,7 @@ import { DragDropSelectComponent } from './components/common/input/drag-drop-sel
 import { CustomFieldDisplayComponent } from './components/common/custom-field-display/custom-field-display.component'
 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 {
  airplane,
  archive,
@@ -160,6 +161,7 @@ import {
  clipboardCheckFill,
  clipboardFill,
  dash,
+  dashCircle,
  diagram3,
  dice5,
  doorOpen,
@@ -174,6 +176,7 @@ import {
  fileEarmarkCheck,
  fileEarmarkFill,
  fileEarmarkLock,
+  fileEarmarkMinus,
  files,
  fileText,
  filter,
@@ -259,6 +262,7 @@ const icons = {
  clipboardCheckFill,
  clipboardFill,
  dash,
+  dashCircle,
  diagram3,
  dice5,
  doorOpen,
@@ -273,6 +277,7 @@ const icons = {
  fileEarmarkCheck,
  fileEarmarkFill,
  fileEarmarkLock,
+  fileEarmarkMinus,
  files,
  fileText,
  filter,
@@ -491,6 +496,7 @@ function initializeApp(settings: SettingsService) {
    CustomFieldDisplayComponent,
    GlobalSearchComponent,
    HotkeyDialogComponent,
+    DeletePagesConfirmDialogComponent,
  ],
  imports: [
    BrowserModule,
--- a/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.html
@@ -0,0 +1,54 @@
+<div class="modal-header">
+    <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+    <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+    </button>
+</div>
+<div class="modal-body">
+    <div class="row">
+        <div class="col">
+            <div class="btn-toolbar flex-nowrap">
+                <div class="input-group input-group-sm">
+                    <div class="input-group-text" i18n>Page</div>
+                    <input class="form-control mw-60" type="number" min="1" [(ngModel)]="currentPage" />
+                    <div class="input-group-text" i18n>of {{totalPages}}</div>
+                </div>
+                <div class="input-group input-group-sm ms-auto">
+                    <span class="input-group-text" i18n>Pages to remove</span>
+                    <input [ngModel]="pagesString" class="form-control" disabled />
+                </div>
+            </div>
+            <div class="pdf-viewer-container w-100 mt-3">
+                <pdf-viewer #pdfViewer [src]="pdfSrc" [(page)]="currentPage"
+                [original-size]="false"
+                [zoom]="1"
+                zoom-scale="page-fit"
+                [render-text]="false"
+                (pagerendered)="pageRendered($event)"
+                (after-load-complete)="pdfPreviewLoaded($event)">
+                </pdf-viewer>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="modal-footer flex-nowrap">
+    <div>
+        @if (message) {
+            <p [innerHTML]="message | safeHtml"></p>
+        }
+        @if (messageBold) {
+            <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p>
+        }
+    </div>
+    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
+            <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
+        </button>
+    <button type="button" class="btn" [class]="btnClass" (click)="confirm()" [disabled]="!confirmButtonEnabled || !buttonsEnabled">
+        {{btnCaption}}
+    </button>
+</div>
+
+<ng-template #pageCheckOverlay let-page="page" let-pages="pages">
+    <div class="position-absolute top-0 start-0 w-100 h-100 p-2" (click)="pageCheckChanged(page)">
+        <input type="checkbox" class="form-check-input" />
+    </div>
+</ng-template>
--- a/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss
+++ b/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.scss
@@ -0,0 +1,28 @@
+.pdf-viewer-container {
+  background-color: gray;
+  height: 350px;
+
+  pdf-viewer {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.mw-60 {
+  max-width: 60px;
+}
+
+div.position-absolute:has(.form-check-input:checked) {
+  background-color: rgba(var(--bs-dark-rgb), 0.4);
+}
+
+.form-check-input {
+  &:checked {
+    background-color: var(--bs-danger);
+    border-color: var(--bs-danger);
+  }
+  &:focus {
+    box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb), var(--pngx-focus-alpha));
+    border-color: var(--bs-danger);
+  }
+}
--- a/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.spec.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.spec.ts
@@ -0,0 +1,55 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { DeletePagesConfirmDialogComponent } from './delete-pages-confirm-dialog.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+import { PdfViewerComponent } from 'ng2-pdf-viewer'
+
+describe('DeletePagesConfirmDialogComponent', () => {
+  let component: DeletePagesConfirmDialogComponent
+  let fixture: ComponentFixture<DeletePagesConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [DeletePagesConfirmDialogComponent, PdfViewerComponent],
+      providers: [NgbActiveModal, SafeHtmlPipe],
+      imports: [
+        HttpClientTestingModule,
+        NgxBootstrapIconsModule.pick(allIcons),
+        FormsModule,
+        ReactiveFormsModule,
+      ],
+    }).compileComponents()
+    fixture = TestBed.createComponent(DeletePagesConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should return a string with comma-separated pages', () => {
+    component.pages = [1, 2, 3, 4]
+    expect(component.pagesString).toEqual('1, 2, 3, 4')
+  })
+
+  it('should update totalPages when pdf is loaded', () => {
+    component.pdfPreviewLoaded({ numPages: 5 } as any)
+    expect(component.totalPages).toEqual(5)
+  })
+
+  it('should update checks when page is rendered', () => {
+    const event = {
+      target: document.createElement('div'),
+      detail: { pageNumber: 1 },
+    } as any
+    component.pageRendered(event)
+    expect(component['checks'].length).toEqual(1)
+  })
+
+  it('should update pages when page check is changed', () => {
+    component.pageCheckChanged(1)
+    expect(component.pages).toEqual([1])
+    component.pageCheckChanged(1)
+    expect(component.pages).toEqual([])
+  })
+})
--- a/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.ts
+++ b/src-ui/src/app/components/common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component.ts
@@ -0,0 +1,64 @@
+import { Component, TemplateRef, ViewChild } from '@angular/core'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+import { PDFDocumentProxy, PdfViewerComponent } from 'ng2-pdf-viewer'
+
+@Component({
+  selector: 'pngx-delete-pages-confirm-dialog',
+  templateUrl: './delete-pages-confirm-dialog.component.html',
+  styleUrl: './delete-pages-confirm-dialog.component.scss',
+})
+export class DeletePagesConfirmDialogComponent extends ConfirmDialogComponent {
+  public documentID: number
+  public pages: number[] = []
+  public currentPage: number = 1
+  public totalPages: number
+
+  @ViewChild('pdfViewer') pdfViewer: PdfViewerComponent
+  @ViewChild('pageCheckOverlay') pageCheckOverlay!: TemplateRef<any>
+  private checks: HTMLElement[] = []
+
+  public get pagesString(): string {
+    return this.pages.join(', ')
+  }
+
+  public get pdfSrc(): string {
+    return this.documentService.getPreviewUrl(this.documentID)
+  }
+
+  constructor(
+    activeModal: NgbActiveModal,
+    private documentService: DocumentService
+  ) {
+    super(activeModal)
+  }
+
+  public pdfPreviewLoaded(pdf: PDFDocumentProxy) {
+    this.totalPages = pdf.numPages
+  }
+
+  pageRendered(event: CustomEvent) {
+    const pageDiv = event.target as HTMLDivElement
+    const check = this.pageCheckOverlay.createEmbeddedView({
+      page: event.detail.pageNumber,
+    })
+    this.checks[event.detail.pageNumber - 1] = check.rootNodes[0]
+    pageDiv?.insertBefore(check.rootNodes[0], pageDiv.firstChild)
+    this.updateChecks()
+  }
+
+  pageCheckChanged(pageNumber: number) {
+    if (!this.pages.includes(pageNumber)) this.pages.push(pageNumber)
+    else if (this.pages.includes(pageNumber))
+      this.pages.splice(this.pages.indexOf(pageNumber), 1)
+    this.updateChecks()
+  }
+
+  private updateChecks() {
+    this.checks.forEach((check, i) => {
+      const input = check.getElementsByTagName('input')[0]
+      input.checked = this.pages.includes(i + 1)
+    })
+  }
+}
--- a/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.html
+++ b/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.html
@@ -21,21 +21,19 @@
            </button>
        </div>
    </div>
-    <div class="row mt-4">
-        <div class="col">
-            @if (messageBold) {
-              <p><b>{{messageBold}}</b></p>
-            }
-            @if (message) {
-              <p class="mb-0" [innerHTML]="message | safeHtml"></p>
-            }
-        </div>
-    </div>
    @if (showPDFNote) {
        <p class="small text-muted fst-italic mt-4" i18n>Note that only PDFs will be rotated.</p>
    }
 </div>
-<div class="modal-footer">
+<div class="modal-footer flex-nowrap">
+    <div class="col">
+        @if (message) {
+            <p [innerHTML]="message | safeHtml"></p>
+        }
+        @if (messageBold) {
+          <p class="mb-0 small"><b [innerHTML]="messageBold | safeHtml"></b></p>
+        }
+    </div>
    <button type="button" class="btn" [class]="cancelBtnClass" (click)="cancel()" [disabled]="!buttonsEnabled">
        <span class="d-inline-block" style="padding-bottom: 1px;">{{cancelBtnCaption}}</span>
    </button>
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -1,5 +1,5 @@
 <pngx-page-header [(title)]="title">
-  @if (contentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
+  @if (archiveContentRenderType === ContentRenderType.PDF && !useNativePdfViewer) {
    @if (previewNumPages) {
      <div class="input-group input-group-sm d-none d-md-flex">
        <div class="input-group-text" i18n>Page</div>
@@ -53,13 +53,17 @@
        <i-bs width="1em" height="1em" name="diagram-3"></i-bs>&nbsp;<span i18n>More like this</span>
      </button>

-      <button ngbDropdownItem (click)="splitDocument()" [disabled]="contentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
+      <button ngbDropdownItem (click)="splitDocument()" [disabled]="archiveContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
        <i-bs width="1em" height="1em" name="scissors"></i-bs>&nbsp;<span i18n>Split</span>
      </button>

-      <button ngbDropdownItem (click)="rotateDocument()" [disabled]="!userIsOwner || metadata?.original_mime_type !== 'application/pdf'">
+      <button ngbDropdownItem (click)="rotateDocument()" [disabled]="!userIsOwner || originalContentRenderType !== ContentRenderType.PDF">
        <i-bs name="arrow-clockwise"></i-bs>&nbsp;<ng-container i18n>Rotate</ng-container>
      </button>
+
+      <button ngbDropdownItem (click)="deletePages()" [disabled]="!userIsOwner || originalContentRenderType !== ContentRenderType.PDF || previewNumPages === 1">
+        <i-bs name="file-earmark-minus"></i-bs>&nbsp;<ng-container i18n>Delete page(s)</ng-container>
+      </button>
    </div>
  </div>

@@ -343,7 +347,7 @@
      </div>
    </div>
  } @else {
-    @switch (contentRenderType) {
+    @switch (archiveContentRenderType) {
      @case (ContentRenderType.PDF) {
        @if (!useNativePdfViewer) {
          <div class="preview-sticky pdf-viewer-container">
--- a/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.spec.ts
@@ -81,6 +81,7 @@ import { environment } from 'src/environments/environment'
 import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
 import { PdfViewerModule } from 'ng2-pdf-viewer'
+import { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'

 const doc: Document = {
  id: 3,
@@ -178,6 +179,7 @@ describe('DocumentDetailComponent', () => {
        CustomFieldsDropdownComponent,
        SplitConfirmDialogComponent,
        RotateConfirmDialogComponent,
+        DeletePagesConfirmDialogComponent,
      ],
      providers: [
        DocumentTitlePipe,
@@ -1035,7 +1037,9 @@ describe('DocumentDetailComponent', () => {
    component.metadata = { has_archive_version: true }
    initNormally()
    fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(component.ContentRenderType.PDF)
+    expect(component.archiveContentRenderType).toEqual(
+      component.ContentRenderType.PDF
+    )
    expect(
      fixture.debugElement.query(By.css('pdf-viewer-container'))
    ).not.toBeUndefined()
@@ -1045,7 +1049,7 @@ describe('DocumentDetailComponent', () => {
      original_mime_type: 'text/plain',
    }
    fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(
+    expect(component.archiveContentRenderType).toEqual(
      component.ContentRenderType.Text
    )
    expect(
@@ -1057,7 +1061,7 @@ describe('DocumentDetailComponent', () => {
      original_mime_type: 'image/jpg',
    }
    fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(
+    expect(component.archiveContentRenderType).toEqual(
      component.ContentRenderType.Image
    )
    expect(
@@ -1070,7 +1074,7 @@ describe('DocumentDetailComponent', () => {
        'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    }
    fixture.detectChanges()
-    expect(component.contentRenderType).toEqual(
+    expect(component.archiveContentRenderType).toEqual(
      component.ContentRenderType.Other
    )
    expect(
@@ -1130,6 +1134,31 @@ describe('DocumentDetailComponent', () => {
    req.flush(true)
  })

+  it('should support delete pages', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    initNormally()
+    component.deletePages()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.documentID = doc.id
+    modal.componentInstance.pages = [1, 2]
+    modal.componentInstance.confirm()
+    let req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    expect(req.request.body).toEqual({
+      documents: [doc.id],
+      method: 'delete_pages',
+      parameters: { pages: [1, 2] },
+    })
+    req.error(new ProgressEvent('failed'))
+    modal.componentInstance.confirm()
+    req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}documents/bulk_edit/`
+    )
+    req.flush(true)
+  })
+
  it('should support keyboard shortcuts', () => {
    initNormally()

--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -68,6 +68,7 @@ import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
 import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
 import { SplitConfirmDialogComponent } from '../common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component'
 import { RotateConfirmDialogComponent } from '../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
+import { DeletePagesConfirmDialogComponent } from '../common/confirm-dialog/delete-pages-confirm-dialog/delete-pages-confirm-dialog.component'
 import { HotKeyService } from 'src/app/services/hot-key.service'
 import { PDFDocumentProxy } from 'ng2-pdf-viewer'

@@ -216,19 +217,27 @@ export class DocumentDetailComponent
    return this.settings.get(SETTINGS_KEYS.USE_NATIVE_PDF_VIEWER)
  }

-  get contentRenderType(): ContentRenderType {
-    if (!this.metadata) return ContentRenderType.Unknown
-    const contentType = this.metadata?.has_archive_version
-      ? 'application/pdf'
-      : this.metadata?.original_mime_type
+  get archiveContentRenderType(): ContentRenderType {
+    return this.getRenderType(
+      this.metadata?.has_archive_version
+        ? 'application/pdf'
+        : this.metadata?.original_mime_type
+    )
+  }

-    if (contentType === 'application/pdf') {
+  get originalContentRenderType(): ContentRenderType {
+    return this.getRenderType(this.metadata?.original_mime_type)
+  }
+
+  private getRenderType(mimeType: string): ContentRenderType {
+    if (!mimeType) return ContentRenderType.Unknown
+    if (mimeType === 'application/pdf') {
      return ContentRenderType.PDF
    } else if (
-      ['text/plain', 'application/csv', 'text/csv'].includes(contentType)
+      ['text/plain', 'application/csv', 'text/csv'].includes(mimeType)
    ) {
      return ContentRenderType.Text
-    } else if (contentType?.indexOf('image/') === 0) {
+    } else if (mimeType?.indexOf('image/') === 0) {
      return ContentRenderType.Image
    }
    return ContentRenderType.Other
@@ -1138,7 +1147,6 @@ export class DocumentDetailComponent
    })
    modal.componentInstance.title = $localize`Rotate confirm`
    modal.componentInstance.messageBold = $localize`This operation will permanently rotate the original version of the current document.`
-    modal.componentInstance.message = $localize`This will alter the original copy.`
    modal.componentInstance.btnCaption = $localize`Proceed`
    modal.componentInstance.documentID = this.document.id
    modal.componentInstance.showPDFNote = false
@@ -1173,4 +1181,41 @@ export class DocumentDetailComponent
          })
      })
  }
+
+  deletePages() {
+    let modal = this.modalService.open(DeletePagesConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    modal.componentInstance.title = $localize`Delete pages confirm`
+    modal.componentInstance.messageBold = $localize`This operation will permanently delete the selected pages from the original document.`
+    modal.componentInstance.btnCaption = $localize`Proceed`
+    modal.componentInstance.documentID = this.document.id
+    modal.componentInstance.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        modal.componentInstance.buttonsEnabled = false
+        this.documentsService
+          .bulkEdit([this.document.id], 'delete_pages', {
+            pages: modal.componentInstance.pages,
+          })
+          .pipe(first(), takeUntil(this.unsubscribeNotifier))
+          .subscribe({
+            next: () => {
+              this.toastService.showInfo(
+                $localize`Delete pages operation will begin in the background. Close and re-open or reload this document after the operation has completed to see the changes.`
+              )
+              modal.close()
+            },
+            error: (error) => {
+              if (modal) {
+                modal.componentInstance.buttonsEnabled = true
+              }
+              this.toastService.showError(
+                $localize`Error executing delete pages operation`,
+                error
+              )
+            },
+          })
+      })
+  }
 }