From 82f0687b776d0afef17b07049d8d641f8e53045f Mon Sep 17 00:00:00 2001 From: Chneemann Date: Sat, 5 Apr 2025 13:42:29 +0200 Subject: [PATCH] feat: update DragDropService to only consider drop when status changes --- src/app/components/board/board.component.ts | 12 +-- .../components/board/task/task.component.html | 2 +- src/app/services/drag-drop.service.ts | 81 +++++++++---------- 3 files changed, 47 insertions(+), 48 deletions(-) diff --git a/src/app/components/board/board.component.ts b/src/app/components/board/board.component.ts index a6939db..32f770e 100644 --- a/src/app/components/board/board.component.ts +++ b/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.handleItemDropped(id, status); + this.dragDropService.itemDropped.subscribe(({ task, 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 { - this.apiService.updateTaskStatus(taskId, status).subscribe({ + handleItemDropped(task: Task, status: string): void { + 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), }); diff --git a/src/app/components/board/task/task.component.html b/src/app/components/board/task/task.component.html index 43a2351..d8333df 100644 --- a/src/app/components/board/task/task.component.html +++ b/src/app/components/board/task/task.component.html @@ -4,7 +4,7 @@
(); + 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. - * - * It sets the `id` of the item being dragged to the `dataTransfer` object - * and emits an event indicating that the item has been moved from a certain - * status. - * - * @param event The drag event. - * @param id The id of the item being dragged. - * @param status The status of the item being dragged. + * Start a drag/drop operation. Called on the dragstart event. + * @param event The dragstart event. + * @param task The task being dragged. + * @remarks + * - Sets the dragged task to the given task. + * - Emits the `itemMovedFrom` event with the status of the task. */ - startDragging(event: DragEvent, id: string | undefined, status: string) { - if (id !== undefined) { - event.dataTransfer?.setData('text/plain', id); - this.itemMovedFrom.emit({ status }); + startDragging(event: DragEvent, task: Task) { + if (task.id) { + event.dataTransfer?.setData('text/plain', task.id); + this.draggedTask = task; + this.itemMovedFrom.emit({ status: task.status }); } } /** - * Allows a drop event to occur by preventing the default handling of the event. - * - * This function is called during the dragover event to indicate that the dragged - * item can be dropped in the current target. It prevents the default behavior and - * emits an event indicating that the item is being moved to a specified status. - * - * @param event The drag event. - * @param status The status to which the item is being moved. + * Called on the dragover event. + * @param event The dragover event. + * @param status The status of the column being dropped on. + * @remarks + * - Prevents the default browser behavior. + * - Emits the `itemMovedTo` event with the status of the column. */ allowDrop(event: DragEvent, status: string) { event.preventDefault(); - const dataTransfer = event.dataTransfer; - if (dataTransfer) { - this.itemMovedTo.emit({ status }); - } + this.itemMovedTo.emit({ status }); } /** - * This function is called when the user drops an item that was being dragged. - * - * It prevents the default behavior of the drop event and emits an event - * indicating that the item has been dropped. It also emits an event indicating - * that the item has been moved to a certain status. - * - * @param event The drag event. - * @param status The status to which the item is being moved. + * Complete the drag/drop operation. Called on the drop event. + * @param event The drop event. + * @param newStatus The status of the column being dropped on. + * @remarks + * - Prevents the default browser behavior. + * - If the dragged task is not null and the new status is different from its current status, + * emits the `itemDropped` event with the task and the new status. + * - 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) { - const id = dataTransfer.getData('text/plain'); - if (id) { - this.itemDropped.emit({ id, status }); - status = ''; - this.itemMovedTo.emit({ status }); + + if (this.draggedTask) { + if (this.draggedTask.status !== newStatus) { + this.itemDropped.emit({ task: this.draggedTask, status: newStatus }); } + this.draggedTask = null; } + + this.itemMovedTo.emit({ status: '' }); } }