+
+{{title}}
+ +
+
+
diff --git a/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.scss b/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.scss
new file mode 100644
index 000000000..c780e5a35
--- /dev/null
+++ b/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.scss
@@ -0,0 +1,3 @@
+.list-group-item {
+ cursor: move;
+}
diff --git a/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.spec.ts b/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.spec.ts
new file mode 100644
index 000000000..8b9bf3898
--- /dev/null
+++ b/src-ui/src/app/components/common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component.spec.ts
@@ -0,0 +1,73 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { MergeConfirmDialogComponent } from './merge-confirm-dialog.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { FormsModule, ReactiveFormsModule } from '@angular/forms'
+
+describe('MergeConfirmDialogComponent', () => {
+ let component: MergeConfirmDialogComponent
+ let fixture: ComponentFixture{{message}}
+
+
+
+ -
+ @for (documentID of documentIDs; track documentID) {
+
-
+
+ {{getDocument(documentID)?.title}} +
+ }
+
+
+
+
+ Note that only PDFs will be included.
+
+
+{{title}}
+ +
+
+
diff --git a/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.scss b/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.scss
new file mode 100644
index 000000000..93e950ac1
--- /dev/null
+++ b/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.scss
@@ -0,0 +1,3 @@
+img {
+ transition: all 0.25s ease;
+}
diff --git a/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.spec.ts b/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.spec.ts
new file mode 100644
index 000000000..d70e73747
--- /dev/null
+++ b/src-ui/src/app/components/common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component.spec.ts
@@ -0,0 +1,60 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { RotateConfirmDialogComponent } from './rotate-confirm-dialog.component'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { SafeHtmlPipe } from 'src/app/pipes/safehtml.pipe'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+
+describe('RotateConfirmDialogComponent', () => {
+ let component: RotateConfirmDialogComponent
+ let fixture: ComponentFixture
+
+
+
+
+
+ @if (documentID) {
+ ![]()
+ }
+
+
+
+
+
+
+ @if (showPDFNote) {
+
+ @if (messageBold) {
+
+ {{messageBold}}
+ } + @if (message) { + + } +Note that only PDFs will be rotated.
+ } +
+
+{{title}}
+ +
+
+
diff --git a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss
new file mode 100644
index 000000000..c2fc99d55
--- /dev/null
+++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.scss
@@ -0,0 +1,9 @@
+.pdf-viewer-container {
+ background-color: gray;
+ height: 300px;
+
+ pngx-pdf-viewer {
+ width: 100%;
+ height: 100%;
+ }
+ }
diff --git a/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts
new file mode 100644
index 000000000..b88835895
--- /dev/null
+++ b/src-ui/src/app/components/common/confirm-dialog/split-confirm-dialog/split-confirm-dialog.component.spec.ts
@@ -0,0 +1,81 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+
+import { SplitConfirmDialogComponent } from './split-confirm-dialog.component'
+import { HttpClientTestingModule } from '@angular/common/http/testing'
+import { ReactiveFormsModule, FormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { PdfViewerComponent } from '../../pdf-viewer/pdf-viewer.component'
+
+describe('SplitConfirmDialogComponent', () => {
+ let component: SplitConfirmDialogComponent
+ let fixture: ComponentFixture{{message}}
+
+
+
+
+
+
+ Page
+
+ of {{totalPages}}
+
+
+
+
+
+
+
+
+
+
+ -
+ @for (pageStr of pagesString.split(','); track pageStr; let i = $index) {
+
- + {{pageStr}} + @if (pagesString.split(',').length > 1) { + + + } + + } +
+
+
+
+
diff --git 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
index e0da11a3e..b26ad9024 100644
--- 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
@@ -75,6 +75,8 @@ import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service
import { PdfViewerComponent } from '../common/pdf-viewer/pdf-viewer.component'
import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
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'
const doc: Document = {
id: 3,
@@ -171,6 +173,8 @@ describe('DocumentDetailComponent', () => {
ShareLinksDropdownComponent,
CustomFieldsDropdownComponent,
PdfViewerComponent,
+ SplitConfirmDialogComponent,
+ RotateConfirmDialogComponent,
],
providers: [
DocumentTitlePipe,
@@ -1070,6 +1074,58 @@ describe('DocumentDetailComponent', () => {
).not.toBeUndefined()
})
+ it('should support split', () => {
+ let modal: NgbModalRef
+ modalService.activeInstances.subscribe((m) => (modal = m[0]))
+ initNormally()
+ component.splitDocument()
+ expect(modal).not.toBeUndefined()
+ modal.componentInstance.documentID = doc.id
+ modal.componentInstance.totalPages = 5
+ modal.componentInstance.page = 2
+ modal.componentInstance.addSplit()
+ modal.componentInstance.confirm()
+ let req = httpTestingController.expectOne(
+ `${environment.apiBaseUrl}documents/bulk_edit/`
+ )
+ expect(req.request.body).toEqual({
+ documents: [doc.id],
+ method: 'split',
+ parameters: { pages: '1-2,3-5' },
+ })
+ req.error(new ProgressEvent('failed'))
+ modal.componentInstance.confirm()
+ req = httpTestingController.expectOne(
+ `${environment.apiBaseUrl}documents/bulk_edit/`
+ )
+ req.flush(true)
+ })
+
+ it('should support rotate', () => {
+ let modal: NgbModalRef
+ modalService.activeInstances.subscribe((m) => (modal = m[0]))
+ initNormally()
+ component.rotateDocument()
+ expect(modal).not.toBeUndefined()
+ modal.componentInstance.documentID = doc.id
+ modal.componentInstance.rotate()
+ modal.componentInstance.confirm()
+ let req = httpTestingController.expectOne(
+ `${environment.apiBaseUrl}documents/bulk_edit/`
+ )
+ expect(req.request.body).toEqual({
+ documents: [doc.id],
+ method: 'rotate',
+ parameters: { degrees: 90 },
+ })
+ req.error(new ProgressEvent('failed'))
+ modal.componentInstance.confirm()
+ req = httpTestingController.expectOne(
+ `${environment.apiBaseUrl}documents/bulk_edit/`
+ )
+ req.flush(true)
+ })
+
function initNormally() {
jest
.spyOn(activatedRoute, 'paramMap', 'get')
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 4eae47615..5c5efdc9f 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -67,6 +67,8 @@ import { CustomField, CustomFieldDataType } from 'src/app/data/custom-field'
import { CustomFieldInstance } from 'src/app/data/custom-field-instance'
import { CustomFieldsService } from 'src/app/services/rest/custom-fields.service'
import { PDFDocumentProxy } from '../common/pdf-viewer/typings'
+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'
enum DocumentDetailNavIDs {
Details = 1,
@@ -1040,4 +1042,83 @@ export class DocumentDetailComponent
this.updateFormForCustomFields(true)
this.documentForm.updateValueAndValidity()
}
+
+ splitDocument() {
+ let modal = this.modalService.open(SplitConfirmDialogComponent, {
+ backdrop: 'static',
+ })
+ modal.componentInstance.title = $localize`Split confirm`
+ modal.componentInstance.messageBold = $localize`This operation will split the selected document(s) into new documents.`
+ 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], 'split', {
+ pages: modal.componentInstance.pagesString,
+ })
+ .pipe(first(), takeUntil(this.unsubscribeNotifier))
+ .subscribe({
+ next: () => {
+ this.toastService.showInfo(
+ $localize`Split operation will begin in the background.`
+ )
+ modal.close()
+ },
+ error: (error) => {
+ if (modal) {
+ modal.componentInstance.buttonsEnabled = true
+ }
+ this.toastService.showError(
+ $localize`Error executing split operation`,
+ error
+ )
+ },
+ })
+ })
+ }
+
+ rotateDocument() {
+ let modal = this.modalService.open(RotateConfirmDialogComponent, {
+ backdrop: 'static',
+ })
+ modal.componentInstance.title = $localize`Rotate confirm`
+ modal.componentInstance.messageBold = $localize`This operation will permanently rotate 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
+ modal.componentInstance.confirmClicked
+ .pipe(takeUntil(this.unsubscribeNotifier))
+ .subscribe(() => {
+ modal.componentInstance.buttonsEnabled = false
+ this.documentsService
+ .bulkEdit([this.document.id], 'rotate', {
+ degrees: modal.componentInstance.degrees,
+ })
+ .pipe(first(), takeUntil(this.unsubscribeNotifier))
+ .subscribe({
+ next: () => {
+ this.toastService.show({
+ content: $localize`Rotation will begin in the background. Close and re-open the document after the operation has completed to see the changes.`,
+ delay: 8000,
+ action: this.close.bind(this),
+ actionName: $localize`Close`,
+ })
+ modal.close()
+ },
+ error: (error) => {
+ if (modal) {
+ modal.componentInstance.buttonsEnabled = true
+ }
+ this.toastService.showError(
+ $localize`Error executing rotate operation`,
+ error
+ )
+ },
+ })
+ })
+ }
}
diff --git a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
index 686c07bb3..865502569 100644
--- a/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
+++ b/src-ui/src/app/components/document-list/bulk-editor/bulk-editor.component.html
@@ -80,18 +80,26 @@
+
-
-