moved task is highlighted (drag and drop)

src/app/components/board/board.component.html

@@ -40,7 +40,7 @@
     <div class="status">
       <div
         class="column"
-        (dragover)="dragDropService.allowDrop($event)"
+        (dragover)="dragDropService.allowDrop($event, 'todo')"
         (drop)="dragDropService.drop($event, 'todo')"
       >
         <div class="headline">
@@ -54,14 +54,16 @@
         <div id="todo" class="details">
           @for(task of getTaskStatus("todo"); track task) {
           <app-task [task]="task"></app-task>
-          } @empty {
+          @if(taskMovedTo === "todo") {
+          <app-task-highlighted></app-task-highlighted>
+          } } @empty {
           <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
           }
         </div>
       </div>
       <div
         class="column"
-        (dragover)="dragDropService.allowDrop($event)"
+        (dragover)="dragDropService.allowDrop($event, 'inprogress')"
         (drop)="dragDropService.drop($event, 'inprogress')"
       >
         <div class="headline">
@@ -82,7 +84,7 @@
       </div>
       <div
         class="column"
-        (dragover)="dragDropService.allowDrop($event)"
+        (dragover)="dragDropService.allowDrop($event, 'awaitfeedback')"
         (drop)="dragDropService.drop($event, 'awaitfeedback')"
       >
         <div class="headline">
@@ -103,7 +105,7 @@
       </div>
       <div
         class="column"
-        (dragover)="dragDropService.allowDrop($event)"
+        (dragover)="dragDropService.allowDrop($event, 'done')"
         (drop)="dragDropService.drop($event, 'done')"
       >
         <div class="headline">

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

src/app/components/board/task/task-highlighted/task-highlighted.component.html

@@ -0,0 +1 @@
+<p>task-highlighted works!</p>

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<TaskHighlightedComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TaskHighlightedComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TaskHighlightedComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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 {
+
+}

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) {