Board drag/drop now uses Angular CDK - minor cleanup

src/app/board/board.component.html

@@ -73,7 +73,7 @@
   <p></p>
 </div>
 
-<div class="board" *ngIf="activeBoard">
+<div class="board" cdkDropListGroup *ngIf="activeBoard">
   <tb-column class="column" [id]="column.id"
     *ngFor="let column of activeBoard.columns"
     [column]="column"

src/app/board/board.component.ts

@@ -6,7 +6,7 @@ import {
   ApiResponse,
   Board,
   Column,
-  User,
+  User
 } from '../shared/models';
 import {
   AuthService,
@@ -180,9 +180,11 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
   updateBoards(): void {
     this.boardService.getBoards().subscribe((response: ApiResponse) => {
       this.boards = [];
+
       if (response.data.length > 1) {
         this.updateBoardsList(response.data[1]);
       }
+
       this.loading = false;
     });
   }
@@ -252,18 +254,5 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
     }
   }
 
-  /* istanbul ignore next */
-  private changeTaskColumn(taskId: number, toColumnId: number) {
-    const column = this.activeBoard.columns
-      .find(col => col.id === toColumnId);
-    const task = column.tasks.find(ta => ta.id === taskId);
-
-    if (task) {
-      task.column_id = toColumnId;
-
-      this.boardService.updateTask(task).subscribe();
-    }
-  }
-
 }
 

src/app/board/column/column.component.html

@@ -72,9 +72,11 @@
   </button>
 </div>
 
-<div class="tasks" *ngIf="columnData" cdkDropList
+<div class="tasks" *ngIf="columnData"
-  [cdkDropListData]="columnData.tasks">
+  cdkDropList
-  <tb-task class="task-container" [id]="task.id"
+  [cdkDropListData]="columnData.tasks"
+  (cdkDropListDropped)="drop($event, +columnData.id - 1)">
+  <tb-task class="task-container" [id]="task.id" cdkDrag
     *ngFor="let task of columnData.tasks"
     [task]="task" [boards]="boards"
     [add-task]="getShowModalFunction()"

src/app/board/column/column.component.ts

@@ -8,6 +8,11 @@ import {
   Output
 } from '@angular/core';
 import { DomSanitizer, } from '@angular/platform-browser';
+import {
+  CdkDragDrop,
+  moveItemInArray,
+  transferArrayItem
+} from '@angular/cdk/drag-drop';
 
 import {
   ApiResponse,
@@ -39,7 +44,6 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
   private fileUpload: any;
   private subs = [];
 
-  public tasks: Task[];
   public viewTaskActivities: ActivitySimple[];
 
   public showActivity: boolean;
@@ -90,7 +94,6 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
               public boardService: BoardService,
               private sanitizer: DomSanitizer) {
     this.templateElement = elRef.nativeElement;
-    this.tasks = [];
     this.collapseTasks = false;
     this.sortOption = 'pos';
 
@@ -240,6 +243,24 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
       });
   }
 
+  drop(event: CdkDragDrop<string[]>, colIndex: number) {
+    if (event.previousContainer === event.container) {
+      moveItemInArray(event.container.data,
+        event.previousIndex, event.currentIndex);
+    } else {
+      transferArrayItem(event.previousContainer.data,
+        event.container.data, event.previousIndex, event.currentIndex);
+    }
+
+    this.activeBoard.columns[colIndex].tasks.forEach((item, index) => {
+      item.position = index + 1;
+      item.column_id = this.activeBoard.columns[colIndex].id;
+    });
+
+    const task = this.activeBoard.columns[colIndex].tasks[event.currentIndex];
+    this.boardService.updateTask(task).subscribe(() => {});
+  }
+
   updateTask() {
     this.saving = true;
 

src/app/board/task/task.component.ts

@@ -6,6 +6,7 @@ import {
   Output
 } from '@angular/core';
 import { DomSanitizer } from '@angular/platform-browser';
+import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
 
 import {
   ApiResponse,
@@ -83,23 +84,6 @@ export class TaskDisplayComponent implements OnInit {
     this.convertTaskDescription();
   }
 
-  private convertTaskDescription() {
-    if (!this.taskData || !this.taskData.description) {
-      return;
-    }
-
-    const data = this.boardService.convertMarkdown(
-      this.taskData.description, this.markedCallback, true
-    );
-
-    data.html.replace(/(\{)([^}]+)(\})/g, '{{ "{" }}$2{{ "}"  }}');
-    if (data.counts.total) {
-      this.percentComplete = data.counts.complete / data.counts.total;
-    }
-
-    this.taskData.html = this.sanitizer.bypassSecurityTrustHtml(data.html);
-  }
-
   getPercentStyle() {
     return this.sanitizer.bypassSecurityTrustStyle(
       'padding: 0; height: 5px; background-color: rgba(0, 0, 0, .4); ' +
@@ -223,6 +207,23 @@ export class TaskDisplayComponent implements OnInit {
       });
   }
 
+  private convertTaskDescription() {
+    if (!this.taskData || !this.taskData.description) {
+      return;
+    }
+
+    const data = this.boardService.convertMarkdown(
+      this.taskData.description, this.markedCallback, true
+    );
+
+    data.html.replace(/(\{)([^}]+)(\})/g, '{{ "{" }}$2{{ "}"  }}');
+    if (data.counts.total) {
+      this.percentComplete = data.counts.complete / data.counts.total;
+    }
+
+    this.taskData.html = this.sanitizer.bypassSecurityTrustHtml(data.html);
+  }
+
   private checkDueDate() {
     if (!this.taskData || this.taskData.due_date === '') {
       return;