add search table functionality
This commit is contained in:
1ilit
parent
a49e90991b
commit
519b9d0a27
@ -105,44 +105,6 @@ export default function EditorPanel(props) {
|
||||
add area
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
onClick={() => {
|
||||
const newTable = {
|
||||
id: props.tables.length,
|
||||
name: `table_${props.tables.length}`,
|
||||
x: 0,
|
||||
y: 0,
|
||||
fields: [
|
||||
{
|
||||
name: "id",
|
||||
type: "UUID",
|
||||
default: "",
|
||||
check: "",
|
||||
primary: true,
|
||||
unique: true,
|
||||
notNull: true,
|
||||
increment: true,
|
||||
comment: "",
|
||||
},
|
||||
],
|
||||
comment: "",
|
||||
indices: [],
|
||||
color: defaultTableTheme,
|
||||
};
|
||||
props.setTables((prev) => {
|
||||
const updatedTables = [...prev, newTable];
|
||||
return updatedTables;
|
||||
});
|
||||
props.setCode((prev) =>
|
||||
prev === ""
|
||||
? `CREATE TABLE \`${newTable.name}\`;`
|
||||
: `${prev}\n\nCREATE TABLE \`${newTable.name}\`;`
|
||||
);
|
||||
}}
|
||||
>
|
||||
add
|
||||
</button>
|
||||
<br />
|
||||
<button
|
||||
onClick={() => {
|
||||
const blob = new Blob([props.code], {
|
||||
|
||||
@ -11,6 +11,7 @@ import {
|
||||
Popover,
|
||||
Checkbox,
|
||||
Select,
|
||||
AutoComplete,
|
||||
} from "@douyinfe/semi-ui";
|
||||
import {
|
||||
IconMore,
|
||||
@ -18,10 +19,13 @@ import {
|
||||
IconColorPalette,
|
||||
IconDeleteStroked,
|
||||
IconCheckboxTick,
|
||||
IconPlus,
|
||||
IconSearch,
|
||||
} from "@douyinfe/semi-icons";
|
||||
|
||||
export default function TableOverview(props) {
|
||||
const [indexActiveKey, setIndexActiveKey] = useState("");
|
||||
const [indexActiveKeyTable, setIndexActiveKeyTable] = useState("");
|
||||
|
||||
const updateColor = (id, c) => {
|
||||
const updatedTables = [...props.tables];
|
||||
@ -29,266 +33,274 @@ export default function TableOverview(props) {
|
||||
props.setTables(updatedTables);
|
||||
};
|
||||
|
||||
const [value, setValue] = useState("");
|
||||
const [filteredResult, setFilteredResult] = useState(
|
||||
props.tables.map((t) => {
|
||||
return t.name;
|
||||
})
|
||||
);
|
||||
|
||||
const handleStringSearch = (value) => {
|
||||
setFilteredResult(
|
||||
props.tables
|
||||
.map((t) => {
|
||||
return t.name;
|
||||
})
|
||||
.filter((i) => i.includes(value))
|
||||
);
|
||||
};
|
||||
|
||||
const handleChange = (value) => {
|
||||
setValue(value);
|
||||
};
|
||||
|
||||
return (
|
||||
<Collapse>
|
||||
{props.tables.map((t, i) => (
|
||||
<Collapse.Panel
|
||||
key={i}
|
||||
header={
|
||||
<div>
|
||||
<Input defaultValue={t.name} borderless />
|
||||
</div>
|
||||
}
|
||||
itemKey={`${i}`}
|
||||
>
|
||||
{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);
|
||||
<>
|
||||
<div className="p-2">
|
||||
<Row gutter={6}>
|
||||
<Col span={16}>
|
||||
<AutoComplete
|
||||
data={filteredResult}
|
||||
value={value}
|
||||
showClear
|
||||
prefix={<IconSearch />}
|
||||
placeholder="Search..."
|
||||
emptyContent={<div className="p-3">No tables found</div>}
|
||||
onSearch={(v) => handleStringSearch(v)}
|
||||
onChange={(v) => handleChange(v)}
|
||||
onSelect={(v) => {
|
||||
const { id, name } = props.tables.find((t) => t.name === v);
|
||||
setIndexActiveKeyTable(`${id}`);
|
||||
document
|
||||
.getElementById(`${name}_scroll_id`)
|
||||
.scrollIntoView({ behavior: "smooth" });
|
||||
}}
|
||||
className="w-full"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Button
|
||||
icon={<IconPlus />}
|
||||
block
|
||||
onClick={() => {
|
||||
const newTable = {
|
||||
id: props.tables.length,
|
||||
name: `table_${props.tables.length}`,
|
||||
x: 0,
|
||||
y: 0,
|
||||
fields: [
|
||||
{
|
||||
name: "id",
|
||||
type: "UUID",
|
||||
default: "",
|
||||
check: "",
|
||||
primary: true,
|
||||
unique: true,
|
||||
notNull: true,
|
||||
increment: true,
|
||||
comment: "",
|
||||
},
|
||||
],
|
||||
comment: "",
|
||||
indices: [],
|
||||
color: defaultTableTheme,
|
||||
};
|
||||
props.setTables((prev) => {
|
||||
const updatedTables = [...prev, newTable];
|
||||
return updatedTables;
|
||||
});
|
||||
}}
|
||||
>
|
||||
<Row
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
gutter={6}
|
||||
className="hover:bg-slate-100"
|
||||
>
|
||||
<Col span={7}>
|
||||
<Form.Input
|
||||
field="name"
|
||||
noLabel={true}
|
||||
initValue={f.name}
|
||||
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
|
||||
initValue={f.type}
|
||||
></Form.Select>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
type={f.notNull ? "primary" : "tertiary"}
|
||||
title="Nullable"
|
||||
theme={f.notNull ? "solid" : "light"}
|
||||
onClick={() => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i].fields = updatedTables[i].fields.map(
|
||||
(field, index) =>
|
||||
index === j
|
||||
? { ...field, notNull: !f.notNull }
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
>
|
||||
?
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
type={f.primary ? "primary" : "tertiary"}
|
||||
title="Nullable"
|
||||
theme={f.primary ? "solid" : "light"}
|
||||
onClick={() => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i].fields = updatedTables[i].fields.map(
|
||||
(field, index) =>
|
||||
index === j
|
||||
? { ...field, primary: !f.primary }
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
icon={<IconKeyStroked />}
|
||||
></Button>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Popover
|
||||
content={
|
||||
<div className="px-1">
|
||||
<Form
|
||||
onChange={(value) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i] = {
|
||||
...updatedTables[i],
|
||||
fields: updatedTables[i].fields.map(
|
||||
(field, index) =>
|
||||
index === j
|
||||
? { ...field, ...value.values }
|
||||
: field
|
||||
),
|
||||
};
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
>
|
||||
<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) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i].fields = updatedTables[
|
||||
i
|
||||
].fields.map((field, index) =>
|
||||
index === j
|
||||
? {
|
||||
...field,
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
}
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
></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) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i].fields = updatedTables[
|
||||
i
|
||||
].fields.map((field, index) =>
|
||||
index === j
|
||||
? {
|
||||
...field,
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
}
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
></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={() => {
|
||||
const updatedTables = [...props.tables];
|
||||
const updatedFields = [...t.fields];
|
||||
updatedFields.splice(j, 1);
|
||||
updatedTables[i] = {
|
||||
...t,
|
||||
fields: [...updatedFields],
|
||||
};
|
||||
props.setTables(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}
|
||||
Add table
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<Collapse
|
||||
activeKey={indexActiveKeyTable}
|
||||
onChange={(i) => setIndexActiveKeyTable(i)}
|
||||
>
|
||||
{props.tables.map((t, i) => (
|
||||
<div id={`${t.name}_scroll_id`} key={i}>
|
||||
<Collapse.Panel
|
||||
header={
|
||||
<div>
|
||||
<Input defaultValue={t.name} borderless />
|
||||
</div>
|
||||
}
|
||||
itemKey={`${t.id}`}
|
||||
>
|
||||
<Collapse
|
||||
activeKey={indexActiveKey}
|
||||
onChange={(itemKey) => setIndexActiveKey(itemKey)}
|
||||
>
|
||||
<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,
|
||||
}))}
|
||||
{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);
|
||||
}}
|
||||
>
|
||||
<Row
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
gutter={6}
|
||||
className="hover:bg-slate-100"
|
||||
>
|
||||
<Col span={7}>
|
||||
<Form.Input
|
||||
field="name"
|
||||
noLabel={true}
|
||||
initValue={f.name}
|
||||
className="m-0"
|
||||
placeholder="Name"
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Select
|
||||
className="w-full"
|
||||
defaultValue={idx.fields}
|
||||
onChange={(value) => {
|
||||
field="type"
|
||||
noLabel={true}
|
||||
optionList={sqlDataTypes.map((value, index) => {
|
||||
return {
|
||||
label: value,
|
||||
value: value,
|
||||
};
|
||||
})}
|
||||
filter
|
||||
initValue={f.type}
|
||||
></Form.Select>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
type={f.notNull ? "primary" : "tertiary"}
|
||||
title="Nullable"
|
||||
theme={f.notNull ? "solid" : "light"}
|
||||
onClick={() => {
|
||||
const updatedTables = [...props.tables];
|
||||
const updatedIndices = [...t.indices];
|
||||
updatedIndices[k] = {
|
||||
name: `${value.join("_")}_index`,
|
||||
fields: [...value],
|
||||
};
|
||||
updatedTables[i] = {
|
||||
...t,
|
||||
indices: [...updatedIndices],
|
||||
};
|
||||
updatedTables[i].fields = updatedTables[i].fields.map(
|
||||
(field, index) =>
|
||||
index === j
|
||||
? { ...field, notNull: !f.notNull }
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
/>
|
||||
>
|
||||
?
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
type={f.primary ? "primary" : "tertiary"}
|
||||
title="Nullable"
|
||||
theme={f.primary ? "solid" : "light"}
|
||||
onClick={() => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i].fields = updatedTables[i].fields.map(
|
||||
(field, index) =>
|
||||
index === j
|
||||
? { ...field, primary: !f.primary }
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
icon={<IconKeyStroked />}
|
||||
></Button>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Popover
|
||||
content={
|
||||
<div className="px-1">
|
||||
<Form>
|
||||
<Form
|
||||
onChange={(value) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i] = {
|
||||
...updatedTables[i],
|
||||
fields: updatedTables[i].fields.map(
|
||||
(field, index) =>
|
||||
index === j
|
||||
? { ...field, ...value.values }
|
||||
: field
|
||||
),
|
||||
};
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
>
|
||||
<Form.Input
|
||||
field="name"
|
||||
label="Name"
|
||||
initValue={idx.name}
|
||||
field="default"
|
||||
label="Default"
|
||||
initValue={f.default}
|
||||
trigger="blur"
|
||||
placeholder="Index name"
|
||||
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) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i].fields = updatedTables[
|
||||
i
|
||||
].fields.map((field, index) =>
|
||||
index === j
|
||||
? {
|
||||
...field,
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
}
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
></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) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i].fields = updatedTables[
|
||||
i
|
||||
].fields.map((field, index) =>
|
||||
index === j
|
||||
? {
|
||||
...field,
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
}
|
||||
: field
|
||||
);
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
></Checkbox>
|
||||
</div>
|
||||
<Form.TextArea
|
||||
field="comment"
|
||||
label="Comment"
|
||||
placeholder="Add comment"
|
||||
initValue={f.comment}
|
||||
autosize
|
||||
rows={2}
|
||||
/>
|
||||
</Form>
|
||||
<Button
|
||||
@ -297,11 +309,11 @@ export default function TableOverview(props) {
|
||||
block
|
||||
onClick={() => {
|
||||
const updatedTables = [...props.tables];
|
||||
const updatedIndices = [...t.indices];
|
||||
updatedIndices.splice(k, 1);
|
||||
const updatedFields = [...t.fields];
|
||||
updatedFields.splice(j, 1);
|
||||
updatedTables[i] = {
|
||||
...t,
|
||||
indices: [...updatedIndices],
|
||||
fields: [...updatedFields],
|
||||
};
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
@ -314,165 +326,254 @@ export default function TableOverview(props) {
|
||||
position="rightTop"
|
||||
showArrow
|
||||
>
|
||||
<Button
|
||||
icon={<IconMore />}
|
||||
type="tertiary"
|
||||
style={{ marginLeft: "12px" }}
|
||||
></Button>
|
||||
<Button type="tertiary" icon={<IconMore />}></Button>
|
||||
</Popover>
|
||||
</div>
|
||||
))}
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Card>
|
||||
)}
|
||||
<Card
|
||||
bodyStyle={{ padding: "4px" }}
|
||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||
headerLine={false}
|
||||
>
|
||||
<Collapse>
|
||||
<Collapse.Panel header="Comment" itemKey="1">
|
||||
<Form
|
||||
onChange={(value) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i] = {
|
||||
...t,
|
||||
...value.values,
|
||||
};
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
))}
|
||||
{t.indices.length > 0 && (
|
||||
<Card
|
||||
bodyStyle={{ padding: "4px" }}
|
||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||
headerLine={false}
|
||||
>
|
||||
<Form.TextArea
|
||||
field="comment"
|
||||
noLabel={true}
|
||||
showClear
|
||||
onClear={() => {
|
||||
<Collapse
|
||||
activeKey={indexActiveKey}
|
||||
onChange={(itemKey) => setIndexActiveKey(itemKey)}
|
||||
>
|
||||
<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"
|
||||
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>
|
||||
</Card>
|
||||
)}
|
||||
<Card
|
||||
bodyStyle={{ padding: "4px" }}
|
||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||
headerLine={false}
|
||||
>
|
||||
<Collapse>
|
||||
<Collapse.Panel header="Comment" itemKey="1">
|
||||
<Form
|
||||
onChange={(value) => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i] = {
|
||||
...t,
|
||||
...value.values,
|
||||
};
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
>
|
||||
<Form.TextArea
|
||||
field="comment"
|
||||
noLabel={true}
|
||||
showClear
|
||||
onClear={() => {
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i] = {
|
||||
...t,
|
||||
comment: "",
|
||||
};
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
initValue={t.comment}
|
||||
autosize
|
||||
placeholder="Add comment"
|
||||
rows={1}
|
||||
/>
|
||||
</Form>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</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={() => updateColor(i, 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={() => updateColor(i, c)}
|
||||
>
|
||||
{t.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={() => updateColor(i, c)}
|
||||
>
|
||||
{t.color === c ? (
|
||||
<IconCheckboxTick
|
||||
style={{ color: "white" }}
|
||||
/>
|
||||
) : (
|
||||
<IconCheckboxTick style={{ color: c }} />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
trigger="click"
|
||||
position="bottomLeft"
|
||||
showArrow
|
||||
>
|
||||
<Button
|
||||
type="tertiary"
|
||||
icon={<IconColorPalette />}
|
||||
></Button>
|
||||
</Popover>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Button
|
||||
block
|
||||
onClick={() => {
|
||||
setIndexActiveKey("1");
|
||||
const updatedTables = [...props.tables];
|
||||
updatedTables[i] = {
|
||||
...t,
|
||||
comment: "",
|
||||
indices: [
|
||||
...t.indices,
|
||||
{ name: `index_${t.indices.length}`, fields: [] },
|
||||
],
|
||||
};
|
||||
props.setTables(updatedTables);
|
||||
}}
|
||||
initValue={t.comment}
|
||||
autosize
|
||||
placeholder="Add comment"
|
||||
rows={1}
|
||||
/>
|
||||
</Form>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</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={() => updateColor(i, 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={() => updateColor(i, c)}
|
||||
>
|
||||
{t.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={() => updateColor(i, c)}
|
||||
>
|
||||
{t.color === c ? (
|
||||
<IconCheckboxTick style={{ color: "white" }} />
|
||||
) : (
|
||||
<IconCheckboxTick style={{ color: c }} />
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
trigger="click"
|
||||
position="bottomLeft"
|
||||
showArrow
|
||||
>
|
||||
<Button type="tertiary" icon={<IconColorPalette />}></Button>
|
||||
</Popover>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<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 span={8}>
|
||||
<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>
|
||||
</Row>
|
||||
</Collapse.Panel>
|
||||
))}
|
||||
</Collapse>
|
||||
>
|
||||
Add index
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<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>
|
||||
</Row>
|
||||
</Collapse.Panel>
|
||||
</div>
|
||||
))}
|
||||
</Collapse>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -6,10 +6,6 @@
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.bg-blue {
|
||||
background-color: #124559;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user