feat: update DragDropService to only consider drop when status changes

src/app/components/board/board.component.ts

@@ -111,8 +111,8 @@ export class BoardComponent {
    * - `itemMovedFrom`: Sets `taskMovedFrom` to the status.
    */
   private subscribeToDragDropEvents(): void {
-    this.dragDropService.itemDropped.subscribe(({ id, status }) => {
+    this.dragDropService.itemDropped.subscribe(({ task, status }) => {
-      this.handleItemDropped(id, status);
+      this.handleItemDropped(task, status);
     });
 
     this.dragDropService.itemMovedTo.subscribe(({ status }) => {
@@ -139,11 +139,13 @@ export class BoardComponent {
    * @param taskId The id of the task being moved.
    * @param status The status of the column where the task was dropped.
    */
-  handleItemDropped(taskId: string, status: string): void {
+  handleItemDropped(task: Task, status: string): void {
-    this.apiService.updateTaskStatus(taskId, status).subscribe({
+    if (!task || task.status === status) return;
+
+    this.apiService.updateTaskStatus(task.id!, status).subscribe({
       next: () => {
         this.toastNotificationService.taskStatusUpdatedToast();
-        this.updateTaskStatus(taskId, status);
+        this.updateTaskStatus(task.id!, status);
       },
       error: (error) => console.error('Error updating task:', error),
     });

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

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

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

@@ -1,71 +1,68 @@
 import { Injectable, EventEmitter } from '@angular/core';
+import { Task } from '../interfaces/task.interface';
 
 @Injectable({
   providedIn: 'root',
 })
 export class DragDropService {
-  itemDropped = new EventEmitter<{ id: string; status: string }>();
+  itemDropped = new EventEmitter<{ task: Task; status: string }>();
   itemMovedFrom = new EventEmitter<{ status: string }>();
   itemMovedTo = new EventEmitter<{ status: string }>();
 
+  private draggedTask: Task | null = null;
+
   constructor() {}
 
   /**
-   * This function is called when a drag event starts.
+   * Start a drag/drop operation. Called on the dragstart event.
-   *
+   * @param event The dragstart event.
-   * It sets the `id` of the item being dragged to the `dataTransfer` object
+   * @param task The task being dragged.
-   * and emits an event indicating that the item has been moved from a certain
+   * @remarks
-   * status.
+   * - Sets the dragged task to the given task.
-   *
+   * - Emits the `itemMovedFrom` event with the status of the task.
-   * @param event The drag event.
-   * @param id The id of the item being dragged.
-   * @param status The status of the item being dragged.
    */
-  startDragging(event: DragEvent, id: string | undefined, status: string) {
+  startDragging(event: DragEvent, task: Task) {
-    if (id !== undefined) {
+    if (task.id) {
-      event.dataTransfer?.setData('text/plain', id);
+      event.dataTransfer?.setData('text/plain', task.id);
-      this.itemMovedFrom.emit({ status });
+      this.draggedTask = task;
+      this.itemMovedFrom.emit({ status: task.status });
     }
   }
 
   /**
-   * Allows a drop event to occur by preventing the default handling of the event.
+   * Called on the dragover event.
-   *
+   * @param event The dragover event.
-   * This function is called during the dragover event to indicate that the dragged
+   * @param status The status of the column being dropped on.
-   * item can be dropped in the current target. It prevents the default behavior and
+   * @remarks
-   * emits an event indicating that the item is being moved to a specified status.
+   * - Prevents the default browser behavior.
-   *
+   * - Emits the `itemMovedTo` event with the status of the column.
-   * @param event The drag event.
-   * @param status The status to which the item is being moved.
    */
   allowDrop(event: DragEvent, status: string) {
     event.preventDefault();
-    const dataTransfer = event.dataTransfer;
+    this.itemMovedTo.emit({ status });
-    if (dataTransfer) {
-      this.itemMovedTo.emit({ status });
-    }
   }
 
   /**
-   * This function is called when the user drops an item that was being dragged.
+   * Complete the drag/drop operation. Called on the drop event.
-   *
+   * @param event The drop event.
-   * It prevents the default behavior of the drop event and emits an event
+   * @param newStatus The status of the column being dropped on.
-   * indicating that the item has been dropped. It also emits an event indicating
+   * @remarks
-   * that the item has been moved to a certain status.
+   * - Prevents the default browser behavior.
-   *
+   * - If the dragged task is not null and the new status is different from its current status,
-   * @param event The drag event.
+   *   emits the `itemDropped` event with the task and the new status.
-   * @param status The status to which the item is being moved.
+   * - Sets the dragged task to null.
+   * - Emits the `itemMovedTo` event with an empty status, to reset the highlight.
    */
-  drop(event: DragEvent, status: string) {
+  drop(event: DragEvent, newStatus: string) {
     event.preventDefault();
-    const dataTransfer = event.dataTransfer;
+
-    if (dataTransfer) {
+    if (this.draggedTask) {
-      const id = dataTransfer.getData('text/plain');
+      if (this.draggedTask.status !== newStatus) {
-      if (id) {
+        this.itemDropped.emit({ task: this.draggedTask, status: newStatus });
-        this.itemDropped.emit({ id, status });
-        status = '';
-        this.itemMovedTo.emit({ status });
       }
+      this.draggedTask = null;
     }
+
+    this.itemMovedTo.emit({ status: '' });
   }
 }