From aed1882165278ee34a7d636be662b345cc095893 Mon Sep 17 00:00:00 2001
From: haecheonlee <dlgocjs1@gmail.com>
Date: Tue, 16 Apr 2024 21:09:23 -0400
Subject: [PATCH 1/3] Make table fields draggable and order

---
 .../EditorSidePanel/TablesTab/TableInfo.jsx   | 35 +++++++++++++++++--
 1 file changed, 32 insertions(+), 3 deletions(-)

diff --git a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
index 8b2cb08..cc64a02 100644
--- a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useRef, useState } from "react";
 import {
   Collapse,
   Row,
@@ -19,9 +19,11 @@ import IndexDetails from "./IndexDetails";
 
 export default function TableInfo({ data }) {
   const [indexActiveKey, setIndexActiveKey] = useState("");
-  const { deleteTable, updateTable } = useTables();
+  const { deleteTable, updateTable, updateField } = useTables();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
+  const draggingElementIndex = useRef();
+  const isDragging = useRef();
 
   return (
     <div>
@@ -53,7 +55,34 @@ export default function TableInfo({ data }) {
         />
       </div>
       {data.fields.map((f, j) => (
-        <TableField key={"field_" + j} data={f} tid={data.id} index={j} />
+        <div
+          key={"field_" + j}
+          className="cursor-pointer"
+          draggable
+          onDragOver={(e) => {
+            e.preventDefault();
+            if (isDragging.current) return;
+            isDragging.current = true;
+            draggingElementIndex.current = j;
+          }}
+          onDrop={(e) => {
+            e.preventDefault();
+            isDragging.current = false;
+            const index = draggingElementIndex.current;
+
+            if (index == null || index === j) {
+              return;
+            }
+
+            const a = data.fields[index];
+            const b = data.fields[j];
+
+            updateField(data.id, index, { ...b, id: index });
+            updateField(data.id, j, { ...a, id: j });
+          }}
+        >
+          <TableField data={f} tid={data.id} index={j} />
+        </div>
       ))}
       {data.indices.length > 0 && (
         <Card

From 8f659eb975f46f70a0d99502ed85c0c2c54d8e2b Mon Sep 17 00:00:00 2001
From: haecheonlee <dlgocjs1@gmail.com>
Date: Tue, 16 Apr 2024 22:30:47 -0400
Subject: [PATCH 2/3] Set isDragging to false when dragging ends

---
 src/components/EditorSidePanel/TablesTab/TableInfo.jsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
index cc64a02..23ce8e3 100644
--- a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
@@ -24,6 +24,7 @@ export default function TableInfo({ data }) {
   const [editField, setEditField] = useState({});
   const draggingElementIndex = useRef();
   const isDragging = useRef();
+  console.log(isDragging.current);
 
   return (
     <div>
@@ -62,6 +63,7 @@ export default function TableInfo({ data }) {
           onDragOver={(e) => {
             e.preventDefault();
             if (isDragging.current) return;
+            console.log("dragging over...");
             isDragging.current = true;
             draggingElementIndex.current = j;
           }}
@@ -80,6 +82,10 @@ export default function TableInfo({ data }) {
             updateField(data.id, index, { ...b, id: index });
             updateField(data.id, j, { ...a, id: j });
           }}
+          onDragEnd={(e) => {
+            e.preventDefault();
+            isDragging.current = false;
+          }}
         >
           <TableField data={f} tid={data.id} index={j} />
         </div>

From 0347dbf4a2d38466d711d3496615ee2ade4de98b Mon Sep 17 00:00:00 2001
From: haecheonlee <dlgocjs1@gmail.com>
Date: Tue, 16 Apr 2024 22:32:08 -0400
Subject: [PATCH 3/3] Remove console

---
 src/components/EditorSidePanel/TablesTab/TableInfo.jsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
index 23ce8e3..e70ce7a 100644
--- a/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
+++ b/src/components/EditorSidePanel/TablesTab/TableInfo.jsx
@@ -24,7 +24,6 @@ export default function TableInfo({ data }) {
   const [editField, setEditField] = useState({});
   const draggingElementIndex = useRef();
   const isDragging = useRef();
-  console.log(isDragging.current);
 
   return (
     <div>
@@ -63,7 +62,6 @@ export default function TableInfo({ data }) {
           onDragOver={(e) => {
             e.preventDefault();
             if (isDragging.current) return;
-            console.log("dragging over...");
             isDragging.current = true;
             draggingElementIndex.current = j;
           }}