1367 lines
54 KiB
JavaScript
1367 lines
54 KiB
JavaScript
import { useState, useContext } from "react";
|
|
import {
|
|
sqlDataTypes,
|
|
tableThemes,
|
|
defaultTableTheme,
|
|
Tab,
|
|
Action,
|
|
ObjectType,
|
|
} from "../data/data";
|
|
import {
|
|
IconEdit,
|
|
IconMore,
|
|
IconMinus,
|
|
IconDeleteStroked,
|
|
IconKeyStroked,
|
|
IconCheckboxTick,
|
|
} from "@douyinfe/semi-icons";
|
|
import {
|
|
Select,
|
|
Input,
|
|
TextArea,
|
|
Card,
|
|
Checkbox,
|
|
InputNumber,
|
|
TagInput,
|
|
Row,
|
|
Col,
|
|
Popover,
|
|
Tag,
|
|
Button,
|
|
SideSheet,
|
|
Toast,
|
|
} from "@douyinfe/semi-ui";
|
|
import {
|
|
LayoutContext,
|
|
SelectContext,
|
|
SettingsContext,
|
|
TabContext,
|
|
TableContext,
|
|
TypeContext,
|
|
UndoRedoContext,
|
|
} from "../pages/Editor";
|
|
import { getSize, hasCheck, hasPrecision, isSized } from "../utils";
|
|
|
|
export default function Table(props) {
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
const [hoveredField, setHoveredField] = useState(-1);
|
|
const [editField, setEditField] = useState({});
|
|
const { layout } = useContext(LayoutContext);
|
|
const { deleteTable, updateTable, updateField, setRelationships } =
|
|
useContext(TableContext);
|
|
const { tab, setTab } = useContext(TabContext);
|
|
const { settings } = useContext(SettingsContext);
|
|
const { types } = useContext(TypeContext);
|
|
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
|
const { selectedElement, setSelectedElement } = useContext(SelectContext);
|
|
|
|
const height = props.tableData.fields.length * 36 + 50 + 7;
|
|
|
|
return (
|
|
<>
|
|
<foreignObject
|
|
key={props.tableData.id}
|
|
x={props.tableData.x}
|
|
y={props.tableData.y}
|
|
width={200}
|
|
height={height}
|
|
className="drop-shadow-lg rounded-md cursor-move"
|
|
onMouseDown={props.onMouseDown}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}
|
|
>
|
|
<div
|
|
className={`border-2 ${
|
|
isHovered
|
|
? "border-dashed border-blue-500"
|
|
: selectedElement.element === ObjectType.TABLE &&
|
|
selectedElement.id === props.tableData.id
|
|
? "border-blue-500"
|
|
: "border-slate-400"
|
|
} select-none rounded-lg w-full ${
|
|
settings.mode === "light"
|
|
? "bg-zinc-100 text-zinc-800"
|
|
: "bg-zinc-800 text-zinc-200"
|
|
}`}
|
|
>
|
|
<div
|
|
className={`h-[10px] w-full rounded-t-md`}
|
|
style={{ backgroundColor: props.tableData.color }}
|
|
/>
|
|
<div
|
|
className={`font-bold h-[40px] flex justify-between items-center border-b border-gray-400 ${
|
|
settings.mode === "light" ? "bg-zinc-200" : "bg-zinc-900"
|
|
}`}
|
|
>
|
|
<div className="px-3">
|
|
{isHovered
|
|
? props.tableData.name.length <= 10
|
|
? props.tableData.name
|
|
: `${props.tableData.name.substring(0, 10)}...`
|
|
: props.tableData.name.length <= 18
|
|
? props.tableData.name
|
|
: `${props.tableData.name.substring(0, 19)}...`}
|
|
</div>
|
|
{isHovered && (
|
|
<div className="flex justify-end items-center mx-2">
|
|
<Button
|
|
icon={<IconEdit />}
|
|
size="small"
|
|
theme="solid"
|
|
style={{
|
|
backgroundColor: "#2f68ad",
|
|
opacity: "0.7",
|
|
marginRight: "6px",
|
|
}}
|
|
onClick={() => {
|
|
if (!layout.sidebar) {
|
|
setSelectedElement({
|
|
element: ObjectType.TABLE,
|
|
id: props.tableData.id,
|
|
openDialogue: true,
|
|
openCollapse: false,
|
|
});
|
|
} else {
|
|
setTab(Tab.tables);
|
|
setSelectedElement({
|
|
element: ObjectType.TABLE,
|
|
id: props.tableData.id,
|
|
openDialogue: false,
|
|
openCollapse: true,
|
|
});
|
|
if (tab !== Tab.tables) return;
|
|
document
|
|
.getElementById(`scroll_table_${props.tableData.id}`)
|
|
.scrollIntoView({ behavior: "smooth" });
|
|
}
|
|
}}
|
|
></Button>
|
|
<Popover
|
|
content={
|
|
<div className="popover-theme">
|
|
<div className="mb-2">
|
|
<strong>Comment :</strong>{" "}
|
|
{props.tableData.comment === "" ? (
|
|
"No comment"
|
|
) : (
|
|
<div>{props.tableData.comment}</div>
|
|
)}
|
|
</div>
|
|
<div>
|
|
<strong
|
|
className={`${
|
|
props.tableData.indices.length === 0 ? "" : "block"
|
|
}`}
|
|
>
|
|
Indices :
|
|
</strong>{" "}
|
|
{props.tableData.indices.length === 0 ? (
|
|
"No indices"
|
|
) : (
|
|
<div>
|
|
{props.tableData.indices.map((index, k) => (
|
|
<div
|
|
key={k}
|
|
className={`flex items-center my-1 px-2 py-1 rounded ${
|
|
settings.mode === "light"
|
|
? "bg-gray-100"
|
|
: "bg-zinc-800"
|
|
}`}
|
|
>
|
|
<i className="fa-solid fa-thumbtack me-2 mt-1 text-slate-500"></i>
|
|
<div>
|
|
{index.fields.map((f) => (
|
|
<Tag color="blue" key={f} className="me-1">
|
|
{f}
|
|
</Tag>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<Button
|
|
icon={<IconDeleteStroked />}
|
|
type="danger"
|
|
block
|
|
style={{ marginTop: "8px" }}
|
|
onClick={() => {
|
|
Toast.success(`Table deleted!`);
|
|
deleteTable(props.tableData.id);
|
|
}}
|
|
>
|
|
Delete table
|
|
</Button>
|
|
</div>
|
|
}
|
|
position="rightTop"
|
|
showArrow
|
|
trigger="click"
|
|
style={{ width: "200px" }}
|
|
>
|
|
<Button
|
|
icon={<IconMore />}
|
|
type="tertiary"
|
|
size="small"
|
|
style={{
|
|
opacity: "0.7",
|
|
backgroundColor: "grey",
|
|
color: "white",
|
|
}}
|
|
></Button>
|
|
</Popover>
|
|
</div>
|
|
)}
|
|
</div>
|
|
{props.tableData.fields.map((e, i) => {
|
|
return settings.showFieldSummary ? (
|
|
<Popover
|
|
key={i}
|
|
content={
|
|
<div className="popover-theme">
|
|
<div className="flex justify-between items-center pb-2">
|
|
<p className="me-4 font-bold">{e.name}</p>
|
|
<p className="ms-4">{e.type}</p>
|
|
</div>
|
|
<hr />
|
|
{e.primary && (
|
|
<Tag color="blue" className="me-2 my-2">
|
|
Primary
|
|
</Tag>
|
|
)}
|
|
{e.unique && (
|
|
<Tag color="amber" className="me-2 my-2">
|
|
Unique
|
|
</Tag>
|
|
)}
|
|
{e.notNull && (
|
|
<Tag color="purple" className="me-2 my-2">
|
|
Not null
|
|
</Tag>
|
|
)}
|
|
{e.increment && (
|
|
<Tag color="green" className="me-2 my-2">
|
|
Increment
|
|
</Tag>
|
|
)}
|
|
<p>
|
|
<strong>Default :</strong>{" "}
|
|
{e.default === "" ? "Not set" : e.default}
|
|
</p>
|
|
</div>
|
|
}
|
|
position="right"
|
|
showArrow
|
|
>
|
|
{field(e, i)}
|
|
</Popover>
|
|
) : (
|
|
field(e, i)
|
|
);
|
|
})}
|
|
</div>
|
|
</foreignObject>
|
|
<SideSheet
|
|
title="Edit table"
|
|
size="small"
|
|
visible={
|
|
selectedElement.element === ObjectType.TABLE &&
|
|
selectedElement.id === props.tableData.id &&
|
|
selectedElement.openDialogue
|
|
}
|
|
onCancel={() =>
|
|
setSelectedElement((prev) => ({
|
|
...prev,
|
|
openDialogue: !prev.openDialogue,
|
|
}))
|
|
}
|
|
style={{ paddingBottom: "16px" }}
|
|
>
|
|
<div className="flex items-center sidesheet-theme">
|
|
<div className="text-md font-semibold">Name: </div>
|
|
<Input
|
|
value={props.tableData.name}
|
|
validateStatus={props.tableData.name === "" ? "error" : "default"}
|
|
placeholder="Name"
|
|
className="mx-2 mb-1"
|
|
onChange={(value) =>
|
|
updateTable(props.tableData.id, { name: value })
|
|
}
|
|
onFocus={(e) => setEditField({ name: e.target.value })}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.name) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "self",
|
|
tid: props.tableData.id,
|
|
undo: editField,
|
|
redo: { name: e.target.value },
|
|
message: `Edit table name to ${e.target.value}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
</div>
|
|
<div>
|
|
{props.tableData.fields.map((f, j) => (
|
|
<Row gutter={6} key={j} className="hover-2 mt-2">
|
|
<Col span={7}>
|
|
<Input
|
|
value={f.name}
|
|
placeholder="Name"
|
|
onChange={(value) =>
|
|
updateField(props.tableData.id, j, { name: value })
|
|
}
|
|
onFocus={(e) => setEditField({ name: e.target.value })}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.name) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: editField,
|
|
redo: { name: e.target.value },
|
|
message: `Edit table field name to "${e.target.value}"`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
</Col>
|
|
<Col span={8}>
|
|
<Select
|
|
className="w-full"
|
|
optionList={[
|
|
...sqlDataTypes.map((value) => ({
|
|
label: value,
|
|
value: value,
|
|
})),
|
|
...types.map((type) => ({
|
|
label: type.name.toUpperCase(),
|
|
value: type.name.toUpperCase(),
|
|
})),
|
|
]}
|
|
filter
|
|
value={f.type}
|
|
validateStatus={f.type === "" ? "error" : "default"}
|
|
placeholder="Type"
|
|
onChange={(value) => {
|
|
if (value === f.type) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: { type: f.type },
|
|
redo: { type: value },
|
|
message: `Edit table field type to "${value}"`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
const incr =
|
|
f.increment &&
|
|
(value === "INT" ||
|
|
value === "BIGINT" ||
|
|
value === "SMALLINT");
|
|
if (value === "ENUM" || value === "SET") {
|
|
updateField(props.tableData.id, j, {
|
|
type: value,
|
|
default: "",
|
|
values: f.values ? [...f.values] : [],
|
|
increment: incr,
|
|
});
|
|
} else if (isSized(value) || hasPrecision(value)) {
|
|
updateField(props.tableData.id, j, {
|
|
type: value,
|
|
size: getSize(value),
|
|
increment: incr,
|
|
});
|
|
} else if (
|
|
value === "BLOB" ||
|
|
value === "JSON" ||
|
|
value === "UUID" ||
|
|
value === "TEXT" ||
|
|
incr
|
|
) {
|
|
updateField(props.tableData.id, j, {
|
|
type: value,
|
|
increment: incr,
|
|
default: "",
|
|
size: "",
|
|
values: [],
|
|
});
|
|
} else if (hasCheck(value)) {
|
|
updateField(props.tableData.id, j, {
|
|
type: value,
|
|
check: "",
|
|
increment: incr,
|
|
});
|
|
} else {
|
|
updateField(props.tableData.id, j, {
|
|
type: value,
|
|
increment: incr,
|
|
size: "",
|
|
values: [],
|
|
});
|
|
}
|
|
}}
|
|
></Select>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Button
|
|
type={f.notNull ? "primary" : "tertiary"}
|
|
title="Nullable"
|
|
theme={f.notNull ? "solid" : "light"}
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: { notNull: f.notNull },
|
|
redo: { notNull: !f.notNull },
|
|
message: `Edit table field to${
|
|
f.notNull ? "" : " not"
|
|
} null`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateField(props.tableData.id, j, { notNull: !f.notNull });
|
|
}}
|
|
>
|
|
?
|
|
</Button>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Button
|
|
type={f.primary ? "primary" : "tertiary"}
|
|
title="Primary"
|
|
theme={f.primary ? "solid" : "light"}
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: { primary: f.primary },
|
|
redo: { primary: !f.primary },
|
|
message: `Edit table field to${
|
|
f.primary ? " not" : ""
|
|
} primary`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateField(props.tableData.id, j, { primary: !f.primary });
|
|
}}
|
|
icon={<IconKeyStroked />}
|
|
></Button>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Popover
|
|
content={
|
|
<div className="px-1 w-[240px] popover-theme">
|
|
<div className="font-semibold">Default value</div>
|
|
<Input
|
|
className="my-2"
|
|
placeholder="Set default"
|
|
value={f.default}
|
|
disabled={
|
|
f.type === "BLOB" ||
|
|
f.type === "JSON" ||
|
|
f.type === "TEXT" ||
|
|
f.type === "UUID" ||
|
|
f.increment
|
|
}
|
|
onChange={(value) =>
|
|
updateField(props.tableData.id, j, { default: value })
|
|
}
|
|
onFocus={(e) =>
|
|
setEditField({ default: e.target.value })
|
|
}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.default) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: editField,
|
|
redo: { default: e.target.value },
|
|
message: `Edit table field default to ${e.target.value}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
{(f.type === "ENUM" || f.type === "SET") && (
|
|
<>
|
|
<div className="font-semibold mb-1">
|
|
{f.type} values
|
|
</div>
|
|
<TagInput
|
|
separator={[",", ", ", " ,"]}
|
|
value={f.values}
|
|
validateStatus={
|
|
!f.values || f.values.length === 0
|
|
? "error"
|
|
: "default"
|
|
}
|
|
className="my-2"
|
|
placeholder="Use ',' for batch input"
|
|
onChange={(v) =>
|
|
updateField(props.tableData.id, j, {
|
|
values: v,
|
|
})
|
|
}
|
|
onFocus={() => setEditField({ values: f.values })}
|
|
onBlur={() => {
|
|
if (
|
|
JSON.stringify(editField.values) ===
|
|
JSON.stringify(f.values)
|
|
)
|
|
return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: editField,
|
|
redo: { values: f.values },
|
|
message: `Edit table field values to "${JSON.stringify(
|
|
f.values
|
|
)}"`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
{isSized(f.type) && (
|
|
<>
|
|
<div className="font-semibold">Size</div>
|
|
<InputNumber
|
|
className="my-2 w-full"
|
|
placeholder="Set length"
|
|
value={f.size}
|
|
onChange={(value) =>
|
|
updateField(props.tableData.id, j, {
|
|
size: value,
|
|
})
|
|
}
|
|
onFocus={(e) =>
|
|
setEditField({ size: e.target.value })
|
|
}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.size) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: editField,
|
|
redo: { size: e.target.value },
|
|
message: `Edit table field size to ${e.target.value}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
{hasPrecision(f.type) && (
|
|
<>
|
|
<div className="font-semibold">Precision</div>
|
|
<Input
|
|
className="my-2 w-full"
|
|
placeholder="Set precision: (size, d)"
|
|
validateStatus={
|
|
/^\(\d+,\s*\d+\)$|^$/.test(f.size)
|
|
? "default"
|
|
: "error"
|
|
}
|
|
value={f.size}
|
|
onChange={(value) =>
|
|
updateField(props.tableData.id, j, {
|
|
size: value,
|
|
})
|
|
}
|
|
onFocus={(e) =>
|
|
setEditField({ size: e.target.value })
|
|
}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.size) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: editField,
|
|
redo: { size: e.target.value },
|
|
message: `Edit table field precision to ${e.target.value}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
</>
|
|
)}
|
|
{hasCheck(f.type) && (
|
|
<>
|
|
<div className="font-semibold">Check Expression</div>
|
|
<Input
|
|
className="my-2"
|
|
placeholder="Set constraint"
|
|
value={f.check}
|
|
disabled={f.increment}
|
|
onChange={(value) =>
|
|
updateField(props.tableData.id, j, {
|
|
check: value,
|
|
})
|
|
}
|
|
onFocus={(e) =>
|
|
setEditField({ check: e.target.value })
|
|
}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.check) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: editField,
|
|
redo: { check: e.target.value },
|
|
message: `Edit table field check expression to ${e.target.value}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
<div className="text-xs mt-1">
|
|
*This will be in the script as is.
|
|
</div>
|
|
</>
|
|
)}
|
|
<div className="flex justify-between items-center my-3">
|
|
<div className="font-medium">Unique</div>
|
|
<Checkbox
|
|
value="unique"
|
|
checked={f.unique}
|
|
onChange={(checkedValues) => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: {
|
|
[checkedValues.target.value]:
|
|
!checkedValues.target.checked,
|
|
},
|
|
redo: {
|
|
[checkedValues.target.value]:
|
|
checkedValues.target.checked,
|
|
},
|
|
message: `Edit table field to${
|
|
f.unique ? " not" : ""
|
|
} unique`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateField(props.tableData.id, j, {
|
|
[checkedValues.target.value]:
|
|
checkedValues.target.checked,
|
|
});
|
|
}}
|
|
></Checkbox>
|
|
</div>
|
|
<div className="flex justify-between items-center my-3">
|
|
<div className="font-medium">Autoincrement</div>
|
|
<Checkbox
|
|
value="increment"
|
|
checked={f.increment}
|
|
disabled={
|
|
!(
|
|
f.type === "INT" ||
|
|
f.type === "BIGINT" ||
|
|
f.type === "SMALLINT"
|
|
)
|
|
}
|
|
onChange={(checkedValues) => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: {
|
|
[checkedValues.target.value]:
|
|
!checkedValues.target.checked,
|
|
},
|
|
redo: {
|
|
[checkedValues.target.value]:
|
|
checkedValues.target.checked,
|
|
},
|
|
message: `Edit table field to${
|
|
f.primary ? " not" : ""
|
|
} auto increment`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateField(props.tableData.id, j, {
|
|
increment: !f.increment,
|
|
check: f.increment ? f.check : "",
|
|
});
|
|
}}
|
|
></Checkbox>
|
|
</div>
|
|
<div className="font-semibold">Comment</div>
|
|
<TextArea
|
|
className="my-2"
|
|
label="Comment"
|
|
placeholder="Add comment"
|
|
value={f.comment}
|
|
autosize
|
|
rows={2}
|
|
onChange={(value) =>
|
|
updateField(props.tableData.id, j, { comment: value })
|
|
}
|
|
onFocus={(e) =>
|
|
setEditField({ comment: e.target.value })
|
|
}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.comment) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field",
|
|
tid: props.tableData.id,
|
|
fid: j,
|
|
undo: editField,
|
|
redo: { comment: e.target.value },
|
|
message: `Edit table field comment to ${e.target.value}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
<Button
|
|
icon={<IconDeleteStroked />}
|
|
type="danger"
|
|
block
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field_delete",
|
|
tid: props.tableData.id,
|
|
data: f,
|
|
message: `Delete field`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
setRelationships((prev) => {
|
|
return prev.map((e) => {
|
|
if (
|
|
e.startTableId === props.tableData.id &&
|
|
e.startFieldId > f.id
|
|
) {
|
|
return {
|
|
...e,
|
|
startFieldId: e.startFieldId - 1,
|
|
startX: props.tableData.x + 15,
|
|
startY:
|
|
props.tableData.y +
|
|
(e.startFieldId - 1) * 36 +
|
|
50 +
|
|
19,
|
|
};
|
|
}
|
|
if (
|
|
e.endTableId === props.tableData.id &&
|
|
e.endFieldId > f.id
|
|
) {
|
|
return {
|
|
...e,
|
|
endFieldId: e.endFieldId - 1,
|
|
endX: props.tableData.x + 15,
|
|
endY:
|
|
props.tableData.y +
|
|
(e.endFieldId - 1) * 36 +
|
|
50 +
|
|
19,
|
|
};
|
|
}
|
|
return e;
|
|
});
|
|
});
|
|
updateTable(props.tableData.id, {
|
|
fields: props.tableData.fields
|
|
.filter((field) => field.id !== j)
|
|
.map((e, k) => ({ ...e, id: k })),
|
|
});
|
|
}}
|
|
>
|
|
Delete field
|
|
</Button>
|
|
</div>
|
|
}
|
|
trigger="click"
|
|
position="right"
|
|
showArrow
|
|
>
|
|
<Button type="tertiary" icon={<IconMore />}></Button>
|
|
</Popover>
|
|
</Col>
|
|
</Row>
|
|
))}
|
|
{props.tableData.indices.length > 0 && (
|
|
<Card
|
|
bodyStyle={{ padding: "14px" }}
|
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
|
headerLine={false}
|
|
>
|
|
<div className="font-medium mb-2 ms-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
|
|
validateStatus={
|
|
idx.fields.length === 0 ? "error" : "default"
|
|
}
|
|
optionList={props.tableData.fields.map((e) => ({
|
|
value: e.name,
|
|
label: e.name,
|
|
}))}
|
|
className="w-full"
|
|
value={idx.fields}
|
|
onChange={(value) => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "index",
|
|
tid: props.tableData.id,
|
|
iid: k,
|
|
undo: {
|
|
fields: [...idx.fields],
|
|
name: `${idx.fields.join("_")}_index`,
|
|
},
|
|
redo: {
|
|
fields: [...value],
|
|
name: `${value.join("_")}_index`,
|
|
},
|
|
message: `Edit index fields to "${JSON.stringify(
|
|
value
|
|
)}"`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateTable(props.tableData.id, {
|
|
indices: props.tableData.indices.map((index) =>
|
|
index.id === k
|
|
? {
|
|
...index,
|
|
fields: [...value],
|
|
name: `${value.join("_")}_index`,
|
|
}
|
|
: index
|
|
),
|
|
});
|
|
}}
|
|
/>
|
|
<Popover
|
|
content={
|
|
<div className="px-1 popover-theme">
|
|
<div className="font-semibold mb-1">Index name: </div>
|
|
<Input
|
|
value={idx.name}
|
|
placeholder="Index name"
|
|
disabled
|
|
/>
|
|
<div className="flex justify-between items-center my-3">
|
|
<div className="font-medium">Unique</div>
|
|
<Checkbox
|
|
value="unique"
|
|
checked={idx.unique}
|
|
onChange={(checkedValues) => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "index",
|
|
tid: props.tableData.id,
|
|
iid: k,
|
|
undo: {
|
|
[checkedValues.target.value]:
|
|
!checkedValues.target.checked,
|
|
},
|
|
redo: {
|
|
[checkedValues.target.value]:
|
|
checkedValues.target.checked,
|
|
},
|
|
message: `Edit table field to${
|
|
idx.unique ? " not" : ""
|
|
} unique`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateTable(props.tableData.id, {
|
|
indices: props.tableData.indices.map((index) =>
|
|
index.id === k
|
|
? {
|
|
...index,
|
|
[checkedValues.target.value]:
|
|
checkedValues.target.checked,
|
|
}
|
|
: index
|
|
),
|
|
});
|
|
}}
|
|
></Checkbox>
|
|
</div>
|
|
<Button
|
|
icon={<IconDeleteStroked />}
|
|
type="danger"
|
|
block
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "index_delete",
|
|
tid: props.tableData.id,
|
|
data: idx,
|
|
message: `Delete index`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateTable(props.tableData.id, {
|
|
indices: props.tableData.indices
|
|
.filter((e) => e.id !== k)
|
|
.map((e, j) => ({
|
|
...e,
|
|
id: j,
|
|
})),
|
|
});
|
|
}}
|
|
>
|
|
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 mb-1">Comment</div>
|
|
<TextArea
|
|
value={props.tableData.comment}
|
|
autosize
|
|
placeholder="Add comment"
|
|
rows={1}
|
|
onChange={(value) =>
|
|
updateTable(props.tableData.id, { comment: value }, false)
|
|
}
|
|
onFocus={(e) => setEditField({ comment: e.target.value })}
|
|
onBlur={(e) => {
|
|
if (e.target.value === editField.comment) return;
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "self",
|
|
tid: props.tableData.id,
|
|
undo: editField,
|
|
redo: { comment: e.target.value },
|
|
message: `Edit table comment to "${e.target.value}"`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
}}
|
|
/>
|
|
</Card>
|
|
<Row gutter={6} className="mt-2">
|
|
<Col span={8}>
|
|
<Popover
|
|
content={
|
|
<div>
|
|
<div className="flex justify-between items-center p-2 popover-theme">
|
|
<div className="font-medium">Theme</div>
|
|
<Button
|
|
type="tertiary"
|
|
size="small"
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "self",
|
|
tid: props.tableData.id,
|
|
undo: { color: props.tableData.color },
|
|
redo: { color: defaultTableTheme },
|
|
message: `Edit table color to default`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
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={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "self",
|
|
tid: props.tableData.id,
|
|
undo: { color: props.tableData.color },
|
|
redo: { color: c },
|
|
message: `Edit table color to ${c}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
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={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "self",
|
|
tid: props.tableData.id,
|
|
undo: { color: props.tableData.color },
|
|
redo: { color: c },
|
|
message: `Edit table color to ${c}`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateTable(props.tableData.id, { color: c });
|
|
}}
|
|
>
|
|
<IconCheckboxTick
|
|
style={{
|
|
color:
|
|
props.tableData.color === c ? "white" : c,
|
|
}}
|
|
/>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
trigger="click"
|
|
position="bottomLeft"
|
|
showArrow
|
|
>
|
|
<div
|
|
className="h-[32px] w-[32px] rounded"
|
|
style={{ backgroundColor: props.tableData.color }}
|
|
/>
|
|
</Popover>
|
|
</Col>
|
|
<Col span={7}>
|
|
<Button
|
|
block
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "index_add",
|
|
tid: props.tableData.id,
|
|
message: `Add index`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateTable(props.tableData.id, {
|
|
indices: [
|
|
...props.tableData.indices,
|
|
{
|
|
id: props.tableData.indices.length,
|
|
name: `index_${props.tableData.indices.length}`,
|
|
unique: false,
|
|
fields: [],
|
|
},
|
|
],
|
|
});
|
|
}}
|
|
>
|
|
Add index
|
|
</Button>
|
|
</Col>
|
|
<Col span={6}>
|
|
<Button
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field_add",
|
|
tid: props.tableData.id,
|
|
message: `Add field`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
updateTable(props.tableData.id, {
|
|
fields: [
|
|
...props.tableData.fields,
|
|
{
|
|
name: "",
|
|
type: "",
|
|
default: "",
|
|
check: "",
|
|
primary: false,
|
|
unique: false,
|
|
notNull: false,
|
|
increment: false,
|
|
comment: "",
|
|
id: props.tableData.fields.length,
|
|
},
|
|
],
|
|
});
|
|
}}
|
|
block
|
|
>
|
|
Add field
|
|
</Button>
|
|
</Col>
|
|
<Col span={3}>
|
|
<Button
|
|
icon={<IconDeleteStroked />}
|
|
type="danger"
|
|
onClick={() => {
|
|
Toast.success(`Table deleted!`);
|
|
deleteTable(props.tableData.id);
|
|
}}
|
|
></Button>
|
|
</Col>
|
|
</Row>
|
|
</div>
|
|
</SideSheet>
|
|
</>
|
|
);
|
|
|
|
function field(fieldData, index) {
|
|
return (
|
|
<div
|
|
className={`${
|
|
index === props.tableData.fields.length - 1
|
|
? ""
|
|
: "border-b border-gray-400"
|
|
} h-[36px] px-2 py-1 flex justify-between`}
|
|
onMouseEnter={() => {
|
|
setHoveredField(index);
|
|
props.setOnRect({
|
|
tableId: props.tableData.id,
|
|
field: index,
|
|
});
|
|
}}
|
|
onMouseLeave={() => {
|
|
setHoveredField(-1);
|
|
}}
|
|
>
|
|
<div className={`${hoveredField === index ? "text-zinc-400" : ""}`}>
|
|
<button
|
|
className={`w-[10px] h-[10px] bg-[#2f68ad] opacity-80 z-50 rounded-full me-2`}
|
|
onMouseDown={() => {
|
|
props.handleGripField(index);
|
|
props.setLine((prev) => ({
|
|
...prev,
|
|
startFieldId: index,
|
|
startTableId: props.tableData.id,
|
|
startX: props.tableData.x + 15,
|
|
startY: props.tableData.y + index * 36 + 50 + 19,
|
|
endX: props.tableData.x + 15,
|
|
endY: props.tableData.y + index * 36 + 50 + 19,
|
|
}));
|
|
}}
|
|
></button>
|
|
{fieldData.name.length <= 11
|
|
? fieldData.name
|
|
: fieldData.name.substring(0, 11)}
|
|
</div>
|
|
<div className="text-zinc-400">
|
|
{hoveredField === index ? (
|
|
<Button
|
|
theme="solid"
|
|
size="small"
|
|
style={{
|
|
opacity: "0.7",
|
|
backgroundColor: "#d42020",
|
|
}}
|
|
icon={<IconMinus />}
|
|
onClick={() => {
|
|
setUndoStack((prev) => [
|
|
...prev,
|
|
{
|
|
action: Action.EDIT,
|
|
element: ObjectType.TABLE,
|
|
component: "field_delete",
|
|
tid: props.tableData.id,
|
|
data: fieldData,
|
|
message: `Delete field`,
|
|
},
|
|
]);
|
|
setRedoStack([]);
|
|
setRelationships((prev) =>
|
|
prev
|
|
.filter(
|
|
(e) =>
|
|
!(
|
|
(e.startTableId === props.tableData.id &&
|
|
e.startFieldId === index) ||
|
|
(e.endTableId === props.tableData.id &&
|
|
e.endFieldId === index)
|
|
)
|
|
)
|
|
.map((e, i) => ({ ...e, id: i }))
|
|
);
|
|
setRelationships((prev) => {
|
|
return prev.map((e) => {
|
|
if (
|
|
e.startTableId === props.tableData.id &&
|
|
e.startFieldId > fieldData.id
|
|
) {
|
|
return {
|
|
...e,
|
|
startFieldId: e.startFieldId - 1,
|
|
startX: props.tableData.x + 15,
|
|
startY:
|
|
props.tableData.y +
|
|
(e.startFieldId - 1) * 36 +
|
|
50 +
|
|
19,
|
|
};
|
|
}
|
|
if (
|
|
e.endTableId === props.tableData.id &&
|
|
e.endFieldId > fieldData.id
|
|
) {
|
|
return {
|
|
...e,
|
|
endFieldId: e.endFieldId - 1,
|
|
endX: props.tableData.x + 15,
|
|
endY:
|
|
props.tableData.y + (e.endFieldId - 1) * 36 + 50 + 19,
|
|
};
|
|
}
|
|
return e;
|
|
});
|
|
});
|
|
updateTable(props.tableData.id, {
|
|
fields: props.tableData.fields
|
|
.filter((e) => e.id !== fieldData.id)
|
|
.map((t, i) => {
|
|
return { ...t, id: i };
|
|
}),
|
|
});
|
|
}}
|
|
></Button>
|
|
) : (
|
|
fieldData.type
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|