drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-10-13 13:58:05 +00:00
Code Issues Packages Projects Releases Wiki Activity

Table and field drag and drop ordering (#444)

Browse Source 
* Add dnd for tables and fields

* Fix inputs

* Decouple ids and indecies in the editor

* Decouple ids and indecies in utils

* Fix field indexes

* Use nanoid instead of numberic ids for fields and tables

* Fix review comments
This commit is contained in:
1ilit
2025-05-11 21:44:04 +04:00
committed by GitHub
parent e35fbde3e7
commit 94226de561
44 changed files with 990 additions and 955 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
View File

@@ -1,4 +1,4 @@
import { useState } from "react";
import { useMemo, useState } from "react";
import {
Input,
TextArea,
@@ -14,12 +14,13 @@ import { useTranslation } from "react-i18next";
import { dbToTypes } from "../../../data/datatypes";
import { databases } from "../../../data/databases";
export default function FieldDetails({ data, tid, index }) {
export default function FieldDetails({ data, tid }) {
const { t } = useTranslation();
const { tables, database } = useDiagram();
const { setUndoStack, setRedoStack } = useUndoRedo();
const { updateField, deleteField } = useDiagram();
const [editField, setEditField] = useState({});
const table = useMemo(() => tables.find((t) => t.id === tid), [tables, tid]);
return (
<div>
@@ -29,7 +30,7 @@ export default function FieldDetails({ data, tid, index }) {
placeholder={t("default_value")}
value={data.default}
disabled={dbToTypes[database][data.type].noDefault || data.increment}
onChange={(value) => updateField(tid, index, { default: value })}
onChange={(value) => updateField(tid, data.id, { default: value })}
onFocus={(e) => setEditField({ default: e.target.value })}
onBlur={(e) => {
if (e.target.value === editField.default) return;
@@ -40,11 +41,11 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: editField,
redo: { default: e.target.value },
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
@@ -66,7 +67,7 @@ export default function FieldDetails({ data, tid, index }) {
addOnBlur
className="my-2"
placeholder={t("use_for_batch_input")}
onChange={(v) => updateField(tid, index, { values: v })}
onChange={(v) => updateField(tid, data.id, { values: v })}
onFocus={() => setEditField({ values: data.values })}
onBlur={() => {
if (
@@ -80,11 +81,11 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: editField,
redo: { values: data.values },
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
@@ -101,7 +102,7 @@ export default function FieldDetails({ data, tid, index }) {
className="my-2 w-full"
placeholder={t("size")}
value={data.size}
onChange={(value) => updateField(tid, index, { size: value })}
onChange={(value) => updateField(tid, data.id, { size: value })}
onFocus={(e) => setEditField({ size: e.target.value })}
onBlur={(e) => {
if (e.target.value === editField.size) return;
@@ -112,11 +113,11 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: editField,
redo: { size: e.target.value },
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
@@ -138,7 +139,7 @@ export default function FieldDetails({ data, tid, index }) {
: "error"
}
value={data.size}
onChange={(value) => updateField(tid, index, { size: value })}
onChange={(value) => updateField(tid, data.id, { size: value })}
onFocus={(e) => setEditField({ size: e.target.value })}
onBlur={(e) => {
if (e.target.value === editField.size) return;
@@ -149,11 +150,11 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: editField,
redo: { size: e.target.value },
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
@@ -171,7 +172,7 @@ export default function FieldDetails({ data, tid, index }) {
placeholder={t("check")}
value={data.check}
disabled={data.increment}
onChange={(value) => updateField(tid, index, { check: value })}
onChange={(value) => updateField(tid, data.id, { check: value })}
onFocus={(e) => setEditField({ check: e.target.value })}
onBlur={(e) => {
if (e.target.value === editField.check) return;
@@ -182,11 +183,11 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: editField,
redo: { check: e.target.value },
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
@@ -210,7 +211,7 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: {
[checkedValues.target.value]: !checkedValues.target.checked,
},
@@ -220,7 +221,7 @@ export default function FieldDetails({ data, tid, index }) {
},
]);
setRedoStack([]);
updateField(tid, index, {
updateField(tid, data.id, {
[checkedValues.target.value]: checkedValues.target.checked,
});
}}
@@ -242,7 +243,7 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: {
[checkedValues.target.value]: !checkedValues.target.checked,
},
@@ -250,13 +251,13 @@ export default function FieldDetails({ data, tid, index }) {
[checkedValues.target.value]: checkedValues.target.checked,
},
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
]);
setRedoStack([]);
updateField(tid, index, {
updateField(tid, data.id, {
increment: !data.increment,
check: data.increment ? data.check : "",
});
@@ -277,7 +278,7 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: {
[checkedValues.target.value]: !checkedValues.target.checked,
},
@@ -285,13 +286,13 @@ export default function FieldDetails({ data, tid, index }) {
[checkedValues.target.value]: checkedValues.target.checked,
},
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
]);
setRedoStack([]);
updateField(tid, index, {
updateField(tid, data.id, {
isArray: checkedValues.target.checked,
increment: data.isArray ? data.increment : false,
});
@@ -314,7 +315,7 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: {
[checkedValues.target.value]:
!checkedValues.target.checked,
@@ -324,13 +325,13 @@ export default function FieldDetails({ data, tid, index }) {
checkedValues.target.checked,
},
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},
]);
setRedoStack([]);
updateField(tid, index, {
updateField(tid, data.id, {
unsigned: checkedValues.target.checked,
});
}}
@@ -344,7 +345,7 @@ export default function FieldDetails({ data, tid, index }) {
value={data.comment}
autosize
rows={2}
onChange={(value) => updateField(tid, index, { comment: value })}
onChange={(value) => updateField(tid, data.id, { comment: value })}
onFocus={(e) => setEditField({ comment: e.target.value })}
onBlur={(e) => {
if (e.target.value === editField.comment) return;
@@ -355,11 +356,11 @@ export default function FieldDetails({ data, tid, index }) {
element: ObjectType.TABLE,
component: "field",
tid: tid,
fid: index,
fid: data.id,
undo: editField,
redo: { comment: e.target.value },
message: t("edit_table", {
tableName: tables[tid].name,
tableName: table.name,
extra: "[field]",
}),
},