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

Board drag/drop now uses Angular CDK - minor cleanup

Browse Source
This commit is contained in:
Matthew Ross 2020-04-21 16:23:31 -04:00
parent 4cc8512713
commit fe5f529320
5 changed files with 56 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -73,7 +73,7 @@
<p></p>
</div>
<div class="board" *ngIf="activeBoard">
<div class="board" cdkDropListGroup *ngIf="activeBoard">
<tb-column class="column" [id]="column.id"
*ngFor="let column of activeBoard.columns"
[column]="column"

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

@ -6,7 +6,7 @@ import {
ApiResponse,
Board,
Column,
User,
User
} from '../shared/models';
import {
AuthService,
@ -180,9 +180,11 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
updateBoards(): void {
this.boardService.getBoards().subscribe((response: ApiResponse) => {
this.boards = [];
if (response.data.length > 1) {
this.updateBoardsList(response.data[1]);
}
this.loading = false;
});
}
@ -193,12 +195,12 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
if (boards) {
boards.forEach((board: any) => {
const currentBoard = new Board(+board.id, board.name,
board.is_active === '1',
board.ownColumn,
board.ownCategory,
board.ownAutoAction,
board.ownIssuetracker,
board.sharedUser);
board.is_active === '1',
board.ownColumn,
board.ownCategory,
board.ownAutoAction,
board.ownIssuetracker,
board.sharedUser);
if (currentBoard.is_active) {
activeBoards.push(currentBoard);
}
@ -252,18 +254,5 @@ export class BoardDisplayComponent implements OnInit, OnDestroy {
}
}
/* istanbul ignore next */
private changeTaskColumn(taskId: number, toColumnId: number) {
const column = this.activeBoard.columns
.find(col => col.id === toColumnId);
const task = column.tasks.find(ta => ta.id === taskId);
if (task) {
task.column_id = toColumnId;
this.boardService.updateTask(task).subscribe();
}
}
}

8
src/app/board/column/column.component.html
View File

@ -72,9 +72,11 @@
</button>
</div>
<div class="tasks" *ngIf="columnData" cdkDropList
[cdkDropListData]="columnData.tasks">
<tb-task class="task-container" [id]="task.id"
<div class="tasks" *ngIf="columnData"
cdkDropList
[cdkDropListData]="columnData.tasks"
(cdkDropListDropped)="drop($event, +columnData.id - 1)">
<tb-task class="task-container" [id]="task.id" cdkDrag
*ngFor="let task of columnData.tasks"
[task]="task" [boards]="boards"
[add-task]="getShowModalFunction()"

25
src/app/board/column/column.component.ts
View File

@ -8,6 +8,11 @@ import {
Output
} from '@angular/core';
import { DomSanitizer, } from '@angular/platform-browser';
import {
CdkDragDrop,
moveItemInArray,
transferArrayItem
} from '@angular/cdk/drag-drop';
import {
ApiResponse,
@ -39,7 +44,6 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
private fileUpload: any;
private subs = [];
public tasks: Task[];
public viewTaskActivities: ActivitySimple[];
public showActivity: boolean;
@ -90,7 +94,6 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
public boardService: BoardService,
private sanitizer: DomSanitizer) {
this.templateElement = elRef.nativeElement;
this.tasks = [];
this.collapseTasks = false;
this.sortOption = 'pos';
@ -240,6 +243,24 @@ export class ColumnDisplayComponent implements OnInit, OnDestroy {
});
}
drop(event: CdkDragDrop<string[]>, colIndex: number) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data,
event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data, event.previousIndex, event.currentIndex);
}
this.activeBoard.columns[colIndex].tasks.forEach((item, index) => {
item.position = index + 1;
item.column_id = this.activeBoard.columns[colIndex].id;
});
const task = this.activeBoard.columns[colIndex].tasks[event.currentIndex];
this.boardService.updateTask(task).subscribe(() => {});
}
updateTask() {
this.saving = true;

35
src/app/board/task/task.component.ts
View File

@ -6,6 +6,7 @@ import {
Output
} from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';
import {
ApiResponse,
@ -83,23 +84,6 @@ export class TaskDisplayComponent implements OnInit {
this.convertTaskDescription();
}
private convertTaskDescription() {
if (!this.taskData || !this.taskData.description) {
return;
}
const data = this.boardService.convertMarkdown(
this.taskData.description, this.markedCallback, true
);
data.html.replace(/(\{)([^}]+)(\})/g, '{{ "{" }}$2{{ "}" }}');
if (data.counts.total) {
this.percentComplete = data.counts.complete / data.counts.total;
}
this.taskData.html = this.sanitizer.bypassSecurityTrustHtml(data.html);
}
getPercentStyle() {
return this.sanitizer.bypassSecurityTrustStyle(
'padding: 0; height: 5px; background-color: rgba(0, 0, 0, .4); ' +
@ -223,6 +207,23 @@ export class TaskDisplayComponent implements OnInit {
});
}
private convertTaskDescription() {
if (!this.taskData || !this.taskData.description) {
return;
}
const data = this.boardService.convertMarkdown(
this.taskData.description, this.markedCallback, true
);
data.html.replace(/(\{)([^}]+)(\})/g, '{{ "{" }}$2{{ "}" }}');
if (data.counts.total) {
this.percentComplete = data.counts.complete / data.counts.total;
}
this.taskData.html = this.sanitizer.bypassSecurityTrustHtml(data.html);
}
private checkDueDate() {
if (!this.taskData || this.taskData.due_date === '') {
return;