WIP - Board display

src/app/app.routes.ts

@@ -2,7 +2,10 @@ import { Routes, RouterModule } from '@angular/router';
 
 import { AuthGuard } from './shared/index';
 import { Login } from './login/login.component';
-import { BoardDisplay } from './board/board.component';
+import {
+    BoardDisplay,
+    ColumnDisplay
+} from './board/index';
 import {
     Settings,
     UserAdmin,
@@ -42,6 +45,7 @@ const ROUTES: Routes = [
 export const ROUTE_COMPONENTS = [
     Login,
     BoardDisplay,
+    ColumnDisplay,
     Settings,
     UserAdmin,
     BoardAdmin,

src/app/board/board.component.html

@@ -1,4 +1,4 @@
-<tb-top-nav></tb-top-nav>
+<tb-top-nav page-name="{{ pageName }}"></tb-top-nav>
 
 <div class="board-nav">
     <label>
@@ -19,20 +19,28 @@
         </label>
         <label>
             User Filter:
-            <select>
+            <select [(ngModel)]="userFilter">
-                <option>Any</option>
+                <option [ngValue]="null">Any</option>
+                <option *ngFor="let user of activeBoard.users"
+                    [ngValue]="user.id">
+                    {{ user.username }}
+                </option>
             </select>
         </label>
         <label>
             Category Filter:
-            <select>
+            <select [(ngModel)]="categoryFilter">
-                <option>Any</option>
+                <option [ngValue]="null">Any</option>
+                <option *ngFor="let category of activeBoard.categories"
+                    [ngValue]="category.id">
+                    {{ category.name }}
+                </option>
             </select>
         </label>
     </div>
 </div>
 
-<div class="no-boards center" *ngIf="!boards || boards.length === 0">
+<div class="no-boards center" *ngIf="!loading && (!boards || boards.length === 0)">
     <h1>No Boards</h1>
 
     <p>{{ noBoardsMessage }}</p>
@@ -50,6 +58,10 @@
 </div>
 
 <div class="board" *ngIf="activeBoard">
+    <tb-column class="column"
+        *ngFor="let column of activeBoard.columns"
+        [column]="column"></tb-column>
+    <!--
     <div class="column">
         <h3>
             <span class="icon icon-minus-squared-alt" title="Collapse All Tasks"></span>
@@ -195,7 +207,6 @@
             <button class="flat"><i class="icon icon-plus"></i></button>
         </div>
     </div>
-    <pre><code>{{ activeUser | json }}</code></pre>
+    -->
-    <pre><code>{{ activeBoard | json }}</code></pre>
 </div>
 

src/app/board/board.component.ts

@@ -29,7 +29,11 @@ export class BoardDisplay implements OnInit {
     private boards: Array<Board>;
 
     private boardNavId: number;
+    private userFilter: number;
+    private categoryFilter: number;
     private noBoardsMessage: string;
+    private pageName: string;
+    private loading: boolean;
 
     constructor(private title: Title,
                 private router: Router,
@@ -41,9 +45,16 @@ export class BoardDisplay implements OnInit {
                 private dragula: DragulaService) {
         title.setTitle('TaskBoard - Kanban App');
         this.boardNavId = null;
+        this.userFilter = null;
+        this.categoryFilter = null;
+
+        this.pageName = 'Boards';
+        this.loading = true;
+
 
         boardService.getBoards().subscribe((response: ApiResponse) => {
             this.updateBoardsList(response.data[1]);
+            this.loading = false;
         });
 
         auth.userChanged.subscribe((user: User) => {
@@ -109,6 +120,7 @@ export class BoardDisplay implements OnInit {
         this.boards.forEach(board => {
             if (board.id === this.boardNavId) {
                 this.activeBoard = board;
+                this.pageName = board.name;
             }
         });
     }

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

@@ -0,0 +1,27 @@
+<h3>
+    <span class="icon icon-minus-squared-alt"
+        title="Collapse All Tasks"></span>
+
+    {{ column.name }}
+
+    <span class="badge" title="Tasks in Column">
+        {{ taskCount }}
+    </span>
+
+    <span class="icon icon-angle-double-up"
+        title="Expand Column" (click)="toggleCollapsed()"></span>
+    <span class="right icon icon-angle-double-down"
+        title="Collapse Column" (click)="toggleCollapsed()"></span>
+</h3>
+
+<div class="quick-add">
+    <input type="text" placeholder="Quick Add Task - Title Only">
+    <button class="flat"><i class="icon icon-plus"></i></button>
+</div>
+
+<div class="tasks">
+    <div class="task">
+        <pre style="margin: 0">{{ column | json }}</pre>
+    </div>
+</div>
+

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

@@ -0,0 +1,29 @@
+import {
+    Component,
+    Input,
+    ElementRef
+} from '@angular/core';
+
+import { Column } from '../../shared/index';
+
+@Component({
+    selector: 'tb-column',
+    templateUrl: 'app/board/column/column.component.html'
+})
+export class ColumnDisplay {
+    private templateElement: any;
+    private taskCount: number;
+
+    @Input('column') column: Column;
+
+    constructor(private elRef: ElementRef) {
+        this.templateElement = elRef.nativeElement;
+        this.taskCount = 0;
+    }
+
+    toggleCollapsed() {
+        this.templateElement.classList.toggle('collapsed');
+    }
+
+}
+

src/app/board/index.ts

@@ -0,0 +1,3 @@
+export * from './column/column.component';
+export * from './board.component';
+

src/app/settings/auto-actions/auto-actions.component.ts

@@ -239,7 +239,7 @@ export class AutoActions {
         switch (+action.type) {
             case ActionType.SetColor:
                 desc = 'Set item color: <span style="color: ' +
-                    action.change_to + '";>' + action.change_to + '</span>';
+                    action.change_to + ';">' + action.change_to + '</span>';
             break;
             case ActionType.SetCategory:
                 desc = 'Set item category: ';

src/app/settings/index.ts

@@ -1,6 +1,6 @@
+export * from './auto-actions/auto-actions.component';
+export * from './board-admin/board-admin.component';
 export * from './user-admin/user-admin.component';
 export * from './user-settings/user-settings.component';
-export * from './board-admin/board-admin.component';
 export * from './settings.component';
-export * from './auto-actions/auto-actions.component';
 

src/app/settings/user-admin/user-admin.component.ts

@@ -46,7 +46,6 @@ export class UserAdmin {
 
         auth.userChanged
             .subscribe(activeUser => {
-                console.log('userChanged');
                 this.activeUser = new User(+activeUser.default_board_id,
                                            activeUser.email,
                                            +activeUser.id,
@@ -60,19 +59,16 @@ export class UserAdmin {
 
         settings.boardsChanged
             .subscribe(boards => {
-                console.log('boardsChanged');
                 this.boards = boards;
             });
 
         settings.getUsers()
             .subscribe((response: ApiResponse) => {
-                console.log('getUsers');
                 if (response.data[1]) {
                     response.data[1].forEach((user: any) => {
                         this.users.push(this.convertUser(user));
                     });
                 }
-                console.log(this.users);
 
                 this.getBoards();
             });
@@ -90,7 +86,6 @@ export class UserAdmin {
         if (isAdd) {
             this.userService.addUser(this.modalProps.user)
                 .subscribe((response: ApiResponse) => {
-                    console.log('addUser');
                     response.alerts.forEach(note => this.notes.add(note));
 
                     this.replaceUserList(response);
@@ -132,7 +127,6 @@ export class UserAdmin {
     }
 
     private getBoards(): void {
-        console.log('getBoards');
         this.settings.getBoards()
             .subscribe((response: ApiResponse) => {
                 let boards = response.data[1];
@@ -190,7 +184,6 @@ export class UserAdmin {
             response.data[1].forEach((user: any) => {
                 this.users.push(this.convertUser(user));
             });
-            console.log('replaceUserList', this.users);
 
             this.updateUserList();
         }
@@ -270,7 +263,6 @@ export class UserAdmin {
                 user.can_admin = false;
             }
         });
-        console.log('updateUserList', this.users);
 
         this.settings.updateUsers(<Array<User>> this.users);
     }

src/scss/_board.scss

@@ -43,6 +43,7 @@
         height: calc(100% - 7px);
         margin-left: 7px;
         overflow: auto;
+        position: relative;
         white-space: normal;
 
         h3 {
@@ -61,6 +62,11 @@
             }
         }
 
+        .quick-add {
+            padding: 6px;
+            padding-right: 5px;
+        }
+
         &:last-of-type {
             margin-right: 7px;
         }
@@ -89,7 +95,7 @@
             .icon-angle-double-down,
             .icon-minus-squared-alt,
             .icon-plus-squared-alt,
-            .task,
+            .tasks,
             .quick-add {
                 display: none;
             }
@@ -101,8 +107,14 @@
     }
 
     .tasks {
+        bottom: 0;
+        left: 0;
+        overflow-y: auto;
         padding: 7px;
-        padding-bottom: 0;
+        padding-top: 0;
+        position: absolute;
+        right: 0;
+        top: 5.2em;
 
         div:last-of-type {
             margin-bottom: 0;