feat: Draggable List (#1483)

* Dragganble List in progress

* feat: add draggable list

* feat: fixing lint

* feat: fixing lint

* feat: fix prettier

* feat: adding disabled styles and modify child component

* feat: adding T to draggable list

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

Author: palbizu

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

@@ -0,0 +1,15 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ContentHolder, CONTENT_HOLDER_TEMPLATE } from '../../public-api';
+
+@Component({
+  selector: 'ht-draggable-item',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: CONTENT_HOLDER_TEMPLATE
+})
+export class DraggableItemComponent<T> extends ContentHolder {
+  @Input()
+  public disabled: boolean = false;
+
+  @Input()
+  public data?: T;
+}

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

@@ -0,0 +1,11 @@
+@import 'color-palette';
+
+.draggable-list .draggable-item {
+  cursor: move;
+
+  &.disabled {
+    background-color: $gray-2;
+    color: $gray-5;
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,52 @@
+import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  AfterContentInit,
+  ChangeDetectionStrategy,
+  Component,
+  ContentChildren,
+  EventEmitter,
+  Input,
+  Output,
+  QueryList
+} from '@angular/core';
+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
+        *ngFor="let draggableItem of this.draggableItems"
+        cdkDrag
+        class="draggable-item"
+        [ngClass]="{ disabled: disabled || draggableItem.disabled }"
+        [cdkDragDisabled]="disabled || draggableItem.disabled"
+      >
+        <ng-container *ngTemplateOutlet="draggableItem.content"></ng-container>
+      </div>
+    </div>
+  `
+})
+export class DraggableListComponent<T> implements AfterContentInit {
+  @Input()
+  public disabled: boolean = false;
+
+  @Output()
+  public readonly draggableListChange: EventEmitter<T[]> = new EventEmitter();
+
+  @ContentChildren(DraggableItemComponent)
+  public draggableItemsRef!: QueryList<DraggableItemComponent<T>>;
+
+  public draggableItems: DraggableItemComponent<T>[] = [];
+
+  public ngAfterContentInit(): void {
+    this.draggableItems = this.draggableItemsRef.toArray();
+  }
+
+  public dropList(event: CdkDragDrop<DraggableItemComponent<unknown>[]>): void {
+    moveItemInArray(this.draggableItems, event.previousIndex, event.currentIndex);
+    this.draggableListChange.emit(this.draggableItems.map(dragabbleItem => dragabbleItem.data!));
+  }
+}

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

@@ -0,0 +1,12 @@
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { DraggableItemComponent } from './draggable-item/draggable-item.component';
+import { DraggableListComponent } from './draggable-list.component';
+
+@NgModule({
+  declarations: [DraggableListComponent, DraggableItemComponent],
+  imports: [CommonModule, DragDropModule],
+  exports: [DraggableListComponent, DraggableItemComponent]
+})
+export class DraggableListModule {}

projects/components/src/public-api.ts

@@ -65,6 +65,11 @@ export * from './description/description.module';
 export * from './divider/divider.component';
 export * from './divider/divider.module';
 
+// Draggable list
+export { DraggableListComponent } from './draggable-list/draggable-list.component';
+export { DraggableItemComponent } from './draggable-list/draggable-item/draggable-item.component';
+export { DraggableListModule } from './draggable-list/draggable-list.module';
+
 // Dropdown menu
 export { MenuDropdownComponent } from './menu-dropdown/menu-dropdown.component';
 export { MenuItemComponent } from './menu-dropdown/menu-item/menu-item.component';