Initial task column changing

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

@@ -11,7 +11,7 @@
     {{ columnData.name }}
 
     <span class="badge" title="Tasks in Column">
-        {{ columnData.ownTask && columnData.ownTask.length || 0 }}
+        {{ columnData.tasks && columnData.tasks.length || 0 }}
     </span>
 
     <span class="icon icon-angle-double-up"

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

@@ -64,16 +64,6 @@ export class TaskDisplay implements OnInit {
 
         boardService.activeBoardChanged.subscribe((board: Board) => {
             this.activeBoard = board;
-
-            let menuText = 'Move to Column: <select>';
-
-            board.columns.forEach((column: Column) => {
-                menuText += '<option value="column.id">' + column.name + '</option>';
-            });
-
-            menuText += '</select>';
-
-            this.selectMenuItem = new ContextMenuItem(menuText, null, false, false);
         });
 
         this.initMarked();
@@ -81,19 +71,19 @@ export class TaskDisplay implements OnInit {
 
     ngOnInit() {
         this.generateContextMenuItems();
-
-        this.totalTasks = 0;
-        this.completeTasks = 0;
-
-        // Updates the counts above
         this.getTaskDescription();
-
-        this.percentComplete = this.completeTasks / this.totalTasks;
     }
 
     getTaskDescription(): SafeHtml {
-        return this.sanitizer.bypassSecurityTrustHtml(
+        this.totalTasks = 0;
+        this.completeTasks = 0;
+
+        let html = this.sanitizer.bypassSecurityTrustHtml(
             marked(this.taskData.description));
+
+        this.percentComplete = this.completeTasks / this.totalTasks;
+
+        return html;
     }
 
     // Expects a color in full HEX with leading #, e.g. #ffffe0
@@ -106,6 +96,37 @@ export class TaskDisplay implements OnInit {
         return yiq >= 140 ? '#333333' : '#efefef';
     }
 
+    private getMoveMenuItem() {
+        let menuText = 'Move to Column: <select id="columnsList' + this.taskData.id + '">';
+
+        this.activeBoard.columns.forEach((column: Column) => {
+            menuText += '<option value="' + column.id + '">' + column.name + '</option>';
+        });
+
+        menuText += '</select>';
+
+        return new ContextMenuItem(menuText,
+                                   () => { this.changeTaskColumn(); },
+                                   false, false);
+    }
+
+    private changeTaskColumn() {
+        let select = document.getElementById('columnsList' + this.taskData.id) as HTMLSelectElement;
+
+        this.taskData.column_id = +select[select.selectedIndex].value;
+
+        this.boardService.updateTask(this.taskData)
+            .subscribe((response: ApiResponse) => {
+                response.alerts.forEach(note => this.notes.add(note));
+
+                if (response.status !== 'success') {
+                    return;
+                }
+
+                this.boardService.updateActiveBoard(response.data[2][0]);
+            });
+    }
+
     private getPercentStyle() {
         return this.sanitizer.bypassSecurityTrustStyle(
             'padding: 0; height: 5px; background-color: rgba(0, 0, 0, .4); ' +
@@ -118,7 +139,7 @@ export class TaskDisplay implements OnInit {
             new ContextMenuItem('Edit Task', this.editTask),
             new ContextMenuItem('Remove Task', this.removeTask),
             new ContextMenuItem('', null, true),
-            this.selectMenuItem,
+            this.getMoveMenuItem(),
             new ContextMenuItem('', null, true),
             new ContextMenuItem('Add Task', this.addTask)
         ];
@@ -133,11 +154,11 @@ export class TaskDisplay implements OnInit {
     }
 
     private getMenuItem(text: string): ContextMenuItem {
-        let menuText = text + ' to Board: <select>';
+        let menuText = text + ' to Board: <select id="boardsList' + text + '">';
 
         this.boardsList.forEach((board: Board) => {
             if (board.name !== this.activeBoard.name) {
-                menuText += '<option value="board.id">' + board.name + '</option>';
+                menuText += '<option value="' + board.id + '">' + board.name + '</option>';
             }
         });
 

src/app/shared/context-menu/context-menu.component.ts

@@ -16,7 +16,6 @@ export class ContextMenu {
     @Input('menu-items') menuItems: Array<ContextMenuItem>;
 
     isOpen = false;
-    animate = true;
 
     constructor(private el: ElementRef,
                 private menuService: ContextMenuService,

src/app/shared/modal/modal.component.html

@@ -4,8 +4,7 @@
 
     <div class="modal"
         [ngClass]="{ wide: wide, animated: animate, 'modal-closed': !isOpen }"
-        (click)="filterClick($event)"
-        (keyup.enter)="clickDefaultAction()">
+        (click)="filterClick($event)">
         <div class="title" *ngIf="modalTitle">
             <h2>
                 {{ modalTitle }}

src/app/shared/modal/modal.component.ts

@@ -10,7 +10,10 @@ import { ModalService } from './modal.service';
 @Component({
     selector: 'tb-modal',
     templateUrl: 'app/shared/modal/modal.component.html',
-    host: { '(document:keyup)': 'keyup($event)' }
+    host: {
+        '(document:keyup.enter)': 'keyup($event)',
+        '(document:keyup.escape)': 'keyup($event)'
+    }
 })
 export class Modal implements OnInit {
     @Input('modal-id') modalId = '';
@@ -39,6 +42,10 @@ export class Modal implements OnInit {
         if (event.keyCode === 27) {
             this.modalService.close(this.modalId, true);
         }
+
+        if (event.keyCode === 13) {
+            this.clickDefaultAction();
+        }
     }
 
     private filterClick(event: Event): void {