moved task is highlighted (drag and drop)

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

@@ -54,10 +54,10 @@
         <div id="todo" class="details">
           @for(task of getTaskStatus("todo"); track task) {
           <app-task [task]="task"></app-task>
-          @if(taskMovedTo === "todo") {
+          } @empty {
-          <app-task-highlighted></app-task-highlighted>
-          } } @empty {
           <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
+          } @if(taskMovedTo === "todo" && taskMovedFrom !== "todo") {
+          <app-task-highlighted></app-task-highlighted>
           }
         </div>
       </div>
@@ -79,6 +79,9 @@
           <app-task [task]="task"></app-task>
           } @empty {
           <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
+          } @if(taskMovedTo === "inprogress" && taskMovedFrom !== "inprogress")
+          {
+          <app-task-highlighted></app-task-highlighted>
           }
         </div>
       </div>
@@ -97,9 +100,11 @@
         </div>
         <div id="awaitfeedback" class="details">
           @for(task of getTaskStatus("awaitfeedback"); track task) {
-          <app-task [task]="task"></app-task>
+          <app-task [task]="task"></app-task> } @empty {
-          } @empty {
           <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
+          } @if(taskMovedTo === "awaitfeedback" && taskMovedFrom !==
+          "awaitfeedback") {
+          <app-task-highlighted></app-task-highlighted>
           }
         </div>
       </div>
@@ -121,6 +126,8 @@
           <app-task [task]="task"></app-task>
           } @empty {
           <app-task-empty>{{ "board.noTasks" | translate }}</app-task-empty>
+          } @if(taskMovedTo === "done" && taskMovedFrom !== "done") {
+          <app-task-highlighted></app-task-highlighted>
           }
         </div>
       </div>

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.dragDropService.itemMovedTo.subscribe(({ status }) => {
-      this.handleItemMoved(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

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

@@ -1 +1 @@
-<p>task-highlighted works!</p>
+<div class="highlighted"><p>Drop here</p></div>

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%;
+  }
+}

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

@@ -4,7 +4,7 @@
     <div
       class="content"
       draggable="true"
-      (dragstart)="dragDropService.startDragging($event, task.id)"
+      (dragstart)="dragDropService.startDragging($event, task.id, task.status)"
     >
       <div class="header">
         <div

src/app/services/drag-drop.service.ts

@@ -5,13 +5,15 @@ import { Injectable, EventEmitter } from '@angular/core';
 })
 export class DragDropService {
   itemDropped = new EventEmitter<{ id: string; status: string }>();
-  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 });
       }
     }
   }