drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-09-01 18:35:24 +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

68
src/components/EditorSidePanel/TablesTab/TablesTab.jsx
View File

@@ -1,16 +1,19 @@
import { Collapse, Button } from "@douyinfe/semi-ui";
import { IconPlus } from "@douyinfe/semi-icons";
import { useSelect, useDiagram } from "../../../hooks";
import { ObjectType } from "../../../data/constants";
import { useSelect, useDiagram, useSaveState } from "../../../hooks";
import { ObjectType, State } from "../../../data/constants";
import { useTranslation } from "react-i18next";
import { DragHandle } from "../../SortableList/DragHandle";
import { SortableList } from "../../SortableList/SortableList";
import SearchBar from "./SearchBar";
import Empty from "../Empty";
import TableInfo from "./TableInfo";
import { useTranslation } from "react-i18next";
export default function TablesTab() {
const { tables, addTable } = useDiagram();
const { tables, addTable, setTables } = useDiagram();
const { selectedElement, setSelectedElement } = useSelect();
const { t } = useTranslation();
const { setSaveState } = useSaveState();
return (
<>
@@ -37,35 +40,48 @@ export default function TablesTab() {
setSelectedElement((prev) => ({
...prev,
open: true,
id: parseInt(k),
id: k[0],
element: ObjectType.TABLE,
}))
}
accordion
>
{tables.map((t) => (
<div id={`scroll_table_${t.id}`} key={t.id}>
<Collapse.Panel
className="relative"
header={
<>
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
{t.name}
</div>
<div
className="w-1 h-full absolute top-0 left-0 bottom-0"
style={{ backgroundColor: t.color }}
/>
</>
}
itemKey={`${t.id}`}
>
<TableInfo data={t} />
</Collapse.Panel>
</div>
))}
<SortableList
keyPrefix="tables-tab"
items={tables}
onChange={(newTables) => setTables(newTables)}
afterChange={() => setSaveState(State.SAVING)}
renderItem={(item) => <TableListItem table={item} />}
/>
</Collapse>
)}
</>
);
}
function TableListItem({ table }) {
return (
<div id={`scroll_table_${table.id}`}>
<Collapse.Panel
className="relative"
header={
<>
<div className="flex items-center gap-2">
<DragHandle id={table.id} />
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
{table.name}
</div>
</div>
<div
className="w-1 h-full absolute top-0 left-0 bottom-0"
style={{ backgroundColor: table.color }}
/>
</>
}
itemKey={`${table.id}`}
>
<TableInfo data={table} />
</Collapse.Panel>
</div>
);
}