From be99cc5c23763240869697798b95608e4ff1e319 Mon Sep 17 00:00:00 2001
From: Andreas Awouters <andreas.awouters@atmire.com>
Date: Wed, 11 Sep 2024 10:09:03 +0200
Subject: [PATCH] 118219: Allow dragging of table rows

---
 .../item-bitstreams/item-bitstreams.component.scss         | 7 -------
 .../item-edit-bitstream-bundle.component.html              | 7 +++++--
 .../item-edit-bitstream-bundle.component.ts                | 5 +++++
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
index 662c999461..0ee56fe67e 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss
@@ -1,7 +1,4 @@
-
-
 .drag-handle {
-  visibility: hidden;
   &:hover {
     cursor: move;
   }
@@ -11,10 +8,6 @@
   cursor: move;
 }
 
-:host ::ng-deep .bitstream-row:hover .drag-handle, :host ::ng-deep .bitstream-row-drag-handle:focus .drag-handle {
-  visibility: visible !important;
-}
-
 .cdk-drag-preview {
   margin-left: 0;
   box-sizing: border-box;
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
index 3d6ee4fa47..b79518a763 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html
@@ -27,7 +27,7 @@
         </tr>
         </thead>
 
-        <tbody>
+        <tbody cdkDropList (cdkDropListDropped)="drop($event)">
         <tr class="bundle-row">
           <th id="{{ bundleName }}" class="span" colspan="3" scope="colgroup">
             {{'item.edit.bitstreams.bundle.name' | translate:{ name: bundleName } }}
@@ -65,10 +65,13 @@
         </tr>
 
         <ng-container *ngFor="let entry of (tableEntries$ | async)">
-          <tr *ngIf="updates[entry.id] as update" [ngClass]="getRowClass(update)" class="bitstream-row">
+          <tr *ngIf="updates[entry.id] as update" [ngClass]="getRowClass(update)" class="bitstream-row" cdkDrag>
 
             <th class="bitstream-name row-element {{ columnSizes.columns[0].buildClasses() }}"
                 scope="row" id="{{ entry.nameStripped }}" headers="{{ bundleName }} name">
+              <div class="drag-handle text-muted float-left p-1 mr-2" tabindex="0" cdkDragHandle>
+                <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+              </div>
               {{ entry.name }}
             </th>
             <td class="row-element {{ columnSizes.columns[1].buildClasses() }}"
diff --git a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
index 0974da3f8c..c0c4e30231 100644
--- a/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
+++ b/src/app/item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts
@@ -28,6 +28,7 @@ import { PaginationService } from '../../../../core/pagination/pagination.servic
 import { PaginationComponent } from '../../../../shared/pagination/pagination.component';
 import { RequestService } from '../../../../core/data/request.service';
 import { ItemBitstreamsService } from '../item-bitstreams.service';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
 /**
  * Interface storing all the information necessary to create a row in the bitstream edit table
@@ -286,4 +287,8 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
     this.paginationComponent.doPageSizeChange(pageSize);
   }
 
+  drop(event: CdkDragDrop<any>) {
+    console.log('dropEvent:', event);
+  }
+
 }