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/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>