feature/IO-3545-Production-Board-List-DND - Checkpoint

client/src/components/production-list-table/production-list-table.component.jsx

@@ -4,7 +4,7 @@ import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
 import { Button, Dropdown, Input, Space, Statistic, Table } from "antd";
 import _ from "lodash";
 import { useEffect, useMemo, useRef, useState } from "react";
-import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors, closestCenter } from "@dnd-kit/core";
+import { closestCenter, DndContext, DragOverlay, PointerSensor, useSensor, useSensors } from "@dnd-kit/core";
 import { arrayMove, horizontalListSortingStrategy, SortableContext, useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
@@ -43,7 +43,6 @@ function DraggableHeaderCell(props) {
     ...restProps.style,
     transform: CSS.Transform.toString(transform),
     transition,
-    cursor: "move",
     opacity: isDragging ? 0.3 : 1
   };
 
@@ -52,6 +51,18 @@ function DraggableHeaderCell(props) {
     return <ResizeableTitle {...props} />;
   }
 
+  // Only apply drag listeners to elements with data-drag-handle attribute
+  const filteredListeners = listeners
+    ? {
+        onPointerDown: (e) => {
+          // Only trigger drag if clicking on the drag handle
+          if (e.target.closest('[data-drag-handle="true"]')) {
+            listeners.onPointerDown?.(e);
+          }
+        }
+      }
+    : {};
+
   // Combine drag functionality with resize
   return (
     <ResizeableTitle
@@ -61,63 +72,13 @@ function DraggableHeaderCell(props) {
       onResize={onResize}
       width={width}
       dragAttributes={attributes}
-      dragListeners={listeners}
+      dragListeners={filteredListeners}
     >
       {children}
     </ResizeableTitle>
   );
 }
 
-// Draggable column title component
-// function DraggableColumnTitle({ col, onRemove, t }) {
-//   const { attributes, listeners, setNodeRef, isDragging } = useSortable({
-//     id: col.key
-//   });
-//
-//   const menu = {
-//     onClick: onRemove,
-//     items: [
-//       {
-//         key: col.key,
-//         label: t("production.actions.removecolumn")
-//       }
-//     ]
-//   };
-//
-//   const style = {
-//     display: "flex",
-//     alignItems: "center",
-//     width: "100%",
-//     opacity: isDragging ? 0.4 : 1
-//   };
-//
-//   return (
-//     <div ref={setNodeRef} style={style}>
-//       <span
-//         {...attributes}
-//         {...listeners}
-//         style={{
-//           cursor: "grab",
-//           display: "inline-flex",
-//           alignItems: "center",
-//           padding: "0 4px",
-//           marginRight: "4px",
-//           color: "#999",
-//           fontSize: "14px",
-//           flexShrink: 0
-//         }}
-//         className="drag-handle"
-//         title="Drag to reorder column"
-//       >
-//         <HolderOutlined />
-//       </span>
-//       <Dropdown className="prod-header-dropdown" menu={menu} trigger={["contextMenu"]}>
-//         <span style={{ flex: 1 }}>{col.title}</span>
-//       </Dropdown>
-//     </div>
-//   );
-// }
-
 export function ProductionListTable({ loading, data, refetch, bodyshop, technician, currentUser, isDarkMode }) {
   const [searchText, setSearchText] = useState("");
   const [hasUnsavedChanges, setHasUnsavedChanges] = useState(false);
@@ -285,12 +246,26 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         }
       ]
     };
-    
+
     return (
       <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
-        <HolderOutlined style={{ marginRight: "8px", color: "#999", cursor: "move" }} />
+        <span
+          className="drag-handle-trigger"
+          data-drag-handle="true"
+          style={{
+            marginRight: "8px",
+            color: "#999",
+            cursor: "grab",
+            padding: "4px",
+            display: "inline-flex",
+            alignItems: "center"
+          }}
+          title="Drag to reorder column"
+        >
+          <HolderOutlined />
+        </span>
         <Dropdown className="prod-header-dropdown" menu={menu} trigger={["contextMenu"]}>
-          <span style={{ flex: 1 }}>{col.title}</span>
+          <span style={{ flex: 1, cursor: "default" }}>{col.title}</span>
         </Dropdown>
       </div>
     );
@@ -403,10 +378,10 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
         }
       />
       <ProductionListDetail jobs={dataSource} />
-      <DndContext 
-        sensors={sensors} 
-        onDragStart={onDragStart} 
-        onDragEnd={onDragEnd} 
+      <DndContext
+        sensors={sensors}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
         onDragCancel={onDragCancel}
         collisionDetection={closestCenter}
         modifiers={[restrictToHorizontalAxis]}
@@ -487,8 +462,7 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
               <span>
                 {(() => {
                   const col = columns.find((c) => c.key === activeId);
-                  const title = typeof col?.title === 'string' ? col.title : 
-                               (col?.dataIndex || col?.key || "Column");
+                  const title = typeof col?.title === "string" ? col.title : col?.dataIndex || col?.key || "Column";
                   return title;
                 })()}
               </span>