118219: Allow dragging of table rows

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;

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() }}"

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);
+  }
+
 }