diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html index 0a78f54..9e22cc2 100644 --- a/src/app/components/board/board.component.html +++ b/src/app/components/board/board.component.html @@ -54,10 +54,10 @@
@for(task of getTaskStatus("todo"); track task) { - @if(taskMovedTo === "todo") { - - } } @empty { + } @empty { {{ "board.noTasks" | translate }} + } @if(taskMovedTo === "todo" && taskMovedFrom !== "todo") { + }
@@ -79,6 +79,9 @@ } @empty { {{ "board.noTasks" | translate }} + } @if(taskMovedTo === "inprogress" && taskMovedFrom !== "inprogress") + { + } @@ -97,9 +100,11 @@
@for(task of getTaskStatus("awaitfeedback"); track task) { - - } @empty { + } @empty { {{ "board.noTasks" | translate }} + } @if(taskMovedTo === "awaitfeedback" && taskMovedFrom !== + "awaitfeedback") { + }
@@ -121,6 +126,8 @@ } @empty { {{ "board.noTasks" | translate }} + } @if(taskMovedTo === "done" && taskMovedFrom !== "done") { + } diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts index 8cd4a7b..2aeb55a 100644 --- a/src/app/components/board/board.component.ts +++ b/src/app/components/board/board.component.ts @@ -36,13 +36,18 @@ export class BoardComponent { searchValue: string = ''; searchInput: boolean = false; taskMovedTo: string = ''; + taskMovedFrom: string = ''; + taskDropped: boolean = false; ngOnInit() { this.dragDropService.itemDropped.subscribe(({ id, status }) => { this.handleItemDropped(id, status); }); - this.dragDropService.itemMoved.subscribe(({ status }) => { - this.handleItemMoved(status); + this.dragDropService.itemMovedTo.subscribe(({ status }) => { + this.taskMovedTo = status; + }); + this.dragDropService.itemMovedFrom.subscribe(({ status }) => { + this.taskMovedFrom = status; }); } @@ -64,10 +69,6 @@ export class BoardComponent { } } - handleItemMoved(status: string) { - this.taskMovedTo = status; - } - handleItemDropped(id: string, status: string): void { const index = this.firebaseService.allTasks.findIndex( (task) => task.id === id diff --git a/src/app/components/board/task/task-highlighted/task-highlighted.component.html b/src/app/components/board/task/task-highlighted/task-highlighted.component.html index c02dcfa..a2aae79 100644 --- a/src/app/components/board/task/task-highlighted/task-highlighted.component.html +++ b/src/app/components/board/task/task-highlighted/task-highlighted.component.html @@ -1 +1 @@ -

task-highlighted works!

+

Drop here

diff --git a/src/app/components/board/task/task-highlighted/task-highlighted.component.scss b/src/app/components/board/task/task-highlighted/task-highlighted.component.scss index e69de29..282e490 100644 --- a/src/app/components/board/task/task-highlighted/task-highlighted.component.scss +++ b/src/app/components/board/task/task-highlighted/task-highlighted.component.scss @@ -0,0 +1,27 @@ +.highlighted { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + max-width: 268px; + height: 168px; + border-radius: 10px; + border: 2px dashed var(--light-blue); + background-color: var(--very-light-gray2); + box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16); + font-size: 16px; + font-weight: 400; + color: var(--gray); + margin: 15.5px 0; + p { + font-size: 21px; + font-weight: 500; + } +} + +@media screen and (max-width: 667px) { + .highlighted { + width: 100%; + max-width: 100%; + } +} diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html index 718a068..1847982 100644 --- a/src/app/components/board/task/task.component.html +++ b/src/app/components/board/task/task.component.html @@ -4,7 +4,7 @@
(); - itemMoved = new EventEmitter<{ status: string }>(); + itemMovedFrom = new EventEmitter<{ status: string }>(); + itemMovedTo = new EventEmitter<{ status: string }>(); constructor() {} - startDragging(event: DragEvent, id: string | undefined) { + startDragging(event: DragEvent, id: string | undefined, status: string) { if (id !== undefined) { event.dataTransfer?.setData('text/plain', id); + this.itemMovedFrom.emit({ status }); } } @@ -19,7 +21,7 @@ export class DragDropService { event.preventDefault(); const dataTransfer = event.dataTransfer; if (dataTransfer) { - this.itemMoved.emit({ status }); + this.itemMovedTo.emit({ status }); } } @@ -30,6 +32,8 @@ export class DragDropService { const id = dataTransfer.getData('text/plain'); if (id) { this.itemDropped.emit({ id, status }); + status = ''; + this.itemMovedTo.emit({ status }); } } }