From c0bccb3babd1b238e5222752a11c445fd35bc4b9 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Fri, 18 Mar 2022 17:20:09 -0300
Subject: [PATCH 1/3] feat: add dynamic draggable list

---
 .../draggable-list.component.scss             | 20 +++++++++++++-
 .../draggable-list.component.ts               | 27 ++++++++++++-------
 2 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/projects/components/src/draggable-list/draggable-list.component.scss b/projects/components/src/draggable-list/draggable-list.component.scss
index 7c786c961..c1993cb32 100644
--- a/projects/components/src/draggable-list/draggable-list.component.scss
+++ b/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);
+}
diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
index f4b7b3d81..48d9905b4 100644
--- a/projects/components/src/draggable-list/draggable-list.component.ts
+++ b/projects/components/src/draggable-list/draggable-list.component.ts
@@ -9,6 +9,9 @@ import {
   Output,
   QueryList
 } from '@angular/core';
+import { queryListAndChanges$ } from '@hypertrace/common';
+import { Observable } from 'rxjs';
+import { map, tap } from 'rxjs/operators';
 import { DraggableItemComponent } from './draggable-item/draggable-item.component';
 
 @Component({
@@ -16,13 +19,13 @@ import { DraggableItemComponent } from './draggable-item/draggable-item.componen
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./draggable-list.component.scss'],
   template: `
-    <div cdkDropList class="draggable-list" (cdkDropListDropped)="this.dropList($event)">
+    <div class="draggable-list" cdkDropList (cdkDropListDropped)="this.dropList($event)">
       <div
-        *ngFor="let draggableItem of this.draggableItems"
-        cdkDrag
+        *ngFor="let draggableItem of this.draggableItems$ | async"
         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 +42,20 @@ 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!));
+    this.draggableItems$ = this.draggableItems$.pipe(
+      tap(draggableItems => {
+        moveItemInArray(draggableItems, event.previousIndex, event.currentIndex);
+        this.draggableListChange.emit(draggableItems.map(dragabbleItem => dragabbleItem.data!));
+      })
+    );
   }
 }

From 7af8591f8039d4a02035d0b187270f7f703f0250 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Mon, 21 Mar 2022 15:37:59 -0300
Subject: [PATCH 2/3] feat: fix comments

---
 .../draggable-list.component.ts               | 25 +++++++++++--------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
index 48d9905b4..8ec5537e2 100644
--- a/projects/components/src/draggable-list/draggable-list.component.ts
+++ b/projects/components/src/draggable-list/draggable-list.component.ts
@@ -11,7 +11,7 @@ import {
 } from '@angular/core';
 import { queryListAndChanges$ } from '@hypertrace/common';
 import { Observable } from 'rxjs';
-import { map, tap } from 'rxjs/operators';
+import { map } from 'rxjs/operators';
 import { DraggableItemComponent } from './draggable-item/draggable-item.component';
 
 @Component({
@@ -19,9 +19,14 @@ import { DraggableItemComponent } from './draggable-item/draggable-item.componen
   changeDetection: ChangeDetectionStrategy.OnPush,
   styleUrls: ['./draggable-list.component.scss'],
   template: `
-    <div class="draggable-list" cdkDropList (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$ | async"
+        *ngFor="let draggableItem of draggableItems"
         class="draggable-item"
         [ngClass]="{ disabled: this.disabled || draggableItem.disabled }"
         [cdkDragDisabled]="this.disabled || draggableItem.disabled"
@@ -48,14 +53,14 @@ export class DraggableListComponent<T> implements AfterContentInit {
     this.draggableItems$ = queryListAndChanges$(this.draggableItemsRef).pipe(
       map(draggableItems => draggableItems.toArray())
     );
+    ``;
   }
 
-  public dropList(event: CdkDragDrop<DraggableItemComponent<unknown>[]>): void {
-    this.draggableItems$ = this.draggableItems$.pipe(
-      tap(draggableItems => {
-        moveItemInArray(draggableItems, event.previousIndex, event.currentIndex);
-        this.draggableListChange.emit(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!));
   }
 }

From 9ecdbe8bedac8d2ffb7466608daa46d96591b3d2 Mon Sep 17 00:00:00 2001
From: Patricio Albizu <patricioalbizu@Patricios-MacBook-Pro.local>
Date: Mon, 21 Mar 2022 15:46:52 -0300
Subject: [PATCH 3/3] feat: fix lintern

---
 .../components/src/draggable-list/draggable-list.component.ts    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/projects/components/src/draggable-list/draggable-list.component.ts b/projects/components/src/draggable-list/draggable-list.component.ts
index 8ec5537e2..454b2f0be 100644
--- a/projects/components/src/draggable-list/draggable-list.component.ts
+++ b/projects/components/src/draggable-list/draggable-list.component.ts
@@ -53,7 +53,6 @@ export class DraggableListComponent<T> implements AfterContentInit {
     this.draggableItems$ = queryListAndChanges$(this.draggableItemsRef).pipe(
       map(draggableItems => draggableItems.toArray())
     );
-    ``;
   }
 
   public dropList(