+
-
diff --git a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.scss b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.scss
index 72bb4e5b5..166990e19 100644
--- a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.scss
+++ b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.scss
@@ -1,9 +1,62 @@
-.pdf-viewer-container {
- background-color: gray;
- height: 120px;
- pdf-viewer {
- width: 100%;
- height: 100%;
+
+.page-item {
+ position: relative;
+ cursor: pointer;
+ border: 1px solid transparent;
+ background-origin: border-box;
+
+ &.selected {
+ background-color: var(--pngx-primary-darken-5);
+ }
+}
+
+.pdf-viewer-container {
+ background-color: gray;
+ height: 200px;
+
+ pdf-viewer {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.hover-actions {
+ position: absolute;
+ top: 0;
+ right: 0;
+ display: none;
+}
+
+.page-item:hover .hover-actions {
+ display: block;
+}
+
+.document-check {
+ display: none;
+ position: absolute;
+ top: 0;
+ left: 0;
+ padding: 0.5rem;
+ border-top-left-radius: 0.25rem;
+ border-bottom-right-radius: 0.25rem;
+ pointer-events: none;
+
+ .form-check {
+ padding: 0;
+ min-height: 0;
+ margin-bottom: 0;
+
+ .form-check-input {
+ margin-left: 0;
}
}
+}
+
+.page-item:hover .document-check, .selected .document-check {
+ display: block;
+}
+
+.z-10 {
+ z-index: 10;
+}
diff --git a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.spec.ts b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.spec.ts
index d258e7462..47641d309 100644
--- a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.spec.ts
+++ b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.spec.ts
@@ -23,13 +23,19 @@ describe('PDFEditorComponent', () => {
fixture.detectChanges()
})
- it('should rotate and reorder pages', () => {
+ it('should rotate, delete and reorder pages', () => {
component.pages = [
- { page: 1, rotate: 0, splitAfter: false },
- { page: 2, rotate: 0, splitAfter: false },
+ { page: 1, rotate: 0, splitAfter: false, selected: false },
+ { page: 2, rotate: 0, splitAfter: false, selected: false },
]
- component.rotate(0)
+ component.toggleSelection(0)
+ component.rotateSelected(90)
expect(component.pages[0].rotate).toBe(90)
+ component.toggleSelection(0) // deselect
+ component.toggleSelection(1)
+ component.deleteSelected()
+ expect(component.pages.length).toBe(1)
+ component.pages.push({ page: 2, rotate: 0, splitAfter: false })
component.drop({ previousIndex: 0, currentIndex: 1 } as any)
expect(component.pages[0].page).toBe(2)
})
diff --git a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts
index ebedbc9c0..d783d1406 100644
--- a/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts
+++ b/src-ui/src/app/components/common/pdf-editor/pdf-editor.component.ts
@@ -3,6 +3,7 @@ import {
DragDropModule,
moveItemInArray,
} from '@angular/cdk/drag-drop'
+import { CommonModule } from '@angular/common'
import { Component, OnInit, inject } from '@angular/core'
import { FormsModule } from '@angular/forms'
import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
@@ -15,6 +16,7 @@ interface PageOperation {
page: number
rotate: number
splitAfter: boolean
+ selected?: boolean
}
@Component({
@@ -22,6 +24,7 @@ interface PageOperation {
templateUrl: './pdf-editor.component.html',
styleUrl: './pdf-editor.component.scss',
imports: [
+ CommonModule,
DragDropModule,
FormsModule,
PdfViewerModule,
@@ -52,11 +55,16 @@ export class PDFEditorComponent
page: i + 1,
rotate: 0,
splitAfter: false,
+ selected: false,
}))
}
- rotate(i: number) {
- this.pages[i].rotate = (this.pages[i].rotate + 90) % 360
+ rotateSelected(dir: number) {
+ for (let p of this.pages) {
+ if (p.selected) {
+ p.rotate = (p.rotate + dir + 360) % 360
+ }
+ }
}
remove(i: number) {
@@ -67,6 +75,18 @@ export class PDFEditorComponent
this.pages[i].splitAfter = !this.pages[i].splitAfter
}
+ toggleSelection(i: number) {
+ this.pages[i].selected = !this.pages[i].selected
+ }
+
+ deleteSelected() {
+ this.pages = this.pages.filter((p) => !p.selected)
+ }
+
+ hasSelection(): boolean {
+ return this.pages.some((p) => p.selected)
+ }
+
drop(event: CdkDragDrop
) {
moveItemInArray(this.pages, event.previousIndex, event.currentIndex)
}