feat(admin-ui): Enable drag-drop reordering of Collections

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.html

@@ -3,7 +3,7 @@
     class="tree-node"
     #dropList
     [cdkDropListData]="collectionTree"
-    [cdkDropListDisabled]="true"
+    [cdkDropListDisabled]="false"
     (cdkDropListDropped)="drop($event)"
 >
     <div
@@ -36,12 +36,9 @@
                 <clr-icon shape="edit"></clr-icon>
                 {{ 'common.edit' | translate }}
             </a>
-            <!--
-                TODO: reenable once it is possible to drop into nested lists. See https://github.com/angular/material2/issues/14093
                 <div class="drag-handle" cdkDragHandle>
                     <clr-icon shape="drag-handle" size="24"></clr-icon>
                 </div>
-            -->
             <vdr-dropdown>
                 <button class="icon-button" vdrDropdownTrigger>
                     <clr-icon shape="ellipsis-vertical"></clr-icon>

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.scss

@@ -7,6 +7,9 @@
     background-color: white;
     color: rgba(0, 0, 0, 0.87);
     transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+    margin-bottom: 2px;
+    border-left: 2px solid transparent;
+    transition: border-left-color 0.2s;
 
     &.private {
         background-color: $color-grey-200;
@@ -38,6 +41,11 @@
     display: block;
     background: white;
     overflow: hidden;
+    &.cdk-drop-list-dragging {
+        > .collection {
+            border-left-color: $color-primary-300;
+        }
+    }
 }
 
 .drag-placeholder {

packages/admin-ui/src/app/catalog/components/collection-tree/collection-tree-node.component.ts

@@ -1,4 +1,4 @@
-import { CdkDragDrop } from '@angular/cdk/drag-drop';
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
 import { ChangeDetectionStrategy, Component, Input, OnInit, Optional, SkipSelf } from '@angular/core';
 
 import { Collection } from '../../../common/generated-types';
@@ -81,6 +81,7 @@ export class CollectionTreeNodeComponent implements OnInit {
     }
 
     drop(event: CdkDragDrop<Collection.Fragment | RootNode<Collection.Fragment>>) {
+        moveItemInArray(this.collectionTree.children, event.previousIndex, event.currentIndex);
         this.root.onDrop(event);
     }