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

fix deleting tables

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:13 +03:00
parent d3897f8112
commit 7f6a2d208f
6 changed files with 2176 additions and 2066 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4139
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

1
src/components/canvas.jsx
View File

@ -294,7 +294,6 @@ export default function Canvas(props) {
onMouseDown={(e) =>
handleMouseDownRect(e, table.id, ObjectType.TABLE)
}
handleDelete={props.handleDelete}
/>
))}
{linking && (

10
src/components/editor_panel.jsx
View File

@ -1,4 +1,4 @@
import { React, useState, useRef } from "react";
import { React, useState, useRef, memo } from "react";
import { ResizableBox } from "react-resizable";
import CodeMirror from "@uiw/react-codemirror";
import { createTheme } from "@uiw/codemirror-themes";
@ -28,7 +28,7 @@ const myTheme = createTheme({
],
});
export default function EditorPanel(props) {
const EditorPanel = memo(function EditorPanel(props) {
const [tab, setTab] = useState("1");
const map = useRef(new Map());
@ -40,7 +40,7 @@ export default function EditorPanel(props) {
];
const contentList = [
<div>
<TableOverview tables={props.tables} setTables={props.setTables} handleDelete={props.handleDelete}/>
<TableOverview tables={props.tables} setTables={props.setTables}/>
</div>,
<div>
<ReferenceOverview
@ -176,4 +176,6 @@ export default function EditorPanel(props) {
</div>
</ResizableBox>
);
}
});
export default EditorPanel;

16
src/components/table.jsx
View File

@ -21,7 +21,7 @@ import {
export default function Table(props) {
const [isHovered, setIsHovered] = useState(false);
const [hoveredField, setHoveredField] = useState(-1);
const [name, setName] = useState(props.tableData.name);
// const [name, setName] = useState(props.tableData.name);
const [visible, setVisible] = useState(false);
const [editFieldVisible, setEditFieldVisible] = useState(-1);
@ -127,16 +127,16 @@ export default function Table(props) {
})
}
>
<input
type="text"
value={name}
onChange={(e) => setName(e.target.value)}
<div
// type="text"
// value={name}
// onChange={(e) => setName(e.target.value)}
className={`p-1 select-text w-[100px] bg-gray-400 focus:bg-gray-200 ${
name < 1
false
? "ring-2 ring-red-600"
: "focus:ring-2 focus:ring-sky-500 "
}`}
/>
>{props.tableData.name}</div>
</form>
}
{isHovered && (
@ -157,7 +157,7 @@ export default function Table(props) {
okText="Delete"
onConfirm={() => {
Toast.success(`Table deleted!`);
props.handleDelete(props.id);
console.log("table.jsx ", props.id);
}}
onCancel={() => {}}
>

58
src/components/table_overview.jsx
View File

@ -1,8 +1,7 @@
import { React, useState } from "react";
import { React, useState, memo } from "react";
import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
import {
Collapse,
Input,
Row,
Col,
Form,
@ -12,7 +11,7 @@ import {
Checkbox,
Select,
AutoComplete,
Toast
Toast,
} from "@douyinfe/semi-ui";
import {
IconMore,
@ -24,9 +23,9 @@ import {
IconSearch,
} from "@douyinfe/semi-icons";
export default function TableOverview(props) {
const TableOverview = memo(function TableOverView(props) {
const [indexActiveKey, setIndexActiveKey] = useState("");
const [indexActiveKeyTable, setIndexActiveKeyTable] = useState([]);
const [tableActiveKey, setTableActiveKey] = useState("");
const updateColor = (id, c) => {
const updatedTables = [...props.tables];
@ -71,7 +70,7 @@ export default function TableOverview(props) {
onChange={(v) => handleChange(v)}
onSelect={(v) => {
const { id, name } = props.tables.find((t) => t.name === v);
setIndexActiveKeyTable([`${id}`]);
setTableActiveKey(`${id}`);
document
.getElementById(`${name}_scroll_id`)
.scrollIntoView({ behavior: "smooth" });
@ -122,29 +121,32 @@ export default function TableOverview(props) {
</Row>
</div>
<Collapse
activeKey={indexActiveKeyTable}
onChange={(k) => setIndexActiveKeyTable(k)}
activeKey={tableActiveKey}
onChange={(k) => setTableActiveKey(k)}
accordion
>
{props.tables.map((t, i) => (
<div id={`${t.name}_scroll_id`} key={t.id}>
<Collapse.Panel
header={
<div>
<Input defaultValue={t.name} borderless />
</div>
}
itemKey={`${t.id}`}
>
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
{t.fields.map((f, j) => (
<Form
key={j}
onChange={(value) => {
const updatedTables = [...props.tables];
updatedTables[i].fields = updatedTables[i].fields.map(
(field, index) =>
index === j ? { ...field, ...value.values } : field
);
props.setTables(updatedTables);
props.setTables((prev) => {
return prev.map((p, idx) => {
if (idx === i) {
return {
...p,
fields: p.fields.map((field, index) =>
index === j
? { ...field, ...value.values }
: field
),
};
}
return p;
});
});
}}
>
<Row
@ -176,6 +178,7 @@ export default function TableOverview(props) {
})}
filter
initValue={f.type}
placeholder="Type"
></Form.Select>
</Col>
<Col span={3}>
@ -583,7 +586,12 @@ export default function TableOverview(props) {
type="danger"
onClick={() => {
Toast.success(`Table deleted!`);
props.handleDelete(i);
props.setTables((prev) => {
return prev
.filter((e) => e.id !== i)
.map((e, idx) => ({ ...e, id: idx }));
});
setTableActiveKey("");
}}
></Button>
</Col>
@ -594,4 +602,6 @@ export default function TableOverview(props) {
</Collapse>
</>
);
}
});
export default TableOverview;

18
src/pages/editor.jsx
View File

@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect } from "react";
import Header from "../components/header";
import Sidebar from "../components/sidebar";
import ControlPanel from "../components/control_panel";
@ -13,14 +13,13 @@ export default function Editor(props) {
const [relationships, setRelationships] = useState([]);
const [areas, setAreas] = useState([]);
const deleteTable = (id) => {
let updatedTables = [...tables];
updatedTables.splice(id, 1);
updatedTables = updatedTables.length>0? updatedTables.map((t, i) => ({ ...t, id: i })):[];
setTables(updatedTables);
console.log(tables);
};
useEffect(() => {
console.log("changed: ", tables);
}, [tables]);
// const handleDelete = useCallback((id)=>{
// setTables(prev=>prev.filter(e=>e.id!==id).map((e, i)=>({...e, id: i})))
// }, [])
return (
<>
@ -37,7 +36,7 @@ export default function Editor(props) {
setRelationships={setRelationships}
areas={areas}
setAreas={setAreas}
handleDelete={deleteTable}
// handleDelete={handleDelete}
/>
<Canvas
tables={tables}
@ -48,7 +47,6 @@ export default function Editor(props) {
setRelationships={setRelationships}
areas={areas}
setAreas={setAreas}
handleDelete={deleteTable}
/>
</DndProvider>
<Sidebar />