Dont show root in the list (and remove it from the sortable list)

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

@@ -9,9 +9,9 @@
         <label class="form-label" for="metadataDocumentID" i18n>Documents:</label>
         <ul class="list-group"
             cdkDropList
-            [cdkDropListData]="documentIDs()"
+            [cdkDropListData]="draggableDocumentIDs()"
             (cdkDropListDropped)="onDrop($event)">
-            @for (documentID of documentIDs(); track documentID) {
+            @for (documentID of draggableDocumentIDs(); track documentID) {
               @let document = getDocument(documentID);
               @if (document) {
                 <li class="list-group-item d-flex align-items-center" cdkDrag>

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

@@ -66,6 +66,20 @@ describe('MergeConfirmDialogComponent', () => {
     expect(component.documentIDs()).toEqual([1, 3, 2])
   })
 
+  it('should move draggable documents while keeping the root fixed', () => {
+    component.documentIDs.set([1, 2, 3])
+    component.rootDocumentID.set(1)
+    const event = {
+      previousIndex: 1,
+      currentIndex: 0,
+    }
+
+    component.onDrop(event as any)
+
+    expect(component.documentIDs()).toEqual([1, 3, 2])
+    expect(component.draggableDocumentIDs()).toEqual([3, 2])
+  })
+
   it('should get document by ID', () => {
     const documents = [
       { id: 1, name: 'Document 1' },

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

@@ -4,7 +4,14 @@ import {
   moveItemInArray,
 } from '@angular/cdk/drag-drop'
 import { AsyncPipe } from '@angular/common'
-import { Component, Input, OnInit, inject, signal } from '@angular/core'
+import {
+  Component,
+  Input,
+  OnInit,
+  computed,
+  inject,
+  signal,
+} from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
 import { takeUntil } from 'rxjs'
@@ -42,6 +49,11 @@ export class MergeConfirmDialogComponent
   readonly documents = signal<Document[]>([])
   readonly metadataDocumentID = signal(-1)
   readonly rootDocumentID = signal(-1)
+  readonly draggableDocumentIDs = computed(() =>
+    this.documentIDs().filter(
+      (documentID) => documentID !== this.rootDocumentID()
+    )
+  )
 
   @Input()
   mergeAsVersions = false
@@ -60,9 +72,21 @@ export class MergeConfirmDialogComponent
   }
 
   onDrop(event: CdkDragDrop<number[]>) {
-    const documentIDs = this.documentIDs().concat()
-    moveItemInArray(documentIDs, event.previousIndex, event.currentIndex)
-    this.documentIDs.set(documentIDs)
+    const draggableDocumentIDs = this.draggableDocumentIDs().concat()
+    moveItemInArray(
+      draggableDocumentIDs,
+      event.previousIndex,
+      event.currentIndex
+    )
+
+    let draggableIndex = 0
+    this.documentIDs.update((documentIDs) =>
+      documentIDs.map((documentID) =>
+        documentID === this.rootDocumentID()
+          ? documentID
+          : draggableDocumentIDs[draggableIndex++]
+      )
+    )
   }
 
   getDocument(documentID: number): Document {