From 8bd368e1f9fd677ff9c7911812eb3f14ccc90d34 Mon Sep 17 00:00:00 2001
From: "krzysztof.grudzinski" <krzysztof.grudzinski@melfore.com>
Date: Thu, 16 Nov 2023 15:44:28 +0100
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20[ToolTip]=20on=20task=20?=
 =?UTF-8?q?move=20tooltip=20disappear?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

✅ Closes: #151
---
 src/tasks/components/Task/index.tsx    | 17 ++++++++++++++---
 src/tasks/components/Tooltip/index.tsx | 11 +++++------
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/src/tasks/components/Task/index.tsx b/src/tasks/components/Task/index.tsx
index 68714fc..56aec67 100644
--- a/src/tasks/components/Task/index.tsx
+++ b/src/tasks/components/Task/index.tsx
@@ -192,7 +192,19 @@ const Task = ({ data, fill = TASK_DEFAULT_FILL, onLeave, onOver, x, y, width, fi
     [enableDrag, onOver, onTaskMouseEvent, resizing]
   );
 
-  const onDragStart = useCallback(() => setDragging(true), []);
+  const onDragStart = useCallback(
+    (e: KonvaEventObject<DragEvent>) => {
+      const { x, y } = getDragPoint(e);
+      const dragFinalX = Math.ceil(x / dragSnapInPX) * dragSnapInPX;
+      const xCoordinate = dragFinalX < 0 ? 0 : dragFinalX;
+      const resourceIndex = findResourceIndexByCoordinate(y, rowHeight, resources);
+      const yCoordinate = getTaskYCoordinate(resourceIndex, rowHeight);
+      const point = { x: xCoordinate, y: yCoordinate };
+      setDragging(true);
+      onLeave(taskId, point);
+    },
+    [getDragPoint, onLeave, resources, rowHeight, taskId, dragSnapInPX]
+  );
 
   const onDragMove = useCallback(
     (e: KonvaEventObject<DragEvent>) => {
@@ -204,9 +216,8 @@ const Task = ({ data, fill = TASK_DEFAULT_FILL, onLeave, onOver, x, y, width, fi
       const point = { x: xCoordinate, y: yCoordinate };
 
       setTaskDimensions((dimensions) => ({ ...dimensions, ...point }));
-      onOver(taskId, point);
     },
-    [dragSnapInPX, getDragPoint, onOver, resources, rowHeight, taskId]
+    [dragSnapInPX, getDragPoint, resources, rowHeight]
   );
 
   const onDragEnd = useCallback(
diff --git a/src/tasks/components/Tooltip/index.tsx b/src/tasks/components/Tooltip/index.tsx
index e2311a9..6b7de9b 100644
--- a/src/tasks/components/Tooltip/index.tsx
+++ b/src/tasks/components/Tooltip/index.tsx
@@ -33,12 +33,11 @@ const TaskTooltip: FC<TaskTooltipProps> = ({
   } = useTimelineContext();
   const txt = useMemo(() => {
     const label = "LABEL: " + taskLabel + "\n";
-    const resources = "RESID: " + resourceId + "\n";
-    const startDuration = "START: " + DateTime.fromMillis(Number(start)).toISO() + "\n";
-    const endDuration = "END:    " + DateTime.fromMillis(Number(end)).toISO();
+    const startDuration = "START: " + DateTime.fromMillis(Number(start)).toFormat("dd/MM/yyyy HH:mm:ss") + "\n";
+    const endDuration = "END:    " + DateTime.fromMillis(Number(end)).toFormat("dd/MM/yyyy HH:mm:ss");
     const complete = completedPercentage ? "\n" + "COMPLETED: " + completedPercentage + "%" : "";
-    return label + resources + startDuration + endDuration + complete;
-  }, [taskLabel, resourceId, completedPercentage, start, end]);
+    return label + startDuration + endDuration + complete;
+  }, [taskLabel, completedPercentage, start, end]);
 
   const pointerDir = useMemo(() => {
     const part = (drawEnd - drawStart) / 5;
@@ -69,7 +68,7 @@ const TaskTooltip: FC<TaskTooltipProps> = ({
         shadowOffsetY={TASK_TOOLTIP_SHADOW_SIZE}
         shadowOpacity={0.2}
       />
-      <Text text={txt} fill={TASK_TOOLTIP_COLOR} fontSize={15} padding={6} />
+      <Text text={txt} fill={TASK_TOOLTIP_COLOR} fontSize={13} padding={8} />
     </Label>
   );
 };