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

2026-02-03 13:21:32 -05:00
parent db1b701a96
commit 22aae0a7f1
4 changed files with 308 additions and 108 deletions
--- a/client/src/components/production-list-table/production-list-table.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.component.jsx
@@ -1,15 +1,19 @@
-import { SyncOutlined } from "@ant-design/icons";
+import { HolderOutlined, SyncOutlined } from "@ant-design/icons";
 import { PageHeader } from "@ant-design/pro-layout";
 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 ReactDragListView from "react-drag-listview";
+import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors, closestCenter } 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";
 import { useTranslation } from "react-i18next";
 import { connect } from "react-redux";
 import { createStructuredSelector } from "reselect";
 import { selectTechnician } from "../../redux/tech/tech.selectors";
 import { selectBodyshop, selectCurrentUser } from "../../redux/user/user.selectors";
+import { selectDarkMode } from "../../redux/application/application.selectors.js";
 import Prompt from "../../utils/prompt.js";
 import AlertComponent from "../alert/alert.component.jsx";
 import ProductionListColumnsAdd from "../production-list-columns/production-list-columns.add.component";
@@ -23,12 +27,108 @@ import { logImEXEvent } from "../../firebase/firebase.utils.js";
 const mapStateToProps = createStructuredSelector({
  bodyshop: selectBodyshop,
  technician: selectTechnician,
-  currentUser: selectCurrentUser
+  currentUser: selectCurrentUser,
+  isDarkMode: selectDarkMode
 });

-export function ProductionListTable({ loading, data, refetch, bodyshop, technician, currentUser }) {
+// Draggable header cell component - combines drag and resize
+function DraggableHeaderCell(props) {
+  const { children, columnKey, onResize, width, ...restProps } = props;
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: columnKey,
+    disabled: !columnKey
+  });
+
+  const style = {
+    ...restProps.style,
+    transform: CSS.Transform.toString(transform),
+    transition,
+    cursor: "move",
+    opacity: isDragging ? 0.3 : 1
+  };
+
+  // If no columnKey, render as regular header
+  if (!columnKey) {
+    return <ResizeableTitle {...props} />;
+  }
+
+  // Combine drag functionality with resize
+  return (
+    <ResizeableTitle
+      {...restProps}
+      ref={setNodeRef}
+      style={style}
+      onResize={onResize}
+      width={width}
+      dragAttributes={attributes}
+      dragListeners={listeners}
+    >
+      {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);
+  const [activeId, setActiveId] = useState(null);
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 1
+      }
+    })
+  );
  const {
    treatments: { Production_List_Status_Colors, Enhanced_Payroll }
  } = useTreatmentsWithConfig({
@@ -118,17 +218,30 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
    logImEXEvent("production_list_sort_filter", { pagination, filters, sorter });
  };

-  const onDragEnd = (fromIndex, toIndex) => {
-    if (fromIndex === toIndex) return;
-    const columnsCopy = [...columns];
-    const [movedItem] = columnsCopy.splice(fromIndex, 1);
-    columnsCopy.splice(toIndex, 0, movedItem);
-    if (!_.isEqual(columnsCopy, columns)) {
-      setColumns(columnsCopy);
-      setHasUnsavedChanges(true);
+  const onDragStart = ({ active }) => {
+    setActiveId(active.id);
+  };
+
+  const onDragEnd = ({ active, over }) => {
+    setActiveId(null);
+    if (!over || active.id === over.id) return;
+
+    const oldIndex = columns.findIndex((col) => col.key === active.id);
+    const newIndex = columns.findIndex((col) => col.key === over.id);
+
+    if (oldIndex !== -1 && newIndex !== -1) {
+      const newColumns = arrayMove(columns, oldIndex, newIndex);
+      if (!_.isEqual(newColumns, columns)) {
+        setColumns(newColumns);
+        setHasUnsavedChanges(true);
+      }
    }
  };

+  const onDragCancel = () => {
+    setActiveId(null);
+  };
+
  const removeColumn = (e) => {
    const { key } = e;
    const newColumns = columns.filter((i) => i.key !== key);
@@ -172,10 +285,14 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
        }
      ]
    };
+    
    return (
-      <Dropdown className="prod-header-dropdown" menu={menu} trigger={["contextMenu"]}>
-        <span>{col.title}</span>
-      </Dropdown>
+      <div style={{ display: "flex", alignItems: "center", width: "100%" }}>
+        <HolderOutlined style={{ marginRight: "8px", color: "#999", cursor: "move" }} />
+        <Dropdown className="prod-header-dropdown" menu={menu} trigger={["contextMenu"]}>
+          <span style={{ flex: 1 }}>{col.title}</span>
+        </Dropdown>
+      </div>
    );
  };

@@ -286,60 +403,99 @@ export function ProductionListTable({ loading, data, refetch, bodyshop, technici
        }
      />
      <ProductionListDetail jobs={dataSource} />
-      <ReactDragListView.DragColumn onDragEnd={onDragEnd} nodeSelector="th" handleSelector=".prod-header-dropdown">
-        <Table
-          sticky
-          pagination={false}
-          size="small"
-          {...(Production_List_Status_Colors.treatment === "on" && {
-            onRow: (record, index) => {
-              if (!bodyshop.md_ro_statuses.production_colors) return null;
-              const color = bodyshop.md_ro_statuses.production_colors.find((x) => x.status === record.status);
-              if (!color) {
-                if (index % 2 === 0)
-                  return {
-                    style: {
-                      backgroundColor: "var(--table-row-even-bg)"
-                    }
-                  };
-                return null;
-              }
-              return {
-                className: "rowWithColor",
-                style: {
-                  "--bgColor": color.color
-                    ? `rgba(${color.color.r},${color.color.g},${color.color.b},${color.color.a || 1})`
-                    : "var(--status-row-bg-fallback)"
+      <DndContext 
+        sensors={sensors} 
+        onDragStart={onDragStart} 
+        onDragEnd={onDragEnd} 
+        onDragCancel={onDragCancel}
+        collisionDetection={closestCenter}
+        modifiers={[restrictToHorizontalAxis]}
+      >
+        <SortableContext items={columns.map((col) => col.key)} strategy={horizontalListSortingStrategy}>
+          <Table
+            sticky
+            pagination={false}
+            size="small"
+            {...(Production_List_Status_Colors.treatment === "on" && {
+              onRow: (record, index) => {
+                if (!bodyshop.md_ro_statuses.production_colors) return null;
+                const color = bodyshop.md_ro_statuses.production_colors.find((x) => x.status === record.status);
+                if (!color) {
+                  if (index % 2 === 0)
+                    return {
+                      style: {
+                        backgroundColor: "var(--table-row-even-bg)"
+                      }
+                    };
+                  return null;
                }
+                return {
+                  className: "rowWithColor",
+                  style: {
+                    "--bgColor": color.color
+                      ? `rgba(${color.color.r},${color.color.g},${color.color.b},${color.color.a || 1})`
+                      : "var(--status-row-bg-fallback)"
+                  }
+                };
+              }
+            })}
+            components={{
+              header: {
+                cell: DraggableHeaderCell
+              }
+            }}
+            columns={columns.map((c, index) => {
+              return {
+                ...c,
+                filteredValue: state.filteredInfo[c.key] || null,
+                sortOrder: state.sortedInfo.columnKey === c.key && state.sortedInfo.order,
+                title: headerItem(c),
+                ellipsis: true,
+                width: c.width ?? 100,
+                onHeaderCell: (column) => ({
+                  columnKey: column.key,
+                  width: column.width,
+                  onResize: handleResize(index)
+                })
              };
-            }
-          })}
-          components={{
-            header: {
-              cell: ResizeableTitle
-            }
-          }}
-          columns={columns.map((c, index) => {
-            return {
-              ...c,
-              filteredValue: state.filteredInfo[c.key] || null,
-              sortOrder: state.sortedInfo.columnKey === c.key && state.sortedInfo.order,
-              title: headerItem(c),
-              ellipsis: true,
-              width: c.width ?? 100,
-              onHeaderCell: (column) => ({
-                width: column.width,
-                onResize: handleResize(index)
-              })
-            };
-          })}
-          rowKey="id"
-          loading={loading}
-          dataSource={dataSource}
-          scroll={{ x: 1000 }}
-          onChange={handleTableChange}
-        />
-      </ReactDragListView.DragColumn>
+            })}
+            rowKey="id"
+            loading={loading}
+            dataSource={dataSource}
+            scroll={{ x: 1000 }}
+            onChange={handleTableChange}
+          />
+        </SortableContext>
+        <DragOverlay dropAnimation={null}>
+          {activeId ? (
+            <div
+              style={{
+                backgroundColor: isDarkMode ? "#141414" : "white",
+                color: isDarkMode ? "white" : "#000",
+                border: `2px solid ${isDarkMode ? "#177ddc" : "#1890ff"}`,
+                borderRadius: "4px",
+                padding: "12px 16px",
+                boxShadow: "0 4px 12px rgba(0, 0, 0, 0.25)",
+                cursor: "grabbing",
+                display: "flex",
+                alignItems: "center",
+                fontWeight: 500,
+                minWidth: "120px"
+              }}
+            >
+              <HolderOutlined style={{ marginRight: "8px", color: isDarkMode ? "white" : "#000", fontSize: "16px" }} />
+              <span>
+                {(() => {
+                  const col = columns.find((c) => c.key === activeId);
+                  const title = typeof col?.title === 'string' ? col.title : 
+                               (col?.dataIndex || col?.key || "Column");
+                  return title;
+                })()}
+              </span>
+            </div>
+          ) : null}
+        </DragOverlay>
+      </DndContext>
    </div>
  );
 }
--- a/client/src/components/production-list-table/production-list-table.resizeable.component.jsx
+++ b/client/src/components/production-list-table/production-list-table.resizeable.component.jsx
@@ -1,10 +1,11 @@
+import { forwardRef } from "react";
 import { Resizable } from "react-resizable";

-export default function ResizableComponent(props) {
-  const { onResize, width, ...restProps } = props;
+const ResizableComponent = forwardRef((props, ref) => {
+  const { onResize, width, dragAttributes, dragListeners, ...restProps } = props;

  if (!width) {
-    return <th {...restProps} />;
+    return <th ref={ref} {...restProps} {...(dragAttributes || {})} {...(dragListeners || {})} />;
  }

  return (
@@ -22,7 +23,11 @@ export default function ResizableComponent(props) {
        />
      }
    >
-      <th {...restProps} />
+      <th ref={ref} {...restProps} {...(dragAttributes || {})} {...(dragListeners || {})} />
    </Resizable>
  );
-}
+});
+
+ResizableComponent.displayName = "ResizableComponent";
+
+export default ResizableComponent;