Update task description to custom component and initial view task modal

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

@@ -79,9 +79,11 @@
         [task]="task" [boards]="boards"
         [add-task]="getShowModalFunction()"
         [edit-task]="getShowModalFunction(task.id)"
+        [view-task]="getShowViewModalFunction(task.id)"
         [remove-task]="getRemoveTaskFunction(task.id)"
         (on-update-boards)="callBoardUpdate();"
-        [collapse]="collapseTasks"></tb-task>
+        [collapse]="collapseTasks"
+        (dblclick)="showViewModal(task.id)"></tb-task>
 </div>
 
 <tb-context-menu [menu-items]="contextMenuItems"></tb-context-menu>
@@ -94,7 +96,9 @@
     </div>
     <div class="buttons">
         <button class="flat"
-            (click)="modal.close(MODAL_CONFIRM_ID + columnData.id);removeTask()">{{ strings['yes'] }}</button>
+            (click)="modal.close(MODAL_CONFIRM_ID + columnData.id);removeTask()">
+            {{ strings['yes'] }}
+        </button>
         <button #defaultAction #focusMe
             (click)="modal.close(MODAL_CONFIRM_ID + columnData.id)">
             {{ strings['no'] }}
@@ -102,6 +106,19 @@
     </div>
 </tb-modal>
 
+<tb-modal *ngIf="activeBoard"
+    modal-title="{{ strings['boards_viewTask'] }} - {{ viewModalProps.title }}"
+    modal-id="{{ MODAL_VIEW_ID + columnData.id }}"
+    wide="true">
+
+    <div class="description"
+        [style.background-color]="viewModalProps.color">
+        {{ viewModalProps.description }}
+        <!--<ng-template ngNonBindable-->
+        <!--    *compile="getTaskDescription()"></ng-template>-->
+    </div>
+</tb-modal>
+
 <tb-modal *ngIf="activeBoard"
     modal-title="{{ modalProps.id === 0
         ? strings['boards_addTask']

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

@@ -46,10 +46,12 @@ export class ColumnDisplay implements OnInit {
     private sortOption: string;
 
     private MODAL_ID: string;
+    private MODAL_VIEW_ID: string;
     private MODAL_CONFIRM_ID: string;
 
     private quickAdd: Task;
     private modalProps: Task;
+    private viewModalProps: Task;
     private taskToRemove: number;
     private taskLimit: number;
 
@@ -70,10 +72,12 @@ export class ColumnDisplay implements OnInit {
         this.sortOption = 'pos';
 
         this.MODAL_ID = 'add-task-form-';
+        this.MODAL_VIEW_ID = 'view-task-form-';
         this.MODAL_CONFIRM_ID = 'task-remove-confirm';
 
         this.quickAdd = new Task();
         this.modalProps = new Task();
+        this.viewModalProps = new Task();
 
         stringsService.stringsChanged.subscribe(newStrings => {
             this.strings = newStrings;
@@ -295,6 +299,10 @@ export class ColumnDisplay implements OnInit {
         return () => { this.showModal(taskId); };
     }
 
+    private getShowViewModalFunction(taskId: number): Function {
+        return () => { this.showViewModal(taskId); };
+    }
+
     private quickAddClicked(event: any) {
         this.preventEnter(event);
 
@@ -309,6 +317,20 @@ export class ColumnDisplay implements OnInit {
         this.quickAdd = new Task();
     }
 
+    private showViewModal(taskId: number) {
+        let viewTask = this.columnData.tasks
+            .filter(task => task.id === taskId)[0];
+
+        this.viewModalProps = new Task(viewTask.id, viewTask.title,
+                                       viewTask.description, viewTask.color,
+                                       viewTask.due_date, viewTask.points,
+                                       viewTask.position, viewTask.column_id,
+                                       viewTask.comments, viewTask.attachments,
+                                       viewTask.assignees, viewTask.categories);
+
+        this.modal.open(this.MODAL_VIEW_ID + this.columnData.id);
+    }
+
     private showModal(taskId: number = 0) {
         if (taskId === 0) {
             this.modalProps = new Task();

src/app/board/task/task.component.html

@@ -18,8 +18,10 @@
             {{ taskData.points }}</span>
     </h4>
 
-    <div class="description" *ngIf="!isCollapsed"
-        [innerHTML]="getTaskDescription()"></div>
+    <div class="description" *ngIf="!isCollapsed">
+        <ng-template ngNonBindable
+            *compile="getTaskDescription()"></ng-template>
+    </div>
 
     <div class="stats">
         <span *ngIf="userOptions.show_assignee">

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

@@ -48,6 +48,7 @@ export class TaskDisplay implements OnInit {
     @Input('task') taskData: Task;
     @Input('add-task') addTask: Function;
     @Input('edit-task') editTask: Function;
+    @Input('view-task') viewTask: Function;
     @Input('remove-task') removeTask: Function;
     @Input('collapse') isCollapsed: boolean;
 
@@ -103,9 +104,10 @@ export class TaskDisplay implements OnInit {
         this.checkDueDate();
     }
 
-    getTaskDescription(): SafeHtml {
-        let html = this.sanitizer.bypassSecurityTrustHtml(
-            marked(this.taskData.description, this.markedCallback));
+    getTaskDescription(): string {
+        let html = marked(this.taskData.description, this.markedCallback);
+        // Escape curly braces for dynamic component.
+        html = html.replace(/(\{)([^}]+)(\})/g, '{{ "{" }}$2{{ "}" }}');
 
         return html;
     }
@@ -211,9 +213,14 @@ export class TaskDisplay implements OnInit {
     }
 
     private changeTaskColumn() {
-        let select = document.getElementById('columnsList' + this.taskData.id) as HTMLSelectElement;
+        let select = document.getElementById('columnsList' + this.taskData.id) as HTMLSelectElement,
+            id = +select[select.selectedIndex].value;
 
-        this.taskData.column_id = +select[select.selectedIndex].value;
+        if (id === 0) {
+            return;
+        }
+
+        this.taskData.column_id = id;
 
         this.boardService.updateTask(this.taskData)
             .subscribe((response: ApiResponse) => {
@@ -244,7 +251,7 @@ export class TaskDisplay implements OnInit {
 
     private generateContextMenuItems() {
         this.contextMenuItems = [
-            new ContextMenuItem(this.strings.boards_viewTask),
+            new ContextMenuItem(this.strings.boards_viewTask, this.viewTask),
             new ContextMenuItem(this.strings.boards_editTask, this.editTask),
             new ContextMenuItem(this.strings.boards_removeTask, this.removeTask),
             new ContextMenuItem('', null, true),