Enhancement: merge documents as versions (#13515)

2026-09-02 16:07:15 +00:00 · 2026-08-19 07:20:14 -07:00
parent c5c5cc0b1d
commit e389298aab
30 changed files with 1504 additions and 53 deletions
@@ -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)