diff --git a/client/src/components/production-list-table/production-list-table.component.jsx b/client/src/components/production-list-table/production-list-table.component.jsx index e35200a74..760ee0f0b 100644 --- a/client/src/components/production-list-table/production-list-table.component.jsx +++ b/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 ; } + // 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 ( {children} ); } -// 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 ( -//
-// -// -// -// -// {col.title} -// -//
-// ); -// } - 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 (
- + + + - {col.title} + {col.title}
); @@ -403,10 +378,10 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici } /> - {(() => { 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; })()}