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

table indices

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:55 +03:00
parent de529fa402
commit c020a40e20
1 changed files with 106 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

119
src/components/diagram_overview.jsx
View File

@ -1,4 +1,4 @@
import { React } from "react"; import { React, useState } from "react";
import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data"; import { defaultTableTheme, sqlDataTypes, tableThemes } from "../data/data";
import { import {
Collapse, Collapse,
@ -11,6 +11,7 @@ import {
TextArea, TextArea,
Popover, Popover,
Checkbox, Checkbox,
Select,
} from "@douyinfe/semi-ui"; } from "@douyinfe/semi-ui";
import { import {
IconMore, IconMore,
@ -21,6 +22,8 @@ import {
} from "@douyinfe/semi-icons"; } from "@douyinfe/semi-icons";
export default function DiagramOverview(props) { export default function DiagramOverview(props) {
const [indexActiveKey, setIndexActiveKey] = useState("");
const updateColor = (id, c) => { const updateColor = (id, c) => {
const updatedTables = [...props.tables]; const updatedTables = [...props.tables];
updatedTables[id] = { ...updatedTables[id], color: c }; updatedTables[id] = { ...updatedTables[id], color: c };
@ -134,17 +137,91 @@ export default function DiagramOverview(props) {
</div> </div>
</Form> </Form>
))} ))}
<Card {t.indices.length > 0 && (
bodyStyle={{ padding: "4px" }} <Card
style={{ marginTop: "12px", marginBottom: "12px" }} bodyStyle={{ padding: "4px" }}
headerLine={false} style={{ marginTop: "12px", marginBottom: "12px" }}
> headerLine={false}
<Collapse> >
<Collapse.Panel header="Indices" itemKey="1"> <Collapse
<p>indices</p> activeKey={indexActiveKey}
</Collapse.Panel> onChange={(itemKey) => setIndexActiveKey(itemKey)}
</Collapse> >
</Card> <Collapse.Panel header="Indices" itemKey="1">
{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"
/>
</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>
</Card>
)}
<Card <Card
bodyStyle={{ padding: "4px" }} bodyStyle={{ padding: "4px" }}
style={{ marginTop: "12px", marginBottom: "12px" }} style={{ marginTop: "12px", marginBottom: "12px" }}
@ -220,7 +297,23 @@ export default function DiagramOverview(props) {
</Popover> </Popover>
</Col> </Col>
<Col span={8}> <Col span={8}>
<Button block>Add index</Button> <Button
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>
<Col span={8}> <Col span={8}>
<Button block>Add field</Button> <Button block>Add field</Button>