reivilibre/TaskBoard
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 2 Wiki Activity

WIP - Board display

Browse Source
This commit is contained in:
kiswa 2017-02-16 01:04:22 +00:00
parent df1280c6d4
commit 99ce275b79
10 changed files with 112 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/app.routes.ts
View File

@ -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,

27
src/app/board/board.component.html
View File

@ -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>
<option>Any</option>
<select [(ngModel)]="userFilter">
<option [ngValue]="null">Any</option>
<option *ngFor="let user of activeBoard.users"
[ngValue]="user.id">
{{ user.username }}
</option>
</select>
</label>
<label>
Category Filter:
<select>
<option>Any</option>
<select [(ngModel)]="categoryFilter">
<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>

12
src/app/board/board.component.ts
View File

@ -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;
}
});
}

27
src/app/board/column/column.component.html Normal file
View File

@ -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>

29
src/app/board/column/column.component.ts Normal file
View File

@ -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');
}
}

3
src/app/board/index.ts Normal file
View File

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

2
src/app/settings/auto-actions/auto-actions.component.ts
View File

@ -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: ';

4
src/app/settings/index.ts
View File

@ -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';

8
src/app/settings/user-admin/user-admin.component.ts
View File

@ -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);
}

16
src/scss/_board.scss
View File

@ -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;