diff --git a/src/app/components/board/board.component.html b/src/app/components/board/board.component.html index 1dbd3d3..0a78f54 100644 --- a/src/app/components/board/board.component.html +++ b/src/app/components/board/board.component.html @@ -40,7 +40,7 @@
@@ -54,14 +54,16 @@
@for(task of getTaskStatus("todo"); track task) { - } @empty { + @if(taskMovedTo === "todo") { + + } } @empty { {{ "board.noTasks" | translate }} }
@@ -82,7 +84,7 @@
@@ -103,7 +105,7 @@
diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts index 0f6a664..8cd4a7b 100644 --- a/src/app/components/board/board.component.ts +++ b/src/app/components/board/board.component.ts @@ -9,6 +9,7 @@ import { OverlayService } from '../../services/overlay.service'; import { Router } from '@angular/router'; import { SharedService } from '../../services/shared.service'; import { TranslateModule } from '@ngx-translate/core'; +import { TaskHighlightedComponent } from './task/task-highlighted/task-highlighted.component'; @Component({ selector: 'app-board', @@ -19,6 +20,7 @@ import { TranslateModule } from '@ngx-translate/core'; TaskEmptyComponent, FormsModule, TranslateModule, + TaskHighlightedComponent, ], templateUrl: './board.component.html', styleUrl: './board.component.scss', @@ -33,11 +35,15 @@ export class BoardComponent { ) {} searchValue: string = ''; searchInput: boolean = false; + taskMovedTo: string = ''; ngOnInit() { this.dragDropService.itemDropped.subscribe(({ id, status }) => { this.handleItemDropped(id, status); }); + this.dragDropService.itemMoved.subscribe(({ status }) => { + this.handleItemMoved(status); + }); } addNewTaskOverlay(status: string) { @@ -58,6 +64,10 @@ 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 new file mode 100644 index 0000000..c02dcfa --- /dev/null +++ b/src/app/components/board/task/task-highlighted/task-highlighted.component.html @@ -0,0 +1 @@ +

task-highlighted works!

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 new file mode 100644 index 0000000..e69de29 diff --git a/src/app/components/board/task/task-highlighted/task-highlighted.component.spec.ts b/src/app/components/board/task/task-highlighted/task-highlighted.component.spec.ts new file mode 100644 index 0000000..b17f1bc --- /dev/null +++ b/src/app/components/board/task/task-highlighted/task-highlighted.component.spec.ts @@ -0,0 +1,23 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { TaskHighlightedComponent } from './task-highlighted.component'; + +describe('TaskHighlightedComponent', () => { + let component: TaskHighlightedComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + imports: [TaskHighlightedComponent] + }) + .compileComponents(); + + fixture = TestBed.createComponent(TaskHighlightedComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/components/board/task/task-highlighted/task-highlighted.component.ts b/src/app/components/board/task/task-highlighted/task-highlighted.component.ts new file mode 100644 index 0000000..6af6561 --- /dev/null +++ b/src/app/components/board/task/task-highlighted/task-highlighted.component.ts @@ -0,0 +1,12 @@ +import { Component } from '@angular/core'; + +@Component({ + selector: 'app-task-highlighted', + standalone: true, + imports: [], + templateUrl: './task-highlighted.component.html', + styleUrl: './task-highlighted.component.scss' +}) +export class TaskHighlightedComponent { + +} diff --git a/src/app/services/drag-drop.service.ts b/src/app/services/drag-drop.service.ts index 15c7c56..3a7d4dc 100644 --- a/src/app/services/drag-drop.service.ts +++ b/src/app/services/drag-drop.service.ts @@ -5,6 +5,7 @@ import { Injectable, EventEmitter } from '@angular/core'; }) export class DragDropService { itemDropped = new EventEmitter<{ id: string; status: string }>(); + itemMoved = new EventEmitter<{ status: string }>(); constructor() {} @@ -14,8 +15,12 @@ export class DragDropService { } } - allowDrop(event: DragEvent) { + allowDrop(event: DragEvent, status: string) { event.preventDefault(); + const dataTransfer = event.dataTransfer; + if (dataTransfer) { + this.itemMoved.emit({ status }); + } } drop(event: DragEvent, status: string) {