titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #54 from HaecheonLee/fea/make-table-fields-draggable-and-order

Browse Source 
Make table fields draggable and order
This commit is contained in:
lilit 2024-04-21 08:35:01 +03:00 committed by GitHub
commit 7436b6037d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
src/components/EditorSidePanel/TablesTab/TableInfo.jsx
View File

@ -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,38 @@ 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 });
}}
onDragEnd={(e) => {
e.preventDefault();
isDragging.current = false;
}}
>
<TableField data={f} tid={data.id} index={j} />
</div>
))}
{data.indices.length > 0 && (
<Card