Add empty illustration
This commit is contained in:
1ilit
parent
7f015692c5
commit
e37ae6ce84
@ -19,7 +19,7 @@ import {
|
|||||||
Image,
|
Image,
|
||||||
Modal,
|
Modal,
|
||||||
} from "@douyinfe/semi-ui";
|
} from "@douyinfe/semi-ui";
|
||||||
import { toPng, toJpeg } from "html-to-image";
|
import { toPng, toJpeg, toSvg } from "html-to-image";
|
||||||
import { saveAs } from "file-saver";
|
import { saveAs } from "file-saver";
|
||||||
|
|
||||||
export default function ControlPanel() {
|
export default function ControlPanel() {
|
||||||
@ -65,7 +65,7 @@ export default function ControlPanel() {
|
|||||||
"Export as": {
|
"Export as": {
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
".png": () => {
|
PNG: () => {
|
||||||
toPng(document.getElementById("canvas")).then(function (dataUrl) {
|
toPng(document.getElementById("canvas")).then(function (dataUrl) {
|
||||||
setDataUrl(dataUrl);
|
setDataUrl(dataUrl);
|
||||||
});
|
});
|
||||||
@ -74,7 +74,7 @@ export default function ControlPanel() {
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
".jpeg": () => {
|
JPEG: () => {
|
||||||
toJpeg(document.getElementById("canvas"), { quality: 0.95 }).then(
|
toJpeg(document.getElementById("canvas"), { quality: 0.95 }).then(
|
||||||
function (dataUrl) {
|
function (dataUrl) {
|
||||||
setDataUrl(dataUrl);
|
setDataUrl(dataUrl);
|
||||||
@ -84,9 +84,20 @@ export default function ControlPanel() {
|
|||||||
setExtension("jpeg");
|
setExtension("jpeg");
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{ ".xml": () => {} },
|
{ XML: () => {} },
|
||||||
{ ".svg": () => {} },
|
{
|
||||||
{ ".pdf": () => {} },
|
SVG: () => {
|
||||||
|
const filter = (node) => node.tagName !== "i";
|
||||||
|
toSvg(document.getElementById("canvas"), { filter: filter }).then(
|
||||||
|
function (dataUrl) {
|
||||||
|
setDataUrl(dataUrl);
|
||||||
|
}
|
||||||
|
);
|
||||||
|
setVisible(true);
|
||||||
|
setExtension("svg");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ PDF: () => {} },
|
||||||
],
|
],
|
||||||
function: () => {},
|
function: () => {},
|
||||||
},
|
},
|
||||||
@ -374,7 +385,16 @@ export default function ControlPanel() {
|
|||||||
style={{ width: "180px" }}
|
style={{ width: "180px" }}
|
||||||
render={
|
render={
|
||||||
<Dropdown.Menu>
|
<Dropdown.Menu>
|
||||||
<Dropdown.Item icon={<IconCheckboxTick />}>
|
<Dropdown.Item
|
||||||
|
icon={
|
||||||
|
showToolBar ? (
|
||||||
|
<IconCheckboxTick />
|
||||||
|
) : (
|
||||||
|
<div className="px-2"></div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onClick={() => setShowToolBar((prev) => !prev)}
|
||||||
|
>
|
||||||
Header
|
Header
|
||||||
</Dropdown.Item>
|
</Dropdown.Item>
|
||||||
<Dropdown.Item icon={<IconCheckboxTick />}>
|
<Dropdown.Item icon={<IconCheckboxTick />}>
|
||||||
|
|||||||
@ -5,14 +5,12 @@ import { createTheme } from "@uiw/codemirror-themes";
|
|||||||
import { sql } from "@codemirror/lang-sql";
|
import { sql } from "@codemirror/lang-sql";
|
||||||
import { tags as t } from "@lezer/highlight";
|
import { tags as t } from "@lezer/highlight";
|
||||||
import Shape from "./shape";
|
import Shape from "./shape";
|
||||||
import { toPng } from "html-to-image";
|
|
||||||
import { Parser } from "node-sql-parser";
|
import { Parser } from "node-sql-parser";
|
||||||
import { Tabs } from "@douyinfe/semi-ui";
|
import { Tabs } from "@douyinfe/semi-ui";
|
||||||
import "react-resizable/css/styles.css";
|
import "react-resizable/css/styles.css";
|
||||||
import TableOverview from "./table_overview";
|
import TableOverview from "./table_overview";
|
||||||
import ReferenceOverview from "./reference_overview";
|
import ReferenceOverview from "./reference_overview";
|
||||||
import { defaultTableTheme } from "../data/data";
|
import { defaultTableTheme } from "../data/data";
|
||||||
import { ImagePreview } from "@douyinfe/semi-ui";
|
|
||||||
|
|
||||||
const myTheme = createTheme({
|
const myTheme = createTheme({
|
||||||
dark: "light",
|
dark: "light",
|
||||||
@ -32,13 +30,6 @@ const EditorPanel = (props) => {
|
|||||||
const [tab, setTab] = useState("1");
|
const [tab, setTab] = useState("1");
|
||||||
const map = useRef(new Map());
|
const map = useRef(new Map());
|
||||||
|
|
||||||
const [visible1, setVisible1] = useState(false);
|
|
||||||
const [dataUrl, setDataUrl] = useState("");
|
|
||||||
|
|
||||||
const visibleChange1 = (v) => {
|
|
||||||
setVisible1(v);
|
|
||||||
};
|
|
||||||
|
|
||||||
const tabList = [
|
const tabList = [
|
||||||
{ tab: "Tables", itemKey: "1" },
|
{ tab: "Tables", itemKey: "1" },
|
||||||
{ tab: "References", itemKey: "2" },
|
{ tab: "References", itemKey: "2" },
|
||||||
@ -169,24 +160,6 @@ const EditorPanel = (props) => {
|
|||||||
>
|
>
|
||||||
parse
|
parse
|
||||||
</button>
|
</button>
|
||||||
<br />
|
|
||||||
<button
|
|
||||||
onClick={() => {
|
|
||||||
toPng(document.getElementById("canvas")).then(function (dataUrl) {
|
|
||||||
// window.saveAs(dataUrl, "canvas.png");
|
|
||||||
setDataUrl(dataUrl);
|
|
||||||
});
|
|
||||||
setVisible1(true);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
export img
|
|
||||||
</button>
|
|
||||||
<ImagePreview
|
|
||||||
src={dataUrl}
|
|
||||||
visible={visible1}
|
|
||||||
onVisibleChange={visibleChange1}
|
|
||||||
>
|
|
||||||
</ImagePreview>
|
|
||||||
</div>
|
</div>
|
||||||
</ResizableBox>
|
</ResizableBox>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -12,6 +12,7 @@ import {
|
|||||||
Select,
|
Select,
|
||||||
AutoComplete,
|
AutoComplete,
|
||||||
Toast,
|
Toast,
|
||||||
|
Empty,
|
||||||
} from "@douyinfe/semi-ui";
|
} from "@douyinfe/semi-ui";
|
||||||
import {
|
import {
|
||||||
IconMore,
|
IconMore,
|
||||||
@ -22,6 +23,10 @@ import {
|
|||||||
IconPlus,
|
IconPlus,
|
||||||
IconSearch,
|
IconSearch,
|
||||||
} from "@douyinfe/semi-icons";
|
} from "@douyinfe/semi-icons";
|
||||||
|
import {
|
||||||
|
IllustrationNoContent,
|
||||||
|
IllustrationNoContentDark,
|
||||||
|
} from "@douyinfe/semi-illustrations";
|
||||||
|
|
||||||
export default function TableOverview(props) {
|
export default function TableOverview(props) {
|
||||||
const [indexActiveKey, setIndexActiveKey] = useState("");
|
const [indexActiveKey, setIndexActiveKey] = useState("");
|
||||||
@ -141,406 +146,422 @@ export default function TableOverview(props) {
|
|||||||
onChange={(k) => setTableActiveKey(k)}
|
onChange={(k) => setTableActiveKey(k)}
|
||||||
accordion
|
accordion
|
||||||
>
|
>
|
||||||
{props.tables.map((t, i) => (
|
{props.tables.length <= 0 ? (
|
||||||
<div id={`${t.name}_scroll_id`} key={t.id}>
|
<Empty
|
||||||
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
|
image={
|
||||||
{t.fields.map((f, j) => (
|
<IllustrationNoContent style={{ width: 160, height: 160 }} />
|
||||||
<Form
|
}
|
||||||
key={j}
|
darkModeImage={
|
||||||
onChange={(value) => updatedField(i, j, value.values)}
|
<IllustrationNoContentDark style={{ width: 160, height: 160 }} />
|
||||||
>
|
}
|
||||||
<Row
|
title="No tables"
|
||||||
type="flex"
|
description="Start building your diagram!"
|
||||||
justify="start"
|
/>
|
||||||
align="middle"
|
) : (
|
||||||
gutter={6}
|
props.tables.map((t, i) => (
|
||||||
className="hover:bg-slate-100"
|
<div id={`${t.name}_scroll_id`} key={t.id}>
|
||||||
|
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
|
||||||
|
{t.fields.map((f, j) => (
|
||||||
|
<Form
|
||||||
|
key={j}
|
||||||
|
onChange={(value) => updatedField(i, j, value.values)}
|
||||||
>
|
>
|
||||||
<Col span={7}>
|
<Row
|
||||||
<Form.Input
|
type="flex"
|
||||||
field="name"
|
justify="start"
|
||||||
noLabel={true}
|
align="middle"
|
||||||
initValue={f.name}
|
gutter={6}
|
||||||
className="m-0"
|
className="hover:bg-slate-100"
|
||||||
placeholder="Name"
|
>
|
||||||
/>
|
<Col span={7}>
|
||||||
</Col>
|
<Form.Input
|
||||||
<Col span={8}>
|
field="name"
|
||||||
<Form.Select
|
noLabel={true}
|
||||||
className="w-full"
|
initValue={f.name}
|
||||||
field="type"
|
className="m-0"
|
||||||
noLabel={true}
|
placeholder="Name"
|
||||||
optionList={sqlDataTypes.map((value, index) => {
|
/>
|
||||||
return {
|
</Col>
|
||||||
label: value,
|
<Col span={8}>
|
||||||
value: value,
|
<Form.Select
|
||||||
};
|
className="w-full"
|
||||||
})}
|
field="type"
|
||||||
filter
|
noLabel={true}
|
||||||
initValue={f.type}
|
optionList={sqlDataTypes.map((value, index) => {
|
||||||
placeholder="Type"
|
return {
|
||||||
></Form.Select>
|
label: value,
|
||||||
</Col>
|
value: value,
|
||||||
<Col span={3}>
|
};
|
||||||
<Button
|
})}
|
||||||
type={f.notNull ? "primary" : "tertiary"}
|
filter
|
||||||
title="Nullable"
|
initValue={f.type}
|
||||||
theme={f.notNull ? "solid" : "light"}
|
placeholder="Type"
|
||||||
onClick={() =>
|
></Form.Select>
|
||||||
updatedField(i, j, { notNull: !f.notNull })
|
</Col>
|
||||||
}
|
<Col span={3}>
|
||||||
>
|
<Button
|
||||||
?
|
type={f.notNull ? "primary" : "tertiary"}
|
||||||
</Button>
|
title="Nullable"
|
||||||
</Col>
|
theme={f.notNull ? "solid" : "light"}
|
||||||
<Col span={3}>
|
onClick={() =>
|
||||||
<Button
|
updatedField(i, j, { notNull: !f.notNull })
|
||||||
type={f.primary ? "primary" : "tertiary"}
|
}
|
||||||
title="Primary"
|
>
|
||||||
theme={f.primary ? "solid" : "light"}
|
?
|
||||||
onClick={() =>
|
</Button>
|
||||||
updatedField(i, j, { primary: !f.primary })
|
</Col>
|
||||||
}
|
<Col span={3}>
|
||||||
icon={<IconKeyStroked />}
|
<Button
|
||||||
></Button>
|
type={f.primary ? "primary" : "tertiary"}
|
||||||
</Col>
|
title="Primary"
|
||||||
<Col span={3}>
|
theme={f.primary ? "solid" : "light"}
|
||||||
<Popover
|
onClick={() =>
|
||||||
content={
|
updatedField(i, j, { primary: !f.primary })
|
||||||
<div className="px-1">
|
}
|
||||||
<Form
|
icon={<IconKeyStroked />}
|
||||||
onChange={(value) =>
|
></Button>
|
||||||
updatedField(i, j, value.values)
|
</Col>
|
||||||
}
|
<Col span={3}>
|
||||||
>
|
<Popover
|
||||||
<Form.Input
|
content={
|
||||||
field="default"
|
<div className="px-1">
|
||||||
label="Default"
|
<Form
|
||||||
initValue={f.default}
|
onChange={(value) =>
|
||||||
trigger="blur"
|
updatedField(i, j, value.values)
|
||||||
placeholder="Set default"
|
}
|
||||||
/>
|
>
|
||||||
<Form.Input
|
<Form.Input
|
||||||
field="check"
|
field="default"
|
||||||
label="Check Expression"
|
label="Default"
|
||||||
trigger="blur"
|
initValue={f.default}
|
||||||
placeholder="Set constraint"
|
trigger="blur"
|
||||||
initValue={f.check}
|
placeholder="Set default"
|
||||||
/>
|
/>
|
||||||
<div className="flex justify-between items-center my-3">
|
<Form.Input
|
||||||
<label htmlFor="unique" className="font-medium">
|
field="check"
|
||||||
Unique
|
label="Check Expression"
|
||||||
</label>
|
trigger="blur"
|
||||||
<Checkbox
|
placeholder="Set constraint"
|
||||||
value="unique"
|
initValue={f.check}
|
||||||
defaultChecked={f.unique}
|
/>
|
||||||
onChange={(checkedValues) =>
|
<div className="flex justify-between items-center my-3">
|
||||||
updatedField(i, j, {
|
<label
|
||||||
[checkedValues.target.value]:
|
htmlFor="unique"
|
||||||
checkedValues.target.checked,
|
className="font-medium"
|
||||||
})
|
>
|
||||||
}
|
Unique
|
||||||
></Checkbox>
|
</label>
|
||||||
</div>
|
<Checkbox
|
||||||
<div className="flex justify-between items-center my-3">
|
value="unique"
|
||||||
<label
|
defaultChecked={f.unique}
|
||||||
htmlFor="increment"
|
onChange={(checkedValues) =>
|
||||||
className="font-medium"
|
updatedField(i, j, {
|
||||||
>
|
[checkedValues.target.value]:
|
||||||
Autoincrement
|
checkedValues.target.checked,
|
||||||
</label>
|
})
|
||||||
<Checkbox
|
}
|
||||||
value="increment"
|
></Checkbox>
|
||||||
defaultChecked={f.increment}
|
</div>
|
||||||
onChange={(checkedValues) =>
|
<div className="flex justify-between items-center my-3">
|
||||||
updatedField(i, j, {
|
<label
|
||||||
[checkedValues.target.value]:
|
htmlFor="increment"
|
||||||
checkedValues.target.checked,
|
className="font-medium"
|
||||||
})
|
>
|
||||||
}
|
Autoincrement
|
||||||
></Checkbox>
|
</label>
|
||||||
</div>
|
<Checkbox
|
||||||
<Form.TextArea
|
value="increment"
|
||||||
field="comment"
|
defaultChecked={f.increment}
|
||||||
label="Comment"
|
onChange={(checkedValues) =>
|
||||||
placeholder="Add comment"
|
updatedField(i, j, {
|
||||||
initValue={f.comment}
|
[checkedValues.target.value]:
|
||||||
autosize
|
checkedValues.target.checked,
|
||||||
rows={2}
|
})
|
||||||
/>
|
}
|
||||||
</Form>
|
></Checkbox>
|
||||||
<Button
|
</div>
|
||||||
icon={<IconDeleteStroked />}
|
<Form.TextArea
|
||||||
type="danger"
|
field="comment"
|
||||||
block
|
label="Comment"
|
||||||
onClick={(ev) => {
|
placeholder="Add comment"
|
||||||
props.setTables((prev) => {
|
initValue={f.comment}
|
||||||
const updatedTables = [...prev];
|
autosize
|
||||||
const updatedFields = [
|
rows={2}
|
||||||
...updatedTables[t.id].fields,
|
/>
|
||||||
];
|
</Form>
|
||||||
updatedFields.splice(j, 1);
|
<Button
|
||||||
updatedTables[t.id].fields = [
|
icon={<IconDeleteStroked />}
|
||||||
...updatedFields,
|
type="danger"
|
||||||
];
|
block
|
||||||
return updatedTables;
|
onClick={(ev) => {
|
||||||
});
|
props.setTables((prev) => {
|
||||||
|
const updatedTables = [...prev];
|
||||||
|
const updatedFields = [
|
||||||
|
...updatedTables[t.id].fields,
|
||||||
|
];
|
||||||
|
updatedFields.splice(j, 1);
|
||||||
|
updatedTables[t.id].fields = [
|
||||||
|
...updatedFields,
|
||||||
|
];
|
||||||
|
return updatedTables;
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="rightTop"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<Button type="tertiary" icon={<IconMore />}></Button>
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Form>
|
||||||
|
))}
|
||||||
|
{t.indices.length > 0 && (
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ padding: "4px" }}
|
||||||
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||||
|
headerLine={false}
|
||||||
|
>
|
||||||
|
<Collapse
|
||||||
|
activeKey={indexActiveKey}
|
||||||
|
onChange={(itemKey) => setIndexActiveKey(itemKey)}
|
||||||
|
>
|
||||||
|
<Collapse.Panel header="Indices" itemKey="1" accordion>
|
||||||
|
{t.indices.map((idx, k) => (
|
||||||
|
<div
|
||||||
|
className="flex justify-between items-center mb-2"
|
||||||
|
key={k}
|
||||||
|
>
|
||||||
|
<Select
|
||||||
|
placeholder="Select fields"
|
||||||
|
multiple
|
||||||
|
optionList={t.fields.map((e) => ({
|
||||||
|
value: e.name,
|
||||||
|
label: e.name,
|
||||||
|
}))}
|
||||||
|
className="w-full"
|
||||||
|
defaultValue={idx.fields}
|
||||||
|
onChange={(value) => {
|
||||||
|
const updatedTables = [...props.tables];
|
||||||
|
const updatedIndices = [...t.indices];
|
||||||
|
updatedIndices[k] = {
|
||||||
|
name: `${value.join("_")}_index`,
|
||||||
|
fields: [...value],
|
||||||
|
};
|
||||||
|
updatedTables[i] = {
|
||||||
|
...t,
|
||||||
|
indices: [...updatedIndices],
|
||||||
|
};
|
||||||
|
props.setTables(updatedTables);
|
||||||
}}
|
}}
|
||||||
|
/>
|
||||||
|
<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={() => {
|
||||||
|
const updatedTables = [...props.tables];
|
||||||
|
const updatedIndices = [...t.indices];
|
||||||
|
updatedIndices.splice(k, 1);
|
||||||
|
updatedTables[i] = {
|
||||||
|
...t,
|
||||||
|
indices: [...updatedIndices],
|
||||||
|
};
|
||||||
|
props.setTables(updatedTables);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="rightTop"
|
||||||
|
showArrow
|
||||||
>
|
>
|
||||||
Delete
|
<Button
|
||||||
</Button>
|
icon={<IconMore />}
|
||||||
|
type="tertiary"
|
||||||
|
style={{ marginLeft: "12px" }}
|
||||||
|
></Button>
|
||||||
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
}
|
))}
|
||||||
trigger="click"
|
</Collapse.Panel>
|
||||||
position="rightTop"
|
</Collapse>
|
||||||
showArrow
|
</Card>
|
||||||
>
|
)}
|
||||||
<Button type="tertiary" icon={<IconMore />}></Button>
|
|
||||||
</Popover>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Form>
|
|
||||||
))}
|
|
||||||
{t.indices.length > 0 && (
|
|
||||||
<Card
|
<Card
|
||||||
bodyStyle={{ padding: "4px" }}
|
bodyStyle={{ padding: "4px" }}
|
||||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||||
headerLine={false}
|
headerLine={false}
|
||||||
>
|
>
|
||||||
<Collapse
|
<Collapse>
|
||||||
activeKey={indexActiveKey}
|
<Collapse.Panel header="Comment" itemKey="1">
|
||||||
onChange={(itemKey) => setIndexActiveKey(itemKey)}
|
<Form onChange={(value) => updateTable(i, value.values)}>
|
||||||
>
|
<Form.TextArea
|
||||||
<Collapse.Panel header="Indices" itemKey="1" accordion>
|
field="comment"
|
||||||
{t.indices.map((idx, k) => (
|
noLabel={true}
|
||||||
<div
|
showClear
|
||||||
className="flex justify-between items-center mb-2"
|
onClear={() => updateTable(i, { comment: "" })}
|
||||||
key={k}
|
initValue={t.comment}
|
||||||
>
|
autosize
|
||||||
<Select
|
placeholder="Add comment"
|
||||||
placeholder="Select fields"
|
rows={1}
|
||||||
multiple
|
/>
|
||||||
optionList={t.fields.map((e) => ({
|
</Form>
|
||||||
value: e.name,
|
|
||||||
label: e.name,
|
|
||||||
}))}
|
|
||||||
className="w-full"
|
|
||||||
defaultValue={idx.fields}
|
|
||||||
onChange={(value) => {
|
|
||||||
const updatedTables = [...props.tables];
|
|
||||||
const updatedIndices = [...t.indices];
|
|
||||||
updatedIndices[k] = {
|
|
||||||
name: `${value.join("_")}_index`,
|
|
||||||
fields: [...value],
|
|
||||||
};
|
|
||||||
updatedTables[i] = {
|
|
||||||
...t,
|
|
||||||
indices: [...updatedIndices],
|
|
||||||
};
|
|
||||||
props.setTables(updatedTables);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<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={() => {
|
|
||||||
const updatedTables = [...props.tables];
|
|
||||||
const updatedIndices = [...t.indices];
|
|
||||||
updatedIndices.splice(k, 1);
|
|
||||||
updatedTables[i] = {
|
|
||||||
...t,
|
|
||||||
indices: [...updatedIndices],
|
|
||||||
};
|
|
||||||
props.setTables(updatedTables);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
trigger="click"
|
|
||||||
position="rightTop"
|
|
||||||
showArrow
|
|
||||||
>
|
|
||||||
<Button
|
|
||||||
icon={<IconMore />}
|
|
||||||
type="tertiary"
|
|
||||||
style={{ marginLeft: "12px" }}
|
|
||||||
></Button>
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</Card>
|
</Card>
|
||||||
)}
|
<Row gutter={6} className="mt-2">
|
||||||
<Card
|
<Col span={8}>
|
||||||
bodyStyle={{ padding: "4px" }}
|
<Popover
|
||||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
content={
|
||||||
headerLine={false}
|
<div>
|
||||||
>
|
<div className="flex justify-between items-center p-2">
|
||||||
<Collapse>
|
<div className="font-medium">Theme</div>
|
||||||
<Collapse.Panel header="Comment" itemKey="1">
|
<Button
|
||||||
<Form onChange={(value) => updateTable(i, value.values)}>
|
type="tertiary"
|
||||||
<Form.TextArea
|
size="small"
|
||||||
field="comment"
|
onClick={() =>
|
||||||
noLabel={true}
|
updateTable(i, { color: defaultTableTheme })
|
||||||
showClear
|
}
|
||||||
onClear={() => updateTable(i, { comment: "" })}
|
>
|
||||||
initValue={t.comment}
|
Clear
|
||||||
autosize
|
</Button>
|
||||||
placeholder="Add comment"
|
</div>
|
||||||
rows={1}
|
<hr />
|
||||||
/>
|
<div className="py-3">
|
||||||
</Form>
|
<div>
|
||||||
</Collapse.Panel>
|
{tableThemes
|
||||||
</Collapse>
|
.slice(0, Math.ceil(tableThemes.length / 2))
|
||||||
</Card>
|
.map((c) => (
|
||||||
<Row gutter={6} className="mt-2">
|
<button
|
||||||
<Col span={8}>
|
key={c}
|
||||||
<Popover
|
style={{ backgroundColor: c }}
|
||||||
content={
|
className="p-3 rounded-full mx-1"
|
||||||
<div>
|
onClick={() => updateTable(i, { color: c })}
|
||||||
<div className="flex justify-between items-center p-2">
|
>
|
||||||
<div className="font-medium">Theme</div>
|
{t.color === c ? (
|
||||||
<Button
|
<IconCheckboxTick
|
||||||
type="tertiary"
|
style={{ color: "white" }}
|
||||||
size="small"
|
/>
|
||||||
onClick={() =>
|
) : (
|
||||||
updateTable(i, { color: defaultTableTheme })
|
<IconCheckboxTick style={{ color: c }} />
|
||||||
}
|
)}
|
||||||
>
|
</button>
|
||||||
Clear
|
))}
|
||||||
</Button>
|
</div>
|
||||||
</div>
|
<div className="mt-3">
|
||||||
<hr />
|
{tableThemes
|
||||||
<div className="py-3">
|
.slice(Math.ceil(tableThemes.length / 2))
|
||||||
<div>
|
.map((c) => (
|
||||||
{tableThemes
|
<button
|
||||||
.slice(0, Math.ceil(tableThemes.length / 2))
|
key={c}
|
||||||
.map((c) => (
|
style={{ backgroundColor: c }}
|
||||||
<button
|
className="p-3 rounded-full mx-1"
|
||||||
key={c}
|
onClick={() => updateTable(i, { color: c })}
|
||||||
style={{ backgroundColor: c }}
|
>
|
||||||
className="p-3 rounded-full mx-1"
|
|
||||||
onClick={() => updateTable(i, { color: c })}
|
|
||||||
>
|
|
||||||
{t.color === c ? (
|
|
||||||
<IconCheckboxTick
|
<IconCheckboxTick
|
||||||
style={{ color: "white" }}
|
style={{
|
||||||
|
color: t.color === c ? "white" : c,
|
||||||
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
</button>
|
||||||
<IconCheckboxTick style={{ color: c }} />
|
))}
|
||||||
)}
|
</div>
|
||||||
</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(i, { color: c })}
|
|
||||||
>
|
|
||||||
<IconCheckboxTick
|
|
||||||
style={{
|
|
||||||
color: t.color === c ? "white" : c,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
}
|
||||||
}
|
trigger="click"
|
||||||
trigger="click"
|
position="bottomLeft"
|
||||||
position="bottomLeft"
|
showArrow
|
||||||
showArrow
|
>
|
||||||
>
|
<Button
|
||||||
|
type="tertiary"
|
||||||
|
icon={<IconColorPalette />}
|
||||||
|
></Button>
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
<Col span={7}>
|
||||||
<Button
|
<Button
|
||||||
type="tertiary"
|
block
|
||||||
icon={<IconColorPalette />}
|
onClick={() => {
|
||||||
|
setIndexActiveKey("1");
|
||||||
|
const updatedTables = [...props.tables];
|
||||||
|
updatedTables[i] = {
|
||||||
|
...t,
|
||||||
|
indices: [
|
||||||
|
...t.indices,
|
||||||
|
{ name: `index_${t.indices.length}`, fields: [] },
|
||||||
|
],
|
||||||
|
};
|
||||||
|
props.setTables(updatedTables);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Add index
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col span={6}>
|
||||||
|
<Button
|
||||||
|
onClick={() => {
|
||||||
|
const updatedTables = [...props.tables];
|
||||||
|
updatedTables[i].fields = [
|
||||||
|
...updatedTables[i].fields,
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "",
|
||||||
|
default: "",
|
||||||
|
primary: false,
|
||||||
|
unique: false,
|
||||||
|
notNull: false,
|
||||||
|
increment: false,
|
||||||
|
comment: "",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
props.setTables(updatedTables);
|
||||||
|
}}
|
||||||
|
block
|
||||||
|
>
|
||||||
|
Add field
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
onClick={() => {
|
||||||
|
Toast.success(`Table deleted!`);
|
||||||
|
props.setTables((prev) =>
|
||||||
|
prev
|
||||||
|
.filter((e) => e.id !== i)
|
||||||
|
.map((e, idx) => ({ ...e, id: idx }))
|
||||||
|
);
|
||||||
|
setTableActiveKey("");
|
||||||
|
}}
|
||||||
></Button>
|
></Button>
|
||||||
</Popover>
|
</Col>
|
||||||
</Col>
|
</Row>
|
||||||
<Col span={7}>
|
</Collapse.Panel>
|
||||||
<Button
|
</div>
|
||||||
block
|
))
|
||||||
onClick={() => {
|
)}
|
||||||
setIndexActiveKey("1");
|
|
||||||
const updatedTables = [...props.tables];
|
|
||||||
updatedTables[i] = {
|
|
||||||
...t,
|
|
||||||
indices: [
|
|
||||||
...t.indices,
|
|
||||||
{ name: `index_${t.indices.length}`, fields: [] },
|
|
||||||
],
|
|
||||||
};
|
|
||||||
props.setTables(updatedTables);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Add index
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
<Col span={6}>
|
|
||||||
<Button
|
|
||||||
onClick={() => {
|
|
||||||
const updatedTables = [...props.tables];
|
|
||||||
updatedTables[i].fields = [
|
|
||||||
...updatedTables[i].fields,
|
|
||||||
{
|
|
||||||
name: "",
|
|
||||||
type: "",
|
|
||||||
default: "",
|
|
||||||
primary: false,
|
|
||||||
unique: false,
|
|
||||||
notNull: false,
|
|
||||||
increment: false,
|
|
||||||
comment: "",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
props.setTables(updatedTables);
|
|
||||||
}}
|
|
||||||
block
|
|
||||||
>
|
|
||||||
Add field
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
<Col span={3}>
|
|
||||||
<Button
|
|
||||||
icon={<IconDeleteStroked />}
|
|
||||||
type="danger"
|
|
||||||
onClick={() => {
|
|
||||||
Toast.success(`Table deleted!`);
|
|
||||||
props.setTables((prev) =>
|
|
||||||
prev
|
|
||||||
.filter((e) => e.id !== i)
|
|
||||||
.map((e, idx) => ({ ...e, id: idx }))
|
|
||||||
);
|
|
||||||
setTableActiveKey("");
|
|
||||||
}}
|
|
||||||
></Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Collapse.Panel>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user