Enhancement: merge documents as versions (#13515)

2026-08-20 09:43:29 +00:00 · 2026-08-19 07:20:14 -07:00
parent c5c5cc0b1d
commit e389298aab
30 changed files with 1504 additions and 53 deletions
@@ -0,0 +1,58 @@
+<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">
+  <p>{{message}}</p>
+  <div class="form-group">
+    <label class="form-label" for="rootDocumentID" i18n>Root document:</label>
+    <select id="rootDocumentID" class="form-select" [ngModel]="rootDocumentID()" (ngModelChange)="rootDocumentID.set($event)">
+      @for (document of documents(); track document.id) {
+        <option [ngValue]="document.id">{{document.title}}</option>
+      }
+    </select>
+  </div>
+  <div class="form-group mt-4">
+    <span class="form-label d-inline-block" i18n>Versions (oldest first):</span>
+    <ul class="list-group"
+        cdkDropList
+        [cdkDropListData]="versionDocumentIDs()"
+        (cdkDropListDropped)="onDrop($event)">
+      @for (documentID of versionDocumentIDs(); track documentID) {
+        @let document = getDocument(documentID);
+        @if (document) {
+          <li class="list-group-item d-flex align-items-center" cdkDrag>
+            <i-bs name="grip-vertical" class="me-2"></i-bs>
+            <div class="d-flex flex-column">
+              <div>
+                @if (document.correspondent) {
+                  <b>{{document.correspondent | correspondentName | async}}: </b>
+                }{{document.title}}
+              </div>
+              <small class="text-muted">
+                {{document.created | customDate:'mediumDate'}}
+                @if (document.page_count) {
+                  | {document.page_count, plural, =1 {One page} other {{{document.page_count}} pages}}
+                }
+              </small>
+            </div>
+            @if ($last) {
+              <span class="badge bg-primary ms-auto" i18n>Current version</span>
+            }
+          </li>
+        }
+      }
+    </ul>
+    @if (versionDocumentIDs().length > 1) {
+      <div class="form-text" i18n>Drag to reorder.</div>
+    }
+  </div>
+</div>
+<div class="modal-footer">
+  <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>
@@ -0,0 +1,3 @@
+.list-group-item {
+    cursor: move;
+}
@@ -0,0 +1,70 @@
+import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http'
+import { provideHttpClientTesting } from '@angular/common/http/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { of } from 'rxjs'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { MergeAsVersionsConfirmDialogComponent } from './merge-as-versions-confirm-dialog.component'
+
+describe('MergeAsVersionsConfirmDialogComponent', () => {
+  let component: MergeAsVersionsConfirmDialogComponent
+  let fixture: ComponentFixture<MergeAsVersionsConfirmDialogComponent>
+  let documentService: DocumentService
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        MergeAsVersionsConfirmDialogComponent,
+      ],
+      providers: [
+        NgbActiveModal,
+        provideHttpClient(withInterceptorsFromDi()),
+        provideHttpClientTesting(),
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(MergeAsVersionsConfirmDialogComponent)
+    documentService = TestBed.inject(DocumentService)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should fetch selected documents', () => {
+    const documents = [
+      { id: 1, title: 'Document 1' },
+      { id: 2, title: 'Document 2' },
+    ]
+    jest.spyOn(documentService, 'getFew').mockReturnValue(
+      of({
+        all: [1, 2],
+        count: 2,
+        results: documents,
+      })
+    )
+    component.documentIDs.set([1, 2])
+
+    component.ngOnInit()
+
+    expect(component.documents()).toEqual(documents)
+    expect(documentService.getFew).toHaveBeenCalledWith([1, 2])
+  })
+
+  it('should exclude the root from the draggable documents', () => {
+    component.documentIDs.set([1, 2, 3])
+    component.rootDocumentID.set(2)
+
+    expect(component.versionDocumentIDs()).toEqual([1, 3])
+  })
+
+  it('should move draggable documents while keeping the root fixed', () => {
+    component.documentIDs.set([1, 2, 3])
+    component.rootDocumentID.set(1)
+
+    component.onDrop({ previousIndex: 1, currentIndex: 0 } as any)
+
+    expect(component.documentIDs()).toEqual([1, 3, 2])
+    expect(component.versionDocumentIDs()).toEqual([3, 2])
+  })
+})
@@ -0,0 +1,70 @@
+import {
+  CdkDragDrop,
+  DragDropModule,
+  moveItemInArray,
+} from '@angular/cdk/drag-drop'
+import { AsyncPipe } from '@angular/common'
+import { Component, OnInit, computed, inject, signal } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { takeUntil } from 'rxjs'
+import { Document } from 'src/app/data/document'
+import { CorrespondentNamePipe } from 'src/app/pipes/correspondent-name.pipe'
+import { CustomDatePipe } from 'src/app/pipes/custom-date.pipe'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-merge-as-versions-confirm-dialog',
+  templateUrl: './merge-as-versions-confirm-dialog.component.html',
+  styleUrl: './merge-as-versions-confirm-dialog.component.scss',
+  imports: [
+    AsyncPipe,
+    CorrespondentNamePipe,
+    CustomDatePipe,
+    DragDropModule,
+    FormsModule,
+    NgxBootstrapIconsModule,
+  ],
+})
+export class MergeAsVersionsConfirmDialogComponent
+  extends ConfirmDialogComponent
+  implements OnInit
+{
+  private readonly documentService = inject(DocumentService)
+
+  readonly documentIDs = signal<number[]>([])
+  readonly documents = signal<Document[]>([])
+  readonly rootDocumentID = signal(-1)
+  readonly versionDocumentIDs = computed(() =>
+    this.documentIDs().filter(
+      (documentID) => documentID !== this.rootDocumentID()
+    )
+  )
+
+  ngOnInit() {
+    this.documentService
+      .getFew(this.documentIDs())
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe((response) => this.documents.set(response.results))
+  }
+
+  onDrop(event: CdkDragDrop<number[]>) {
+    const versionDocumentIDs = this.versionDocumentIDs().concat()
+    moveItemInArray(versionDocumentIDs, event.previousIndex, event.currentIndex)
+
+    // The root keeps its place in the list, only the versions move around it
+    let versionIndex = 0
+    this.documentIDs.update((documentIDs) =>
+      documentIDs.map((documentID) =>
+        documentID === this.rootDocumentID()
+          ? documentID
+          : versionDocumentIDs[versionIndex++]
+      )
+    )
+  }
+
+  getDocument(documentID: number): Document | undefined {
+    return this.documents().find((document) => document.id === documentID)
+  }
+}
@@ -36,7 +36,7 @@
        </div>
    <div class="form-group mt-4">
        <label class="form-label" for="metadataDocumentID" i18n>Use metadata from:</label>
-        <select class="form-select" [ngModel]="metadataDocumentID()" (ngModelChange)="metadataDocumentID.set($event)">
+        <select id="metadataDocumentID" class="form-select" [ngModel]="metadataDocumentID()" (ngModelChange)="metadataDocumentID.set($event)">
            <option [ngValue]="-1" i18n>Regenerate all metadata</option>
            @for (document of documents(); track document.id) {
              <option [ngValue]="document.id">{{document.title}}</option>
@@ -467,13 +467,6 @@ describe('DocumentDetailComponent', () => {
    const docWithVersions = {
      ...doc,
      versions: [
-        {
-          id: doc.id,
-          added: new Date('2024-01-01T00:00:00Z'),
-          version_label: 'Original',
-          checksum: 'aaaa',
-          is_root: true,
-        },
        {
          id: 10,
          added: new Date('2024-01-02T00:00:00Z'),
@@ -481,6 +474,13 @@ describe('DocumentDetailComponent', () => {
          checksum: 'bbbb',
          is_root: false,
        },
+        {
+          id: doc.id,
+          added: new Date('2024-01-01T00:00:00Z'),
+          version_label: 'Original',
+          checksum: 'aaaa',
+          is_root: true,
+        },
      ],
    } as Document

@@ -1232,8 +1232,8 @@ describe('DocumentDetailComponent', () => {

    metadataSpy.mockClear()
    component.document().versions = [
-      { id: doc.id, is_root: true },
      { id: 10, is_root: false },
+      { id: doc.id, is_root: true },
    ] as any
    jest.spyOn(documentService, 'getPreviewUrl').mockReturnValue('preview-root')
    jest.spyOn(documentService, 'getThumbUrl').mockReturnValue('thumb-root')
@@ -1929,8 +1929,8 @@ describe('DocumentDetailComponent', () => {
    component.documentId.set(doc.id)
    component.document.set({ ...doc, versions: [] } as Document)
    const updatedVersions = [
-      { id: doc.id, is_root: true },
      { id: 10, is_root: false },
+      { id: doc.id, is_root: true },
    ] as any
    const openDoc = { ...doc, versions: [] } as Document
    jest.spyOn(openDocumentsService, 'getOpenDocument').mockReturnValue(openDoc)
@@ -2046,8 +2046,8 @@ describe('DocumentDetailComponent', () => {
  it('should include version in download and print only for non-latest selected version', () => {
    initNormally()
    component.document().versions = [
-      { id: doc.id, is_root: true },
      { id: 10, is_root: false },
+      { id: doc.id, is_root: true },
    ] as any

    const getDownloadUrlSpy = jest
@@ -889,13 +889,9 @@ export class DocumentDetailComponent

  updateComponent(doc: Document) {
    this.document.set(doc)
-    // Default selected version is the newest version
+    // Default selected version is the newest version, which the API returns first
    const versions = doc.versions ?? []
-    this.selectedVersionId.set(
-      versions.length
-        ? Math.max(...versions.map((version) => version.id))
-        : doc.id
-    )
+    this.selectedVersionId.set(versions.length ? versions[0].id : doc.id)
    this.previewLoaded.set(false)
    this.requiresPassword = false
    this.updateFormForCustomFields()
@@ -1441,7 +1437,8 @@ export class DocumentDetailComponent
    if (!versions.length || !this.selectedVersionId()) {
      return null
    }
-    const latestVersionId = Math.max(...versions.map((version) => version.id))
+    // The API returns versions newest first
+    const latestVersionId = versions[0].id
    return this.selectedVersionId() === latestVersionId
      ? null
      : this.selectedVersionId()
@@ -0,0 +1,18 @@
+<div class="modal-header">
+  <h4 class="modal-title" i18n>Add existing document as version</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()"></button>
+</div>
+<div class="modal-body">
+  <pngx-input-document-link
+    [(ngModel)]="selectedDocumentIDs"
+    [parentDocumentID]="rootDocumentID"
+    [minimal]="true"
+    placeholder="Search for a document"
+    i18n-placeholder
+  ></pngx-input-document-link>
+  <div class="form-text mt-2" i18n>Select one document to add as a version.</div>
+</div>
+<div class="modal-footer">
+  <button type="button" class="btn btn-outline-secondary" (click)="cancel()" [disabled]="!buttonsEnabled()" i18n>Cancel</button>
+  <button type="button" class="btn btn-primary" (click)="confirm()" [disabled]="!buttonsEnabled() || selectedDocumentIDs.length !== 1" i18n>Add version</button>
+</div>
@@ -0,0 +1,73 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { DocumentService } from 'src/app/services/rest/document.service'
+import { AddExistingDocumentVersionDialogComponent } from './add-existing-document-version-dialog.component'
+
+describe('AddExistingDocumentVersionDialogComponent', () => {
+  let component: AddExistingDocumentVersionDialogComponent
+  let fixture: ComponentFixture<AddExistingDocumentVersionDialogComponent>
+  let activeModal: jest.Mocked<Pick<NgbActiveModal, 'dismiss'>>
+
+  beforeEach(async () => {
+    activeModal = { dismiss: jest.fn() }
+    await TestBed.configureTestingModule({
+      imports: [AddExistingDocumentVersionDialogComponent],
+      providers: [
+        {
+          provide: NgbActiveModal,
+          useValue: activeModal,
+        },
+        {
+          provide: DocumentService,
+          useValue: {},
+        },
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(AddExistingDocumentVersionDialogComponent)
+    component = fixture.componentInstance
+    component.rootDocumentID = 3
+    fixture.detectChanges()
+  })
+
+  it('should emit the single selected document', () => {
+    const emitSpy = jest.spyOn(component.confirmClicked, 'emit')
+    component.selectedDocumentIDs = [20]
+
+    component.confirm()
+
+    expect(emitSpy).toHaveBeenCalledWith(20)
+  })
+
+  it('should require exactly one selected document', () => {
+    const emitSpy = jest.spyOn(component.confirmClicked, 'emit')
+    component.selectedDocumentIDs = [20, 21]
+
+    component.confirm()
+
+    expect(emitSpy).not.toHaveBeenCalled()
+  })
+
+  it('should dismiss on cancel', () => {
+    component.cancel()
+
+    expect(activeModal.dismiss).toHaveBeenCalled()
+  })
+
+  it('should re-render the buttons when they are toggled from outside', async () => {
+    const cancelButton: HTMLButtonElement = fixture.nativeElement.querySelector(
+      '.modal-footer button'
+    )
+    expect(cancelButton.disabled).toBeFalsy()
+
+    // No detectChanges: the dropdown toggling this from a request callback is
+    // all that happens, and nothing else schedules a render for the modal
+    component.buttonsEnabled.set(false)
+    await fixture.whenStable()
+    expect(cancelButton.disabled).toBeTruthy()
+
+    component.buttonsEnabled.set(true)
+    await fixture.whenStable()
+    expect(cancelButton.disabled).toBeFalsy()
+  })
+})
@@ -0,0 +1,35 @@
+import {
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  inject,
+  signal,
+} from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { DocumentLinkComponent } from 'src/app/components/common/input/document-link/document-link.component'
+
+@Component({
+  selector: 'pngx-add-existing-document-version-dialog',
+  templateUrl: './add-existing-document-version-dialog.component.html',
+  imports: [DocumentLinkComponent, FormsModule],
+})
+export class AddExistingDocumentVersionDialogComponent {
+  private readonly activeModal = inject(NgbActiveModal)
+
+  @Input() rootDocumentID: number
+  @Output() confirmClicked = new EventEmitter<number>()
+
+  selectedDocumentIDs: number[] = []
+  readonly buttonsEnabled = signal(true)
+
+  confirm(): void {
+    if (this.selectedDocumentIDs.length !== 1) return
+    this.confirmClicked.emit(this.selectedDocumentIDs[0])
+  }
+
+  cancel(): void {
+    this.activeModal.dismiss()
+  }
+}
@@ -24,13 +24,26 @@
          class="visually-hidden"
          (change)="onVersionFileSelected($event)"
        />
-        <button
-          class="btn btn-sm btn-outline-secondary w-100"
-          (click)="versionFileInput.click()"
-          [disabled]="!userIsOwner || !userCanEdit"
-        >
-          <i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Add new version</span>
-        </button>
+        <div class="btn-group btn-group-sm w-100">
+          <button
+            class="btn btn-sm btn-outline-secondary w-100"
+            (click)="versionFileInput.click()"
+            [disabled]="!userIsOwner || !userCanEdit"
+            title="Upload a new version"
+            i18n-title
+          >
+            <i-bs name="file-earmark-plus"></i-bs><span class="ps-1" i18n>Upload</span>
+          </button>
+          <button
+            class="btn btn-sm btn-outline-secondary w-100"
+            (click)="addExistingDocumentAsVersion()"
+            [disabled]="!userIsOwner || !userCanEdit"
+            title="Use an existing document"
+            i18n-title
+          >
+            <i-bs name="file-earmark"></i-bs><span class="ps-1" i18n>Existing</span>
+          </button>
+        </div>
      } @else {
        @switch (versionUploadState()) {
          @case (UploadState.Uploading) {
@@ -1,6 +1,7 @@
 import { DatePipe } from '@angular/common'
-import { SimpleChange } from '@angular/core'
+import { SimpleChange, signal } from '@angular/core'
 import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
 import { Subject, of, throwError } from 'rxjs'
 import { DocumentVersionInfo } from 'src/app/data/document'
@@ -19,12 +20,17 @@ describe('DocumentVersionDropdownComponent', () => {
  let documentService: jest.Mocked<
    Pick<
      DocumentService,
-      'deleteVersion' | 'getVersions' | 'uploadVersion' | 'updateVersionLabel'
+      | 'deleteVersion'
+      | 'getVersions'
+      | 'mergeDocumentsAsVersions'
+      | 'uploadVersion'
+      | 'updateVersionLabel'
    >
  >
  let toastService: jest.Mocked<Pick<ToastService, 'showError' | 'showInfo'>>
  let finished$: Subject<{ taskId: string }>
  let failed$: Subject<{ taskId: string; message?: string }>
+  let modalService: jest.Mocked<Pick<NgbModal, 'open'>>

  beforeEach(async () => {
    finished$ = new Subject<{ taskId: string }>()
@@ -32,9 +38,11 @@ describe('DocumentVersionDropdownComponent', () => {
    documentService = {
      deleteVersion: jest.fn(),
      getVersions: jest.fn(),
+      mergeDocumentsAsVersions: jest.fn(),
      uploadVersion: jest.fn(),
      updateVersionLabel: jest.fn(),
    }
+    modalService = { open: jest.fn() }
    toastService = {
      showError: jest.fn(),
      showInfo: jest.fn(),
@@ -61,6 +69,10 @@ describe('DocumentVersionDropdownComponent', () => {
          provide: ToastService,
          useValue: toastService,
        },
+        {
+          provide: NgbModal,
+          useValue: modalService,
+        },
        {
          provide: WebsocketStatusService,
          useValue: {
@@ -222,9 +234,10 @@ describe('DocumentVersionDropdownComponent', () => {
  })

  it('onVersionFileSelected should upload and update versions after websocket success', () => {
+    // Newest first, as the API returns them
    const versions: DocumentVersionInfo[] = [
-      { id: 3, is_root: true, checksum: 'aaaa' },
      { id: 20, is_root: false, checksum: 'cccc' },
+      { id: 3, is_root: true, checksum: 'aaaa' },
    ]
    const file = new File(['test'], 'new-version.pdf', {
      type: 'application/pdf',
@@ -323,4 +336,45 @@ describe('DocumentVersionDropdownComponent', () => {
    expect(component.editingVersionId).toBeNull()
    expect(component.versionLabelDraft).toEqual('')
  })
+
+  it('addExistingDocumentAsVersion should merge with a label and refresh versions', () => {
+    const confirmClicked = new Subject<number>()
+    const modal = {
+      componentInstance: {
+        rootDocumentID: null,
+        buttonsEnabled: signal(true),
+        confirmClicked,
+      },
+      close: jest.fn(),
+    }
+    modalService.open.mockReturnValue(modal as any)
+    documentService.mergeDocumentsAsVersions.mockReturnValue(of({} as any))
+    // Newest first, as the API returns them. The merged document has a lower id
+    // than the root, which is the whole point of merging an existing document.
+    const versions: DocumentVersionInfo[] = [
+      { id: 2, is_root: false, checksum: 'cccc' },
+      { id: 3, is_root: true, checksum: 'aaaa' },
+    ]
+    documentService.getVersions.mockReturnValue(of({ id: 3, versions } as any))
+    component.newVersionLabel = '  Imported  '
+    const versionsEmitSpy = jest.spyOn(component.versionsUpdated, 'emit')
+    const selectedEmitSpy = jest.spyOn(component.versionSelected, 'emit')
+
+    component.addExistingDocumentAsVersion()
+    expect(modal.componentInstance.rootDocumentID).toEqual(3)
+    confirmClicked.next(2)
+
+    expect(documentService.mergeDocumentsAsVersions).toHaveBeenCalledWith(
+      [3, 2],
+      3,
+      'Imported'
+    )
+    expect(documentService.updateVersionLabel).not.toHaveBeenCalled()
+    expect(documentService.getVersions).toHaveBeenCalledWith(3)
+    expect(versionsEmitSpy).toHaveBeenCalledWith(versions)
+    expect(selectedEmitSpy).toHaveBeenCalledWith(2)
+    expect(component.newVersionLabel).toEqual('')
+    expect(modal.close).toHaveBeenCalled()
+    expect(toastService.showInfo).toHaveBeenCalled()
+  })
 })
@@ -11,7 +11,7 @@ import {
  SimpleChanges,
 } from '@angular/core'
 import { FormsModule } from '@angular/forms'
-import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap'
+import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { merge, of, Subject } from 'rxjs'
 import {
@@ -33,6 +33,7 @@ import {
  WebsocketStatusService,
 } from 'src/app/services/websocket-status.service'
 import { ConfirmButtonComponent } from '../../common/confirm-button/confirm-button.component'
+import { AddExistingDocumentVersionDialogComponent } from './add-existing-document-version-dialog/add-existing-document-version-dialog.component'

@Component({
  selector: 'pngx-document-version-dropdown',
@@ -69,6 +70,7 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
  private readonly documentsService = inject(DocumentService)
  private readonly toastService = inject(ToastService)
  private readonly websocketStatusService = inject(WebsocketStatusService)
+  private readonly modalService = inject(NgbModal)
  private readonly destroy$ = new Subject<void>()
  private readonly documentChange$ = new Subject<void>()

@@ -256,11 +258,10 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
      .subscribe({
        next: (doc) => {
          if (uploadDocumentId !== this.documentId) return
-          if (doc?.versions) {
+          if (doc?.versions?.length) {
            this.versionsUpdated.emit(doc.versions)
-            this.versionSelected.emit(
-              Math.max(...doc.versions.map((version) => version.id))
-            )
+            // The API returns versions newest first
+            this.versionSelected.emit(doc.versions[0].id)
            this.clearVersionUploadStatus()
          }
        },
@@ -278,6 +279,55 @@ export class DocumentVersionDropdownComponent implements OnChanges, OnDestroy {
      })
  }

+  addExistingDocumentAsVersion(): void {
+    const modal = this.modalService.open(
+      AddExistingDocumentVersionDialogComponent,
+      { backdrop: 'static' }
+    )
+    const dialog =
+      modal.componentInstance as AddExistingDocumentVersionDialogComponent
+    dialog.rootDocumentID = this.documentId
+    dialog.confirmClicked
+      .pipe(takeUntil(this.destroy$), takeUntil(this.documentChange$))
+      .subscribe((existingDocumentID) => {
+        dialog.buttonsEnabled.set(false)
+        const versionLabel = this.newVersionLabel?.trim()
+        this.documentsService
+          .mergeDocumentsAsVersions(
+            [this.documentId, existingDocumentID],
+            this.documentId,
+            versionLabel
+          )
+          .pipe(
+            switchMap(() => this.documentsService.getVersions(this.documentId)),
+            first(),
+            finalize(() => dialog.buttonsEnabled.set(true)),
+            takeUntil(this.destroy$),
+            takeUntil(this.documentChange$)
+          )
+          .subscribe({
+            next: (document) => {
+              if (document?.versions?.length) {
+                this.versionsUpdated.emit(document.versions)
+                // The API returns versions newest first
+                this.versionSelected.emit(document.versions[0].id)
+              }
+              this.newVersionLabel = ''
+              modal.close()
+              this.toastService.showInfo(
+                $localize`Existing document added as a version.`
+              )
+            },
+            error: (error) => {
+              this.toastService.showError(
+                $localize`Error adding existing document as a version`,
+                error
+              )
+            },
+          })
+      })
+  }
+
  clearVersionUploadStatus(): void {
    this.versionUploadState.set(UploadState.Idle)
    this.versionUploadError.set(null)
@@ -95,6 +95,9 @@
          <button ngbDropdownItem (click)="mergeSelected()" [disabled]="!userCanAdd || list.allSelected || list.selectedCount < 2">
            <i-bs name="journals" class="me-1"></i-bs><ng-container i18n>Merge</ng-container>
          </button>
+          <button ngbDropdownItem (click)="mergeSelectedAsVersions()" [disabled]="!userOwnsAll || !userCanEditAll || !userCanDelete || list.allSelected || list.selectedCount < 2">
+            <i-bs name="journal-bookmark-fill" class="me-1"></i-bs><ng-container i18n>Merge as versions</ng-container>
+          </button>
        </div>
      </div>
    </div>
@@ -1248,6 +1248,89 @@ describe('BulkEditorComponent', () => {
    expect(documentListViewService.selected.size).toEqual(0)
  })

+  it('should support merging documents as versions', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'documents', 'get')
+      .mockReturnValue([{ id: 3 }, { id: 4 }])
+    jest.spyOn(documentService, 'getFew').mockReturnValue(
+      of({
+        all: [3, 4],
+        count: 2,
+        results: [
+          { id: 3, title: 'Document 3' },
+          { id: 4, title: 'Document 4' },
+        ],
+      })
+    )
+    jest
+      .spyOn(documentListViewService, 'selected', 'get')
+      .mockReturnValue(new Set([3, 4]))
+    jest
+      .spyOn(permissionsService, 'currentUserHasObjectPermissions')
+      .mockReturnValue(true)
+    jest
+      .spyOn(permissionsService, 'currentUserOwnsObject')
+      .mockReturnValue(true)
+    const mergeAsVersionsSpy = jest
+      .spyOn(documentService, 'mergeDocumentsAsVersions')
+      .mockReturnValue(of(true))
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    fixture.detectChanges()
+
+    component.mergeSelectedAsVersions()
+    expect(modal).not.toBeUndefined()
+    modal.componentInstance.rootDocumentID.set(4)
+    modal.componentInstance.confirm()
+
+    expect(mergeAsVersionsSpy).toHaveBeenCalledWith([3, 4], 4)
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=50&ordering=-created&truncate_content=true&include_selection_data=true`
+    )
+    httpTestingController.match(
+      `${environment.apiBaseUrl}documents/?page=1&page_size=100000&fields=id`
+    )
+    expect(documentListViewService.selected.size).toEqual(0)
+    expect(toastInfoSpy).toHaveBeenCalledWith('Documents merged as versions.')
+  })
+
+  it('should not report success when merging documents as versions fails', () => {
+    let modal: NgbModalRef
+    modalService.activeInstances.subscribe((m) => (modal = m[0]))
+    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
+    jest
+      .spyOn(documentListViewService, 'documents', 'get')
+      .mockReturnValue([{ id: 3 }, { id: 4 }])
+    jest.spyOn(documentService, 'getFew').mockReturnValue(
+      of({
+        all: [3, 4],
+        count: 2,
+        results: [
+          { id: 3, title: 'Document 3' },
+          { id: 4, title: 'Document 4' },
+        ],
+      })
+    )
+    jest
+      .spyOn(documentListViewService, 'selected', 'get')
+      .mockReturnValue(new Set([3, 4]))
+    jest
+      .spyOn(documentService, 'mergeDocumentsAsVersions')
+      .mockReturnValue(throwError(() => new Error('failed')))
+    const toastInfoSpy = jest.spyOn(toastService, 'showInfo')
+    const toastErrorSpy = jest.spyOn(toastService, 'showError')
+    fixture.detectChanges()
+
+    component.mergeSelectedAsVersions()
+    modal.componentInstance.rootDocumentID.set(4)
+    modal.componentInstance.confirm()
+
+    expect(toastErrorSpy).toHaveBeenCalled()
+    expect(toastInfoSpy).not.toHaveBeenCalled()
+  })
+
  it('should support bulk download with archive, originals or both and file formatting', () => {
    jest.spyOn(permissionsService, 'currentUserCan').mockReturnValue(true)
    jest
@@ -50,6 +50,7 @@ import { SettingsService } from 'src/app/services/settings.service'
 import { ToastService } from 'src/app/services/toast.service'
 import { flattenTags } from 'src/app/utils/flatten-tags'
 import { queryParamsFromFilterRules } from 'src/app/utils/query-params'
+import { MergeAsVersionsConfirmDialogComponent } from '../../common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component'
 import { MergeConfirmDialogComponent } from '../../common/confirm-dialog/merge-confirm-dialog/merge-confirm-dialog.component'
 import { RotateConfirmDialogComponent } from '../../common/confirm-dialog/rotate-confirm-dialog/rotate-confirm-dialog.component'
 import { CorrespondentEditDialogComponent } from '../../common/edit-dialog/correspondent-edit-dialog/correspondent-edit-dialog.component'
@@ -171,6 +172,13 @@ export class BulkEditorComponent
    )
  }

+  get userCanDelete(): boolean {
+    return this.permissionService.currentUserCan(
+      PermissionAction.Delete,
+      PermissionType.Document
+    )
+  }
+
  ngOnInit() {
    if (
      this.permissionService.currentUserCan(
@@ -287,14 +295,17 @@ export class BulkEditorComponent
  private executeDocumentAction(
    modal: NgbModalRef,
    request: Observable<any>,
-    options: { deleteOriginals?: boolean } = {}
+    options: { clearSelection?: boolean; successMessage?: string } = {}
  ) {
    if (modal) {
      modal.componentInstance.buttonsEnabled.set(false)
    }
    request.pipe(first()).subscribe({
      next: () => {
-        this.handleOperationSuccess(modal, options.deleteOriginals ?? false)
+        this.handleOperationSuccess(modal, options.clearSelection ?? false)
+        if (options.successMessage) {
+          this.toastService.showInfo(options.successMessage)
+        }
      },
      error: (error) => this.handleOperationError(modal, error),
    })
@@ -990,7 +1001,7 @@ export class BulkEditorComponent
        this.executeDocumentAction(
          modal,
          this.documentService.mergeDocuments(mergeDialog.documentIDs(), args),
-          { deleteOriginals: !!args.delete_originals }
+          { clearSelection: !!args.delete_originals }
        )
        this.toastService.showInfo(
          $localize`Merged document will be queued for consumption.`
@@ -998,6 +1009,35 @@ export class BulkEditorComponent
      })
  }

+  mergeSelectedAsVersions() {
+    let modal = this.modalService.open(MergeAsVersionsConfirmDialogComponent, {
+      backdrop: 'static',
+    })
+    const mergeDialog =
+      modal.componentInstance as MergeAsVersionsConfirmDialogComponent
+    const documentIDs = Array.from(this.list.selected)
+    mergeDialog.title = $localize`Merge as versions`
+    mergeDialog.message = $localize`The selected documents will become versions of the root document.`
+    mergeDialog.btnCaption = $localize`Proceed`
+    mergeDialog.documentIDs.set(documentIDs)
+    mergeDialog.rootDocumentID.set(documentIDs[0])
+    mergeDialog.confirmClicked
+      .pipe(takeUntil(this.unsubscribeNotifier))
+      .subscribe(() => {
+        this.executeDocumentAction(
+          modal,
+          this.documentService.mergeDocumentsAsVersions(
+            mergeDialog.documentIDs(),
+            mergeDialog.rootDocumentID()
+          ),
+          {
+            clearSelection: true,
+            successMessage: $localize`Documents merged as versions.`,
+          }
+        )
+      })
+  }
+
  public setCustomFieldValues(changedCustomFields: ChangedItems) {
    const modal = this.modalService.open(CustomFieldsBulkEditDialogComponent, {
      backdrop: 'static',
@@ -316,6 +316,34 @@ describe(`DocumentService`, () => {
    })
  })

+  it('should call appropriate api endpoint for merging documents as versions', () => {
+    const ids = [1, 2, 3]
+    subscription = service.mergeDocumentsAsVersions(ids, 2).subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/merge_as_versions/`
+    )
+    expect(req.request.method).toEqual('POST')
+    expect(req.request.body).toEqual({
+      documents: ids,
+      root_document_id: 2,
+    })
+  })
+
+  it('should include an optional label when merging one document as a version', () => {
+    const ids = [1, 2]
+    subscription = service
+      .mergeDocumentsAsVersions(ids, 2, 'Imported')
+      .subscribe()
+    const req = httpTestingController.expectOne(
+      `${environment.apiBaseUrl}${endpoint}/merge_as_versions/`
+    )
+    expect(req.request.body).toEqual({
+      documents: ids,
+      root_document_id: 2,
+      version_label: 'Imported',
+    })
+  })
+
  it('should call appropriate api endpoint for edit pdf', () => {
    const ids = [1]
    const args = { operations: [{ page: 1, rotate: 90, doc: 0 }] }
@@ -374,6 +374,18 @@ export class DocumentService extends AbstractPaperlessService<Document> {
    })
  }

+  mergeDocumentsAsVersions(
+    ids: number[],
+    rootDocumentId: number,
+    versionLabel?: string
+  ) {
+    return this.http.post(this.getResourceUrl(null, 'merge_as_versions'), {
+      documents: ids,
+      root_document_id: rootDocumentId,
+      ...(versionLabel ? { version_label: versionLabel } : {}),
+    })
+  }
+
  editPdfDocuments(ids: number[], request: EditPdfDocumentsRequest) {
    return this.http.post(this.getResourceUrl(null, 'edit_pdf'), {
      documents: ids,