Add dynamic draggable list (#1494)

* feat: add dynamic draggable list

* feat: fix comments

* feat: fix lintern

Co-authored-by: Patricio Albizu <[email protected]>

Author: palbizu

projects/components/src/draggable-list/draggable-list.component.scss

@@ -1,4 +1,4 @@
-@import 'color-palette';
+@import 'mixins';
 
 .draggable-list .draggable-item {
   cursor: move;
@@ -9,3 +9,21 @@
     cursor: not-allowed;
   }
 }
+
+.draggable-list.cdk-drop-list-dragging .draggable-item:not(.cdk-drag-placeholder) {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drag-placeholder {
+  opacity: 0;
+}
+
+.cdk-drag-animating {
+  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+}
+
+.cdk-drag-preview {
+  box-sizing: border-box;
+  border-radius: 4px;
+  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);
+}

projects/components/src/draggable-list/draggable-list.component.ts

@@ -9,20 +9,28 @@ import {
   Output,
   QueryList
 } from '@angular/core';
+import { queryListAndChanges$ } from '@hypertrace/common';
+import { Observable } from 'rxjs';
+import { map } from 'rxjs/operators';
 import { DraggableItemComponent } from './draggable-item/draggable-item.component';
 
 @Component({
   selector: 'ht-draggable-list',
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./draggable-list.component.scss'],
   template: `
-    <div cdkDropList class="draggable-list" (cdkDropListDropped)="this.dropList($event)">
+    <div
+      class="draggable-list"
+      *ngIf="this.draggableItems$ | async as draggableItems"
+      cdkDropList
+      (cdkDropListDropped)="this.dropList($event, draggableItems)"
+    >
       <div
-        *ngFor="let draggableItem of this.draggableItems"
-        cdkDrag
+        *ngFor="let draggableItem of draggableItems"
         class="draggable-item"
-        [ngClass]="{ disabled: disabled || draggableItem.disabled }"
-        [cdkDragDisabled]="disabled || draggableItem.disabled"
+        [ngClass]="{ disabled: this.disabled || draggableItem.disabled }"
+        [cdkDragDisabled]="this.disabled || draggableItem.disabled"
+        cdkDrag
       >
         <ng-container *ngTemplateOutlet="draggableItem.content"></ng-container>
       </div>
@@ -39,14 +47,19 @@ export class DraggableListComponent<T> implements AfterContentInit {
   @ContentChildren(DraggableItemComponent)
   public draggableItemsRef!: QueryList<DraggableItemComponent<T>>;
 
-  public draggableItems: DraggableItemComponent<T>[] = [];
+  public draggableItems$!: Observable<DraggableItemComponent<T>[]>;
 
   public ngAfterContentInit(): void {
-    this.draggableItems = this.draggableItemsRef.toArray();
+    this.draggableItems$ = queryListAndChanges$(this.draggableItemsRef).pipe(
+      map(draggableItems => draggableItems.toArray())
+    );
   }
 
-  public dropList(event: CdkDragDrop<DraggableItemComponent<unknown>[]>): void {
-    moveItemInArray(this.draggableItems, event.previousIndex, event.currentIndex);
-    this.draggableListChange.emit(this.draggableItems.map(dragabbleItem => dragabbleItem.data!));
+  public dropList(
+    event: CdkDragDrop<DraggableItemComponent<unknown>[]>,
+    draggableItems: DraggableItemComponent<T>[]
+  ): void {
+    moveItemInArray(draggableItems, event.previousIndex, event.currentIndex);
+    this.draggableListChange.emit(draggableItems.map(dragabbleItem => dragabbleItem.data!));
   }
 }