feat/FE: update column & task position with ws

backend/app/services/TaskService.scala

@@ -321,7 +321,7 @@ class TaskService @Inject()(taskRepository: TaskRepository,
 
   def updatePosition(taskId: Int, req: UpdateTaskPositionRequest, userId: Int): Future[Int] = {
     val action = for {
-      (task, _) <- getTaskAndProjectByTaskId(taskId, userId)
+      (task, projectId) <- getTaskAndProjectByTaskId(taskId, userId)
 
       _ <- if (task.status == TaskStatus.active) {
         DBIO.successful(())
@@ -332,8 +332,19 @@ class TaskService @Inject()(taskRepository: TaskRepository,
       }
 
       updatedRows <- taskRepository.updatePosition(taskId, req.position, req.columnId)
+      _ <- updatedRows match {
+        case 1 =>
+          broadcastService.broadcastToProject(
+            projectId,
+            TaskMoved(TaskMovedPayload(taskId, task.columnId, req.columnId, req.position)))
+          DBIO.successful(())
+        case 0 =>
+          DBIO.failed(AppException(
+            message = s"Failed to update task position",
+            statusCode = Status.BAD_REQUEST
+          ))
+      }
     } yield updatedRows
-
     db.run(action.transactionally)
   }
 

frontend/src/components/board/AddTask.tsx

@@ -1,9 +1,9 @@
 import { Plus, X } from "lucide-react";
 import UrlPreview from "./UrlPreview";
 import { useSelector } from "react-redux";
 import { selectColumnToggleStates } from "@/store/selectors/modalSelector";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { detectUrl } from "@/utils/UrlPreviewUtils";
 import { resetcolumnToggleStates, showAddTaskForm } from "@/store/slices/columnToggleStatesSlice";
 import { useAppDispatch } from "@/store";
 import taskService from "@/services/taskService";
@@ -18,6 +18,7 @@
   const [taskTitle, setTaskTitle] = useState("");
   const [detectedUrl, setDetectedUrl] = useState<string | null>(null);
   const inputRef = useRef<HTMLTextAreaElement>(null);
+  const formRef = useRef<HTMLDivElement>(null);
 
   const { isAddingTask, columnId: currentToggleColumn } = useSelector(selectColumnToggleStates);
   const maxPosition = useSelector(selectMaxTaskPositionByColumn(columnId));
@@ -35,10 +36,11 @@
       const result = await taskService.createTask(columnId, taskTitle.trim(), newPosition);
       notify.success(result.message);
       setTaskTitle("");
+      dispatch(resetcolumnToggleStates());
     } catch (error: any) {
       notify.error(error.response?.data?.message || "Failed to create card");
     }
-  }, [columnId, maxPosition, taskTitle]);
+  }, [columnId, maxPosition, taskTitle, dispatch]);
 
   const handleRemoveUrlPreview = useCallback(() => {
     if (detectedUrl) {
@@ -70,9 +72,16 @@
     [handleSubmitAddTask, cancelAddingTask]
   );
 
-  const handleBlur = useCallback(() => {
-    dispatch(resetcolumnToggleStates());
-  }, []);
+  // Cancel adding task when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (e: MouseEvent) => {
+      if (formRef.current && !formRef.current.contains(e.target as Node)) {
+        dispatch(resetcolumnToggleStates());
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [dispatch]);
 
   useEffect(() => {
     if (isAddingTask) {
@@ -94,7 +103,6 @@
             value={taskTitle}
             onChange={(e) => setTaskTitle(e.target.value)}
             onKeyDown={handleKeyDown}
-            onBlur={handleBlur}
             placeholder="Enter a title or paste a link"
             className="w-full p-2 text-sm bg-[#22272B] text-[#B6C2CF] border border-[#394B59] rounded-lg resize-none focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
             rows={3}
@@ -128,4 +136,4 @@
   );
 };
 
-export default AddTask;
+export default AddTask;