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

edit table sidesheet

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:48:53 +03:00
parent 2a04f651d3
commit ce92a35c9f
7 changed files with 565 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/canvas.jsx
View File

@ -365,6 +365,8 @@ export default function Canvas(props) {
onMouseDown={(e) => onMouseDown={(e) =>
handleMouseDownRect(e, table.id, ObjectType.TABLE) handleMouseDownRect(e, table.id, ObjectType.TABLE)
} }
selectedTable={props.selectedTable}
setSelectedTable={props.setSelectedTable}
/> />
))} ))}
{linking && ( {linking && (

11
src/components/control_panel.jsx
View File

@ -18,6 +18,7 @@ import {
Form, Form,
Image, Image,
Modal, Modal,
Spin,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { toPng, toJpeg, toSvg } from "html-to-image"; import { toPng, toJpeg, toSvg } from "html-to-image";
import { saveAs } from "file-saver"; import { saveAs } from "file-saver";
@ -31,7 +32,7 @@ export default function ControlPanel(props) {
`diagram_${new Date().toISOString()}` `diagram_${new Date().toISOString()}`
); );
const [extension, setExtension] = useState(""); const [extension, setExtension] = useState("");
const {layout, setLayout} = useContext(LayoutContext); const { layout, setLayout } = useContext(LayoutContext);
const menu = { const menu = {
File: { File: {
@ -364,7 +365,13 @@ export default function ControlPanel(props) {
cancelText="Cancel" cancelText="Cancel"
width={470} width={470}
> >
<Image src={dataUrl} alt="Diagram" width={420}></Image> {dataUrl !== "" || dataUrl ? (
<Image src={dataUrl} alt="Diagram" width={420}></Image>
) : (
<div className="text-center my-3">
<Spin tip="Loading..." size="large"></Spin>
</div>
)}
<Form <Form
labelPosition="left" labelPosition="left"
labelAlign="right" labelAlign="right"

9
src/components/editor_panel.jsx
View File

@ -30,7 +30,7 @@ const EditorPanel = (props) => {
const [tab, setTab] = useState("1"); const [tab, setTab] = useState("1");
// const map = useRef(new Map()); // const map = useRef(new Map());
// const {tables, setTables} = useContext(TableContext); // const {tables, setTables} = useContext(TableContext);
const {areas, setAreas} = useContext(AreaContext); const { areas, setAreas } = useContext(AreaContext);
const tabList = [ const tabList = [
{ tab: "Tables", itemKey: "1" }, { tab: "Tables", itemKey: "1" },
@ -39,8 +39,11 @@ const EditorPanel = (props) => {
{ tab: "Editor", itemKey: "4" }, { tab: "Editor", itemKey: "4" },
]; ];
const contentList = [ const contentList = [
<TableOverview />, <TableOverview
<ReferenceOverview/>, selectedTable={props.selectedTable}
setSelectedTable={props.setSelectedTable}
/>,
<ReferenceOverview />,
<Shape />, <Shape />,
<CodeMirror <CodeMirror
value={props.code} value={props.code}

527
src/components/table.jsx
View File

@ -1,16 +1,28 @@
import { React, useState, useContext } from "react"; import { React, useState, useContext } from "react";
// import { sqlDataTypes } from "../data/data"; import { sqlDataTypes, tableThemes, defaultTableTheme } from "../data/data";
import { IconEdit, IconPlus, IconMore, IconMinus } from "@douyinfe/semi-icons"; import {
IconEdit,
IconPlus,
IconMore,
IconMinus,
IconDeleteStroked,
IconKeyStroked,
IconCheckboxTick,
IconColorPalette,
} from "@douyinfe/semi-icons";
import { import {
// Modal, // Modal,
// Form, Select,
// Checkbox, Card,
// Row, Form,
// Col, Checkbox,
Row,
Col,
Popover, Popover,
Tag, Tag,
Button, Button,
SideSheet, SideSheet,
Toast,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { LayoutContext, TableContext } from "../pages/editor"; import { LayoutContext, TableContext } from "../pages/editor";
@ -18,22 +30,41 @@ export default function Table(props) {
const [isHovered, setIsHovered] = useState(false); const [isHovered, setIsHovered] = useState(false);
const [hoveredField, setHoveredField] = useState(-1); const [hoveredField, setHoveredField] = useState(-1);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
const {layout} = useContext(LayoutContext); const { layout } = useContext(LayoutContext);
const {setTables} = useContext(TableContext); const { setTables } = useContext(TableContext);
// const [editFieldVisible, setEditFieldVisible] = useState(-1);
// const [field, setField] = useState({
// name: "",
// type: "",
// default: "",
// primary: false,
// unique: false,
// notNull: false,
// increment: false,
// comment: "",
// });
const height = props.tableData.fields.length * 36 + 50 + 3; const height = props.tableData.fields.length * 36 + 50 + 3;
const updatedField = (tid, fid, updatedValues) => {
setTables((prev) =>
prev.map((table, i) => {
if (tid === i) {
return {
...table,
fields: table.fields.map((field, j) =>
fid === j ? { ...field, ...updatedValues } : field
),
};
}
return table;
})
);
};
const updateTable = (tid, updatedValues) => {
setTables((prev) =>
prev.map((table, i) => {
if (tid === i) {
return {
...table,
...updatedValues,
};
}
return table;
})
);
};
return ( return (
<g> <g>
<foreignObject <foreignObject
@ -77,7 +108,16 @@ export default function Table(props) {
opacity: "0.7", opacity: "0.7",
marginRight: "6px", marginRight: "6px",
}} }}
onClick={() => setVisible(true)} onClick={() => {
if (!layout.sidebar) {
setVisible(true);
} else {
props.setSelectedTable(`${props.tableData.id}`);
document
.getElementById(`scroll_table_${props.tableData.id}`)
.scrollIntoView({ behavior: "smooth" });
}
}}
></Button> ></Button>
<Button <Button
icon={<IconPlus />} icon={<IconPlus />}
@ -94,9 +134,11 @@ export default function Table(props) {
<div className="text-slate-600"> <div className="text-slate-600">
<p className="mb-2"> <p className="mb-2">
<strong>Comment :</strong>{" "} <strong>Comment :</strong>{" "}
{props.tableData.comment === "" {props.tableData.comment === "" ? (
? "No comment" "No comment"
: <div>{props.tableData.comment}</div>} ) : (
<div>{props.tableData.comment}</div>
)}
</p> </p>
<p className="text-slate-600"> <p className="text-slate-600">
<strong <strong
@ -133,7 +175,7 @@ export default function Table(props) {
position="rightTop" position="rightTop"
showArrow showArrow
trigger="click" trigger="click"
style={{width: "200px"}} style={{ width: "200px" }}
> >
<Button <Button
icon={<IconMore />} icon={<IconMore />}
@ -245,7 +287,9 @@ export default function Table(props) {
...updatedTables[props.tableData.id].fields, ...updatedTables[props.tableData.id].fields,
]; ];
updatedFields.splice(i, 1); updatedFields.splice(i, 1);
updatedTables[props.tableData.id].fields = [...updatedFields]; updatedTables[props.tableData.id].fields = [
...updatedFields,
];
return updatedTables; return updatedTables;
}); });
}} }}
@ -262,12 +306,437 @@ export default function Table(props) {
</div> </div>
</foreignObject> </foreignObject>
<SideSheet <SideSheet
title="Sidesheet" title="Edit table"
visible={visible && !layout.sidebar} visible={visible}
onCancel={() => setVisible((prev) => !prev)} onCancel={() => setVisible((prev) => !prev)}
style={{ paddingBottom: "16px" }}
> >
<p>This is the content of a basic sidesheet.</p> <Form
<p>Here is more content...</p> labelPosition="left"
onChange={(value) => updateTable(props.tableData.id, value.values)}
>
<Form.Input
initValue={props.tableData.name}
field="name"
label="Name"
/>
</Form>
<div>
{props.tableData.fields.map((f, j) => (
<Form
key={j}
onChange={(value) =>
updatedField(props.tableData.id, j, value.values)
}
initValues={f}
>
<Row
type="flex"
justify="start"
align="middle"
gutter={6}
className="hover:bg-slate-100"
>
<Col span={8}>
<Form.Input
field="name"
noLabel={true}
className="m-0"
placeholder="Name"
/>
</Col>
<Col span={8}>
<Form.Select
className="w-full"
field="type"
noLabel={true}
optionList={sqlDataTypes.map((value, index) => {
return {
label: value,
value: value,
};
})}
filter
placeholder="Type"
></Form.Select>
</Col>
<Col
span={8}
style={{ display: "flex", justifyContent: "space-around" }}
>
<Button
type={f.notNull ? "primary" : "tertiary"}
title="Nullable"
theme={f.notNull ? "solid" : "light"}
onClick={() =>
updatedField(props.tableData.id, j, {
notNull: !f.notNull,
})
}
>
?
</Button>
<Button
type={f.primary ? "primary" : "tertiary"}
title="Primary"
theme={f.primary ? "solid" : "light"}
onClick={() =>
updatedField(props.tableData.id, j, {
primary: !f.primary,
})
}
icon={<IconKeyStroked />}
></Button>
<Popover
content={
<div className="px-1">
<Form
onChange={(value) =>
updatedField(props.tableData.id, j, value.values)
}
>
<Form.Input
field="default"
label="Default"
initValue={f.default}
trigger="blur"
placeholder="Set default"
/>
<Form.Input
field="check"
label="Check Expression"
trigger="blur"
placeholder="Set constraint"
initValue={f.check}
/>
<div className="flex justify-between items-center my-3">
<label htmlFor="unique" className="font-medium">
Unique
</label>
<Checkbox
value="unique"
defaultChecked={f.unique}
onChange={(checkedValues) =>
updatedField(props.tableData.id, j, {
[checkedValues.target.value]:
checkedValues.target.checked,
})
}
></Checkbox>
</div>
<div className="flex justify-between items-center my-3">
<label htmlFor="increment" className="font-medium">
Autoincrement
</label>
<Checkbox
value="increment"
defaultChecked={f.increment}
onChange={(checkedValues) =>
updatedField(props.tableData.id, j, {
[checkedValues.target.value]:
checkedValues.target.checked,
})
}
></Checkbox>
</div>
<Form.TextArea
field="comment"
label="Comment"
placeholder="Add comment"
initValue={f.comment}
autosize
rows={2}
/>
</Form>
<Button
icon={<IconDeleteStroked />}
type="danger"
block
onClick={(ev) => {
setTables((prev) => {
const updatedTables = [...prev];
const updatedFields = [
...updatedTables[props.tableData.id].fields,
];
updatedFields.splice(j, 1);
updatedTables[props.tableData.id].fields = [
...updatedFields,
];
return updatedTables;
});
}}
>
Delete
</Button>
</div>
}
trigger="click"
position="rightTop"
showArrow
>
<Button type="tertiary" icon={<IconMore />}></Button>
</Popover>
</Col>
</Row>
</Form>
))}
{props.tableData.indices.length > 0 && (
<Card
bodyStyle={{ padding: "14px" }}
style={{ marginTop: "12px", marginBottom: "12px" }}
headerLine={false}
>
<div className="font-medium ms-1 mb-1">Indices</div>
{props.tableData.indices.map((idx, k) => (
<div className="flex justify-between items-center mb-2" key={k}>
<Select
placeholder="Select fields"
multiple
optionList={props.tableData.fields.map((e) => ({
value: e.name,
label: e.name,
}))}
className="w-full"
defaultValue={idx.fields}
onChange={(value) => {
setTables((prev) =>
prev.map((t, i) => {
if (t.id === props.tableData.id) {
return {
...t,
indices: t.indices.map((index, j) => {
if (j === k)
return {
name: `${value.join("_")}_index`,
fields: [...value],
};
return index;
}),
};
}
return t;
})
);
}}
/>
<Popover
content={
<div className="px-1">
<Form>
<Form.Input
field="name"
label="Name"
initValue={idx.name}
trigger="blur"
placeholder="Index name"
/>
</Form>
<Button
icon={<IconDeleteStroked />}
type="danger"
block
onClick={() => {
setTables((prev) =>
prev.map((t, i) => {
if (t.id === props.tableData.id) {
const updatedIndices = [...t.indices];
updatedIndices.splice(k, 1);
return {
...t,
indices: updatedIndices,
};
}
return t;
})
);
}}
>
Delete
</Button>
</div>
}
trigger="click"
position="rightTop"
showArrow
>
<Button
icon={<IconMore />}
type="tertiary"
style={{ marginLeft: "12px" }}
></Button>
</Popover>
</div>
))}
</Card>
)}
<Card
bodyStyle={{ padding: "14px" }}
style={{ marginTop: "12px", marginBottom: "12px" }}
headerLine={false}
>
<div className="font-medium ms-1">Comment</div>
<Form
onChange={(value) =>
updateTable(props.tableData.id, value.values)
}
>
<Form.TextArea
field="comment"
noLabel={true}
showClear
onClear={() => updateTable(props.tableData.id, { comment: "" })}
initValue={props.tableData.comment}
autosize
placeholder="Add comment"
rows={1}
/>
</Form>
</Card>
<Row gutter={6} className="mt-2">
<Col span={8}>
<Popover
content={
<div>
<div className="flex justify-between items-center p-2">
<div className="font-medium">Theme</div>
<Button
type="tertiary"
size="small"
onClick={() =>
updateTable(props.tableData.id, {
color: defaultTableTheme,
})
}
>
Clear
</Button>
</div>
<hr />
<div className="py-3">
<div>
{tableThemes
.slice(0, Math.ceil(tableThemes.length / 2))
.map((c) => (
<button
key={c}
style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1"
onClick={() =>
updateTable(props.tableData.id, { color: c })
}
>
{props.tableData.color === c ? (
<IconCheckboxTick style={{ color: "white" }} />
) : (
<IconCheckboxTick style={{ color: c }} />
)}
</button>
))}
</div>
<div className="mt-3">
{tableThemes
.slice(Math.ceil(tableThemes.length / 2))
.map((c) => (
<button
key={c}
style={{ backgroundColor: c }}
className="p-3 rounded-full mx-1"
onClick={() =>
updateTable(props.tableData.id, { color: c })
}
>
<IconCheckboxTick
style={{
color:
props.tableData.color === c ? "white" : c,
}}
/>
</button>
))}
</div>
</div>
</div>
}
trigger="click"
position="bottomLeft"
showArrow
>
<Button type="tertiary" icon={<IconColorPalette />}></Button>
</Popover>
</Col>
<Col span={7}>
<Button
block
onClick={() => {
setTables((prev) =>
prev.map((t, i) => {
if (t.id === props.tableData.id) {
return {
...t,
indices: [
...t.indices,
{ name: `index_${t.indices.length}`, fields: [] },
],
};
}
return t;
})
);
}}
>
Add index
</Button>
</Col>
<Col span={6}>
<Button
onClick={() => {
setTables((prev) =>
prev.map((t, i) => {
if (t.id === props.tableData.id) {
return {
...t,
fields: [
...t.fields,
{
name: "",
type: "",
default: "",
primary: false,
unique: false,
notNull: false,
increment: false,
comment: "",
},
],
};
}
return t;
})
);
}}
block
>
Add field
</Button>
</Col>
<Col span={3}>
<Button
icon={<IconDeleteStroked />}
type="danger"
onClick={() => {
Toast.success(`Table deleted!`);
setTables((prev) =>
prev
.filter((e) => e.id !== props.tableData.id)
.map((e, idx) => ({ ...e, id: idx }))
);
props.setSelectedTable("");
setVisible(false);
}}
></Button>
</Col>
</Row>
</div>
</SideSheet> </SideSheet>
</g> </g>
); );

12
src/components/table_overview.jsx
View File

@ -31,7 +31,6 @@ import { TableContext } from "../pages/editor";
export default function TableOverview(props) { export default function TableOverview(props) {
const [indexActiveKey, setIndexActiveKey] = useState(""); const [indexActiveKey, setIndexActiveKey] = useState("");
const [tableActiveKey, setTableActiveKey] = useState("");
const [value, setValue] = useState(""); const [value, setValue] = useState("");
const { tables, setTables } = useContext(TableContext); const { tables, setTables } = useContext(TableContext);
const [filteredResult, setFilteredResult] = useState( const [filteredResult, setFilteredResult] = useState(
@ -95,7 +94,7 @@ export default function TableOverview(props) {
onChange={(v) => setValue(v)} onChange={(v) => setValue(v)}
onSelect={(v) => { onSelect={(v) => {
const { id } = tables.find((t) => t.name === v); const { id } = tables.find((t) => t.name === v);
setTableActiveKey(`${id}`); props.setSelectedTable(`${id}`);
document document
.getElementById(`scroll_table_${id}`) .getElementById(`scroll_table_${id}`)
.scrollIntoView({ behavior: "smooth" }); .scrollIntoView({ behavior: "smooth" });
@ -140,8 +139,8 @@ export default function TableOverview(props) {
</Col> </Col>
</Row> </Row>
<Collapse <Collapse
activeKey={tableActiveKey} activeKey={props.selectedTable}
onChange={(k) => setTableActiveKey(k)} onChange={(k) => props.setSelectedTable(k)}
accordion accordion
> >
{tables.length <= 0 ? ( {tables.length <= 0 ? (
@ -332,8 +331,9 @@ export default function TableOverview(props) {
<Collapse <Collapse
activeKey={indexActiveKey} activeKey={indexActiveKey}
onChange={(itemKey) => setIndexActiveKey(itemKey)} onChange={(itemKey) => setIndexActiveKey(itemKey)}
accordion
> >
<Collapse.Panel header="Indices" itemKey="1" accordion> <Collapse.Panel header="Indices" itemKey="1">
{t.indices.map((idx, k) => ( {t.indices.map((idx, k) => (
<div <div
className="flex justify-between items-center mb-2" className="flex justify-between items-center mb-2"
@ -555,7 +555,7 @@ export default function TableOverview(props) {
.filter((e) => e.id !== i) .filter((e) => e.id !== i)
.map((e, idx) => ({ ...e, id: idx })) .map((e, idx) => ({ ...e, id: idx }))
); );
setTableActiveKey(""); props.setSelectedTable("");
}} }}
></Button> ></Button>
</Col> </Col>

39
src/index.css
View File

@ -0,0 +1,39 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
.cm-focused {
outline: none !important;
}
.bg-blue {
background-color: #124559;
}
.semi-form-vertical .semi-form-field {
margin: 0;
padding-top: 8px !important;
padding-bottom: 8px !important;
overflow: hidden;
}
.semi-card .semi-collapse-item{
border: none !important;
}
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: #c5c5c5;
border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
background: #b9b9b9;
}

6
src/pages/editor.jsx
View File

@ -17,6 +17,7 @@ export default function Editor(props) {
const [areas, setAreas] = useState([]); const [areas, setAreas] = useState([]);
const [resize, setResize] = useState(false); const [resize, setResize] = useState(false);
const [width, setWidth] = useState(340); const [width, setWidth] = useState(340);
const [selectedTable, setSelectedTable] = useState("");
const [layout, setLayout] = useState({ const [layout, setLayout] = useState({
header: true, header: true,
sidebar: true, sidebar: true,
@ -37,7 +38,6 @@ export default function Editor(props) {
useEffect(()=>{ useEffect(()=>{
document.title = "Editor"; document.title = "Editor";
console.log("hey");
}, []) }, [])
return ( return (
@ -65,11 +65,15 @@ export default function Editor(props) {
resize={resize} resize={resize}
setResize={setResize} setResize={setResize}
width={width} width={width}
selectedTable={selectedTable}
setSelectedTable={setSelectedTable}
/> />
)} )}
<Canvas <Canvas
code={code} code={code}
setCode={setCode} setCode={setCode}
selectedTable={selectedTable}
setSelectedTable={setSelectedTable}
/> />
</DndProvider> </DndProvider>
{layout.services && <Sidebar />} {layout.services && <Sidebar />}