WIP

src/app/board/board.component.html

@@ -63,3 +63,41 @@
         [column]="column"></tb-column>
 </div>
 
+<tb-modal modal-title="Add Task" modal-id="{{ MODAL_ID }}">
+    <label>
+        Title
+        <input type="text" name="title" placeholder="Task Title"
+            [(ngModel)]="modalProps.title">
+    </label>
+
+    <label>
+        Description
+        <textarea name="description" rows="5"
+            placeholder="What needs to get done?"
+            [(ngModel)]="modalProps.description"></textarea>
+    </label>
+
+    <label *ngIf="activeBoard">
+        Assignees
+        <select name="assignees" multiple [(ngModel)]="modalProps.assignees">
+            <option *ngFor="let user of activeBoard.users"
+                [ngValue]="user">{{ user.username }}</option>
+        </select>
+    </label>
+
+    <pre>{{ modalProps | json }}</pre>
+    <div class="buttons">
+        <button #defaultAction
+            (click)="addEditTask()" [disabled]="saving">
+            <i class="icon"
+                [ngClass]="{ 'icon-plus': modalProps.prefix === '',
+                    'icon-floppy': modalProps.prefix !== '' }"></i>
+            {{ modalProps.prefix === '' ? 'Add' : 'Save' }}
+            Task
+        </button>
+        <button class="flat" (click)="modal.close(MODAL_ID)">
+            Cancel
+        </button>
+    </div>
+</tb-modal>
+

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

@@ -78,41 +78,3 @@
 <!--    </div>-->
 <!--</tb-modal>-->
 
-<tb-modal modal-title="Add Task" modal-id="{{ MODAL_ID }}">
-    <label>
-        Title
-        <input type="text" name="title" placeholder="Task Title"
-            [(ngModel)]="modalProps.title">
-    </label>
-
-    <label>
-        Description
-        <textarea name="description" rows="5"
-            placeholder="What needs to get done?"
-            [(ngModel)]="modalProps.description"></textarea>
-    </label>
-
-    <label *ngIf="activeBoard">
-        Assignees
-        <select name="assignees" multiple [(ngModel)]="modalProps.assignees">
-            <option *ngFor="let user of activeBoard.users"
-                [ngValue]="user">{{ user.username }}</option>
-        </select>
-    </label>
-
-    <pre>{{ modalProps | json }}</pre>
-    <div class="buttons">
-        <button #defaultAction
-            (click)="addEditTask()" [disabled]="saving">
-            <i class="icon"
-                [ngClass]="{ 'icon-plus': modalProps.prefix === '',
-                    'icon-floppy': modalProps.prefix !== '' }"></i>
-            {{ modalProps.prefix === '' ? 'Add' : 'Save' }}
-            Task
-        </button>
-        <button class="flat" (click)="modal.close(MODAL_ID)">
-            Cancel
-        </button>
-    </div>
-</tb-modal>
-

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

@@ -15,7 +15,6 @@ import {
     User,
     UserOptions,
     AuthService,
-    ModalService,
     NotificationsService
 } from '../../shared/index';
 import { BoardService } from '../board.service';
@@ -34,19 +33,15 @@ export class ColumnDisplay implements OnInit {
     private tasks: Array<Task>;
     private modalProps: Task;
 
-    private MODAL_ID: string;
-    private MODAL_CONFIRM_ID: string;
-
     @Input('column') columnData: Column;
+    @Input('add-task-modal-id') addModalId: string;
+    @Input('remove-task-modal-id') removeModalId: string;
 
     constructor(private elRef: ElementRef,
                 private auth: AuthService,
                 private notes: NotificationsService,
                 private modal: ModalService,
                 private boardService: BoardService) {
-        this.MODAL_ID = 'task-addEdit-form';
-        this.MODAL_CONFIRM_ID = 'task-remove-confirm';
-
         this.templateElement = elRef.nativeElement;
         this.tasks = [];
         this.collapseTasks = false;
@@ -109,6 +104,8 @@ export class ColumnDisplay implements OnInit {
 
     private showModal(): void {
         this.modalProps = new Task();
+        this.modalProps.column_id = +this.columnData.id;
+
         this.modal.open(this.MODAL_ID);
     }
 }