65717: cdk install, table layout to divs, dragging support (no implementation yet)

package.json

@@ -74,6 +74,7 @@
   },
   "dependencies": {
     "@angular/animations": "^6.1.4",
+    "@angular/cdk": "^7.3.7",
     "@angular/cli": "^6.1.5",
     "@angular/common": "^6.1.4",
     "@angular/core": "^6.1.4",

resources/i18n/en.json5

@@ -281,6 +281,7 @@
   "item.edit.bitstreams.bundle.name": "BUNDLE: {{ name }}",
   "item.edit.bitstreams.discard-button": "Discard",
   "item.edit.bitstreams.edit.buttons.download": "Download",
+  "item.edit.bitstreams.edit.buttons.drag": "Drag",
   "item.edit.bitstreams.edit.buttons.edit": "Edit",
   "item.edit.bitstreams.edit.buttons.remove": "Remove",
   "item.edit.bitstreams.edit.buttons.undo": "Undo changes",

src/app/+item-page/edit-item-page/edit-item-page.module.ts

@@ -25,6 +25,7 @@ import { AbstractItemUpdateComponent } from './abstract-item-update/abstract-ite
 import { ItemMoveComponent } from './item-move/item-move.component';
 import { ItemEditBitstreamBundleComponent } from './item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component';
 import { BundleDataService } from '../../core/data/bundle-data.service';
+import { DragDropModule } from '@angular/cdk/drag-drop';
 
 /**
  * Module that contains all components related to the Edit Item page administrator functionality
@@ -34,7 +35,8 @@ import { BundleDataService } from '../../core/data/bundle-data.service';
     CommonModule,
     SharedModule,
     EditItemPageRoutingModule,
-    SearchPageModule
+    SearchPageModule,
+    DragDropModule
   ],
   declarations: [
     EditItemPageComponent,

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.html

@@ -23,21 +23,20 @@
     </button>
   </div>
 
-  <table *ngIf="item && bundles?.length > 0" class="table table-responsive table-striped table-bordered mt-4">
+  <div *ngIf="item && bundles?.length > 0" class="container table-bordered mt-4" cdkDropListGroup>
-    <tbody>
+    <div class="row header-row font-weight-bold">
-      <tr>
+      <div class="col-2 col-md-3 col-lg-4 row-element">{{'item.edit.bitstreams.headers.name' | translate}}</div>
-        <th>{{'item.edit.bitstreams.headers.name' | translate}}</th>
+      <div class="col-2 col-sm-3 row-element">{{'item.edit.bitstreams.headers.description' | translate}}</div>
-        <th>{{'item.edit.bitstreams.headers.description' | translate}}</th>
+      <div class="col-2 text-center row-element">{{'item.edit.bitstreams.headers.format' | translate}}</div>
-        <th class="text-center">{{'item.edit.bitstreams.headers.format' | translate}}</th>
+      <div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">{{'item.edit.bitstreams.headers.actions' | translate}}</div>
-        <th class="text-center">{{'item.edit.bitstreams.headers.actions' | translate}}</th>
+    </div>
-      </tr>
     <ds-item-edit-bitstream-bundle *ngFor="let bundle of bundles"
                                    [url]="url"
                                    [bundle]="bundle"
-                                     [item]="item">
+                                   [item]="item"
+                                   (moveBitstream)="moveBitstream($event)">
     </ds-item-edit-bitstream-bundle>
-    </tbody>
+  </div>
-  </table>
   <div *ngIf="bundles?.length === 0"
        class="alert alert-info w-100 d-inline-block mt-4" role="alert">
     {{'item.edit.bitstreams.empty' | translate}}

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.scss

@@ -0,0 +1,36 @@
+.header-row {
+  color: $table-dark-color;
+  background-color: $table-dark-bg;
+  border-color: $table-dark-border-color;
+}
+
+.bundle-row {
+  color: $table-head-color;
+  background-color: $table-head-bg;
+  border-color: $table-border-color;
+}
+
+.row-element {
+  padding: 12px;
+  padding: 0.75em;
+  border-top: $table-border-width solid $table-border-color;
+}
+
+.drag-handle:hover {
+  cursor: move;
+}
+
+.cdk-drag-preview {
+  margin-left: 0;
+  box-sizing: border-box;
+  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
+  background-color: white;
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}

src/app/+item-page/edit-item-page/item-bitstreams/item-bitstreams.component.ts

@@ -20,6 +20,7 @@ import { Item } from '../../../core/shared/item.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { PaginatedList } from '../../../core/data/paginated-list';
 import { Bundle } from '../../../core/shared/bundle.model';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'ds-item-bitstreams',
@@ -152,6 +153,21 @@ export class ItemBitstreamsComponent extends AbstractItemUpdateComponent impleme
     }
   }
 
+  /**
+   * A bitstream was moved within or between bundles
+   * Send updates to the object update service to track this move
+   * @param event
+   */
+  moveBitstream(event: CdkDragDrop<any>) {
+    const oldBundleId = event.previousContainer.id;
+    const newContainerId = event.container.id;
+    if (oldBundleId === newContainerId) {
+      // Move bitstreams within bundle
+    } else {
+      // Move bitstreams between bundles
+    }
+  }
+
   /**
    * Request the object updates service to discard all current changes to this item
    * Shows a notification to remind the user that they can undo this

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.html

@@ -1,7 +1,7 @@
 <ng-template #bundleView>
-  <tr>
+  <div class="row bundle-row">
-    <td colspan="3" class="font-weight-bold">{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundle.name } }}</td>
+    <div class="col-6 col-sm-7 col-md-8 col-lg-9 font-weight-bold row-element">{{'item.edit.bitstreams.bundle.name' | translate:{ name: bundle.name } }}</div>
-    <td class="text-center">
+    <div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">
       <div class="btn-group bundle-action-buttons">
         <button [routerLink]="['/items/', item.id, 'bitstreams', 'new']"
                 [queryParams]="{bundle: bundle.id}"
@@ -10,12 +10,11 @@
           <i class="fas fa-upload fa-fw"></i>
         </button>
       </div>
-    </td>
+    </div>
-  </tr>
+  </div>
-  <ng-container *ngVar="((updates$ | async) | dsObjectValues) as updateValues">
+  <div [id]="bundle.id" class="bundle-bitstreams-list" *ngVar="((updates$ | async) | dsObjectValues) as updateValues" cdkDropList (cdkDropListDropped)="drop($event)">
-    <tr *ngFor="let updateValue of updateValues"
+    <div class="row" *ngFor="let updateValue of updateValues" cdkDrag>
-        ds-item-edit-bitstream
+      <ds-item-edit-bitstream [fieldUpdate]="updateValue"
-        [fieldUpdate]="updateValue"
                               [url]="url"
                               [bundleUrl]="bundle.self"
                               [ngClass]="{
@@ -23,6 +22,10 @@
                   'table-danger': updateValue.changeType === 2,
                   'table-success': updateValue.changeType === 1
                 }">
-    </tr>
+        <button disabled slot="drag-handle" class="drag-handle btn btn-outline-secondary btn-sm" cdkDragHandle>
-  </ng-container>
+          <i class="fas fa-grip-vertical fa-fw" [title]="'item.edit.bitstreams.edit.buttons.drag' | translate"></i>
+        </button>
+      </ds-item-edit-bitstream>
+    </div>
+  </div>
 </ng-template>

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream-bundle/item-edit-bitstream-bundle.component.ts

@@ -7,9 +7,11 @@ import { toBitstreamsArray } from '../../../../core/shared/item-bitstreams-utils
 import { switchMap } from 'rxjs/operators';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { Item } from '../../../../core/shared/item.model';
+import { CdkDragDrop } from '@angular/cdk/drag-drop';
 
 @Component({
   selector: 'ds-item-edit-bitstream-bundle',
+  styleUrls: ['../item-bitstreams.component.scss'],
   templateUrl: './item-edit-bitstream-bundle.component.html',
 })
 /**
@@ -37,6 +39,11 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
    */
   @Input() url: string;
 
+  /**
+   * Event emitter for moving a bitstream within or across bundles
+   */
+  @Output() moveBitstream: EventEmitter<any> = new EventEmitter();
+
   /**
    * The updates to the current bundle
    */
@@ -55,4 +62,12 @@ export class ItemEditBitstreamBundleComponent implements OnInit {
 
     this.viewContainerRef.createEmbeddedView(this.bundleView);
   }
+
+  /**
+   * A bitstream was moved, emit the event to moveBitstream
+   * @param event
+   */
+  drop(event: CdkDragDrop<any>) {
+    this.moveBitstream.emit(event);
+  }
 }

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.html

@@ -1,13 +1,14 @@
-<td class="w-100">
+<ng-template #bitstreamView>
+  <div class="col-2 col-md-3 col-lg-4 row-element">
     {{ bitstream.name }}
-</td>
+  </div>
-<td>
+  <div class="col-2 col-sm-3 row-element">
     {{ bitstream.description }}
-</td>
+  </div>
-<td class="text-center">
+  <div class="col-2 text-center row-element">
     {{ (format$ | async).shortDescription }}
-</td>
+  </div>
-<td class="text-center">
+  <div class="col-6 col-sm-5 col-md-4 col-lg-3 text-center row-element">
     <div class="btn-group relationship-action-buttons">
       <a [href]="bitstream?.content"
               class="btn btn-outline-primary btn-sm"
@@ -28,5 +29,8 @@
               title="{{'item.edit.bitstreams.edit.buttons.undo' | translate}}">
         <i class="fas fa-undo-alt fa-fw"></i>
       </button>
+      <ng-content select="[slot=drag-handle]">
+      </ng-content>
     </div>
-</td>
+  </div>
+</ng-template>

src/app/+item-page/edit-item-page/item-bitstreams/item-edit-bitstream/item-edit-bitstream.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnChanges, OnInit, SimpleChanges, ViewChild, ViewContainerRef } from '@angular/core';
 import { FieldUpdate } from '../../../../core/data/object-updates/object-updates.reducer';
 import { Bitstream } from '../../../../core/shared/bitstream.model';
 import { cloneDeep } from 'lodash';
@@ -9,14 +9,20 @@ import { BitstreamFormat } from '../../../../core/shared/bitstream-format.model'
 import { getRemoteDataPayload, getSucceededRemoteData } from '../../../../core/shared/operators';
 
 @Component({
-  // tslint:disable-next-line:component-selector
+  selector: 'ds-item-edit-bitstream',
-  selector: '[ds-item-edit-bitstream]',
+  styleUrls: ['../item-bitstreams.component.scss'],
   templateUrl: './item-edit-bitstream.component.html',
 })
 /**
  * Component that displays a single bitstream of an item on the edit page
  */
-export class ItemEditBitstreamComponent implements OnChanges {
+export class ItemEditBitstreamComponent implements OnChanges, OnInit {
+
+  /**
+   * The view on the bitstream
+   */
+  @ViewChild('bitstreamView') bitstreamView;
+
   /**
    * The current field, value and state of the bitstream
    */
@@ -42,7 +48,12 @@ export class ItemEditBitstreamComponent implements OnChanges {
    */
   format$: Observable<BitstreamFormat>;
 
-  constructor(private objectUpdatesService: ObjectUpdatesService) {
+  constructor(private objectUpdatesService: ObjectUpdatesService,
+              private viewContainerRef: ViewContainerRef) {
+  }
+
+  ngOnInit(): void {
+    this.viewContainerRef.createEmbeddedView(this.bitstreamView);
   }
 
   /**

yarn.lock

@@ -35,6 +35,15 @@
   dependencies:
     tslib "^1.9.0"
 
+"@angular/cdk@^7.3.7":
+  version "7.3.7"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-7.3.7.tgz#ce1ad53ba04beb9c8e950acc5691ea0143753764"
+  integrity sha512-xbXxhHHKGkVuW6K7pzPmvpJXIwpl0ykBnvA2g+/7Sgy5Pd35wCC+UtHD9RYczDM/mkygNxMQtagyCErwFnDtQA==
+  dependencies:
+    tslib "^1.7.1"
+  optionalDependencies:
+    parse5 "^5.0.0"
+
 "@angular/cli@^6.1.5":
   version "6.1.5"
   resolved "https://registry.yarnpkg.com/@angular/cli/-/cli-6.1.5.tgz#312c062631285ff06fd07ecde8afe22cdef5a0e1"
@@ -7757,6 +7766,11 @@ parse-passwd@^1.0.0:
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
   integrity sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=
 
+parse5@^5.0.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/parse5/-/parse5-5.1.0.tgz#c59341c9723f414c452975564c7c00a68d58acd2"
+  integrity sha512-fxNG2sQjHvlVAYmzBZS9YlDp6PTSSDwa98vkD4QgVDDCAo84z5X1t5XyJQ62ImdLXx5NdIIfihey6xpum9/gRQ==
+
 parseqs@0.0.5:
   version "0.0.5"
   resolved "https://registry.yarnpkg.com/parseqs/-/parseqs-0.0.5.tgz#d5208a3738e46766e291ba2ea173684921a8b89d"
@@ -10815,6 +10829,11 @@ tsickle@^0.32.1:
     source-map "^0.6.0"
     source-map-support "^0.5.0"
 
+tslib@^1.7.1:
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
+  integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==
+
 tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"