Sheesh, now we can bring back ordering

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.html

@@ -6,11 +6,15 @@
   <p>{{message}}</p>
   <div class="form-group">
     <span class="form-label d-inline-block" i18n>Versions:</span>
-    <ul class="list-group">
+    <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">
+          <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) {
@@ -28,6 +32,7 @@
         }
       }
     </ul>
+    <div class="form-text" i18n>Drag to reorder. The last document becomes the current version.</div>
   </div>
   <div class="form-group mt-4">
     <label class="form-label" for="rootDocumentID" i18n>Root document:</label>

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.scss

@@ -0,0 +1,3 @@
+.list-group-item {
+    cursor: move;
+}

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.spec.ts

@@ -2,6 +2,7 @@ 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'
@@ -13,7 +14,10 @@ describe('MergeAsVersionsConfirmDialogComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [MergeAsVersionsConfirmDialogComponent],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        MergeAsVersionsConfirmDialogComponent,
+      ],
       providers: [
         NgbActiveModal,
         provideHttpClient(withInterceptorsFromDi()),
@@ -53,4 +57,14 @@ describe('MergeAsVersionsConfirmDialogComponent', () => {
 
     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])
+  })
 })

src-ui/src/app/components/common/confirm-dialog/merge-as-versions-confirm-dialog/merge-as-versions-confirm-dialog.component.ts

@@ -1,6 +1,12 @@
+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'
@@ -11,7 +17,15 @@ import { ConfirmDialogComponent } from '../confirm-dialog.component'
 @Component({
   selector: 'pngx-merge-as-versions-confirm-dialog',
   templateUrl: './merge-as-versions-confirm-dialog.component.html',
-  imports: [AsyncPipe, CorrespondentNamePipe, CustomDatePipe, FormsModule],
+  styleUrl: './merge-as-versions-confirm-dialog.component.scss',
+  imports: [
+    AsyncPipe,
+    CorrespondentNamePipe,
+    CustomDatePipe,
+    DragDropModule,
+    FormsModule,
+    NgxBootstrapIconsModule,
+  ],
 })
 export class MergeAsVersionsConfirmDialogComponent
   extends ConfirmDialogComponent
@@ -35,6 +49,21 @@ export class MergeAsVersionsConfirmDialogComponent
       .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 {
     return this.documents().find((document) => document.id === documentID)
   }