Clean up tabs
This commit is contained in:
1ilit
parent
c67f7f512e
commit
40800f8f28
55
src/components/ColorPallete.jsx
Normal file
55
src/components/ColorPallete.jsx
Normal file
@ -0,0 +1,55 @@
|
|||||||
|
import { Button } from "@douyinfe/semi-ui";
|
||||||
|
import { IconCheckboxTick } from "@douyinfe/semi-icons";
|
||||||
|
import { tableThemes } from "../data/constants";
|
||||||
|
|
||||||
|
export default function ColorPallete({
|
||||||
|
currentColor,
|
||||||
|
onClearColor,
|
||||||
|
onPickColor,
|
||||||
|
}) {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="flex justify-between items-center p-2">
|
||||||
|
<div className="font-medium">Theme</div>
|
||||||
|
<Button type="tertiary" size="small" onClick={onClearColor}>
|
||||||
|
Clear
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
<hr />
|
||||||
|
<div className="py-3 space-y-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={() => onPickColor(c)}
|
||||||
|
>
|
||||||
|
{currentColor === c ? (
|
||||||
|
<IconCheckboxTick style={{ color: "white" }} />
|
||||||
|
) : (
|
||||||
|
<IconCheckboxTick style={{ color: c }} />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
{tableThemes.slice(Math.ceil(tableThemes.length / 2)).map((c) => (
|
||||||
|
<button
|
||||||
|
key={c}
|
||||||
|
style={{ backgroundColor: c }}
|
||||||
|
className="p-3 rounded-full mx-1"
|
||||||
|
onClick={() => onPickColor(c)}
|
||||||
|
>
|
||||||
|
<IconCheckboxTick
|
||||||
|
style={{
|
||||||
|
color: currentColor === c ? "white" : c,
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -45,8 +45,13 @@ export default function Table(props) {
|
|||||||
const [hoveredField, setHoveredField] = useState(-1);
|
const [hoveredField, setHoveredField] = useState(-1);
|
||||||
const [editField, setEditField] = useState({});
|
const [editField, setEditField] = useState({});
|
||||||
const { layout } = useLayout();
|
const { layout } = useLayout();
|
||||||
const { deleteTable, updateTable, updateField, setRelationships } =
|
const {
|
||||||
useTables();
|
deleteTable,
|
||||||
|
updateTable,
|
||||||
|
updateField,
|
||||||
|
deleteField,
|
||||||
|
setRelationships,
|
||||||
|
} = useTables();
|
||||||
const { settings } = useSettings();
|
const { settings } = useSettings();
|
||||||
const { types } = useTypes();
|
const { types } = useTypes();
|
||||||
const { setUndoStack, setRedoStack } = useUndoRedo();
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
@ -1269,63 +1274,7 @@ export default function Table(props) {
|
|||||||
backgroundColor: "#d42020",
|
backgroundColor: "#d42020",
|
||||||
}}
|
}}
|
||||||
icon={<IconMinus />}
|
icon={<IconMinus />}
|
||||||
onClick={() => {
|
onClick={() => deleteField(fieldData, props.tableData.id)}
|
||||||
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,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
if (
|
|
||||||
e.endTableId === props.tableData.id &&
|
|
||||||
e.endFieldId > fieldData.id
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
...e,
|
|
||||||
endFieldId: e.endFieldId - 1,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return e;
|
|
||||||
});
|
|
||||||
});
|
|
||||||
updateTable(props.tableData.id, {
|
|
||||||
fields: props.tableData.fields
|
|
||||||
.filter((e) => e.id !== fieldData.id)
|
|
||||||
.map((t, i) => {
|
|
||||||
return { ...t, id: i };
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
/>
|
/>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex gap-1 items-center">
|
<div className="flex gap-1 items-center">
|
||||||
|
|||||||
@ -1,227 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
AutoComplete,
|
|
||||||
Button,
|
|
||||||
Input,
|
|
||||||
Popover,
|
|
||||||
Toast,
|
|
||||||
} from "@douyinfe/semi-ui";
|
|
||||||
import {
|
|
||||||
IconPlus,
|
|
||||||
IconSearch,
|
|
||||||
IconCheckboxTick,
|
|
||||||
IconDeleteStroked,
|
|
||||||
} from "@douyinfe/semi-icons";
|
|
||||||
import {
|
|
||||||
defaultBlue,
|
|
||||||
tableThemes,
|
|
||||||
Action,
|
|
||||||
ObjectType,
|
|
||||||
State,
|
|
||||||
} from "../../data/constants";
|
|
||||||
import { useUndoRedo, useAreas, useSaveState } from "../../hooks";
|
|
||||||
import Empty from "./Empty";
|
|
||||||
|
|
||||||
export default function AreasOverview() {
|
|
||||||
const { setSaveState } = useSaveState();
|
|
||||||
const { areas, addArea, deleteArea, updateArea } = useAreas();
|
|
||||||
const { setUndoStack, setRedoStack } = useUndoRedo();
|
|
||||||
const [editField, setEditField] = useState({});
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
const [filteredResult, setFilteredResult] = useState(
|
|
||||||
areas.map((t) => t.name)
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleStringSearch = (value) => {
|
|
||||||
setFilteredResult(
|
|
||||||
areas.map((t) => t.name).filter((i) => i.includes(value))
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Row gutter={6}>
|
|
||||||
<Col span={16}>
|
|
||||||
<AutoComplete
|
|
||||||
data={filteredResult}
|
|
||||||
value={searchText}
|
|
||||||
showClear
|
|
||||||
prefix={<IconSearch />}
|
|
||||||
placeholder="Search..."
|
|
||||||
emptyContent={
|
|
||||||
<div className="p-3 popover-theme">No areas found</div>
|
|
||||||
}
|
|
||||||
onSearch={(v) => handleStringSearch(v)}
|
|
||||||
onChange={(v) => setSearchText(v)}
|
|
||||||
onSelect={(v) => {
|
|
||||||
const { id } = areas.find((t) => t.name === v);
|
|
||||||
document
|
|
||||||
.getElementById(`scroll_area_${id}`)
|
|
||||||
.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col span={8}>
|
|
||||||
<Button icon={<IconPlus />} block onClick={addArea}>
|
|
||||||
Add area
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{areas.length <= 0 ? (
|
|
||||||
<Empty
|
|
||||||
title="No subject areas"
|
|
||||||
text="Add subject areas to organize tables!"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
<div className="p-2">
|
|
||||||
{areas.map((a, i) => (
|
|
||||||
<Row
|
|
||||||
gutter={6}
|
|
||||||
type="flex"
|
|
||||||
justify="start"
|
|
||||||
align="middle"
|
|
||||||
key={i}
|
|
||||||
id={`scroll_area_${a.id}`}
|
|
||||||
className="my-3"
|
|
||||||
>
|
|
||||||
<Col span={18}>
|
|
||||||
<Input
|
|
||||||
value={a.name}
|
|
||||||
placeholder="Name"
|
|
||||||
onChange={(value) => updateArea(a.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.AREA,
|
|
||||||
aid: i,
|
|
||||||
undo: editField,
|
|
||||||
redo: { name: e.target.value },
|
|
||||||
message: `Edit area name to ${e.target.value}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col span={3}>
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div className="popover-theme">
|
|
||||||
<div className="flex justify-between items-center p-2">
|
|
||||||
<div className="font-medium">Theme</div>
|
|
||||||
<Button
|
|
||||||
type="tertiary"
|
|
||||||
size="small"
|
|
||||||
onClick={() => {
|
|
||||||
updateArea(i, { color: defaultBlue });
|
|
||||||
setSaveState(State.SAVING);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
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.AREA,
|
|
||||||
aid: i,
|
|
||||||
undo: { color: a.color },
|
|
||||||
redo: { color: c },
|
|
||||||
message: `Edit area color to ${c}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
updateArea(i, { color: c });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{a.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.AREA,
|
|
||||||
aid: i,
|
|
||||||
undo: { color: a.color },
|
|
||||||
redo: { color: c },
|
|
||||||
message: `Edit area color to ${c}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
updateArea(i, { color: c });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<IconCheckboxTick
|
|
||||||
style={{
|
|
||||||
color: a.color === c ? "white" : c,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
trigger="click"
|
|
||||||
position="bottomLeft"
|
|
||||||
showArrow
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="h-[32px] w-[32px] rounded"
|
|
||||||
style={{ backgroundColor: a.color }}
|
|
||||||
/>
|
|
||||||
</Popover>
|
|
||||||
</Col>
|
|
||||||
<Col span={3}>
|
|
||||||
<Button
|
|
||||||
icon={<IconDeleteStroked />}
|
|
||||||
type="danger"
|
|
||||||
onClick={() => {
|
|
||||||
Toast.success(`Area deleted!`);
|
|
||||||
deleteArea(i, true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
101
src/components/EditorSidePanel/AreasTab/AreaDetails.jsx
Normal file
101
src/components/EditorSidePanel/AreasTab/AreaDetails.jsx
Normal file
@ -0,0 +1,101 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Row, Col, Button, Input, Popover, Toast } from "@douyinfe/semi-ui";
|
||||||
|
import { IconDeleteStroked } from "@douyinfe/semi-icons";
|
||||||
|
import { useAreas, useSaveState, useUndoRedo } from "../../../hooks";
|
||||||
|
import {
|
||||||
|
Action,
|
||||||
|
ObjectType,
|
||||||
|
State,
|
||||||
|
defaultBlue,
|
||||||
|
} from "../../../data/constants";
|
||||||
|
import ColorPallete from "../../ColorPallete";
|
||||||
|
|
||||||
|
export default function AreaInfo({ data, i }) {
|
||||||
|
const { setSaveState } = useSaveState();
|
||||||
|
const { deleteArea, updateArea } = useAreas();
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const [editField, setEditField] = useState({});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row
|
||||||
|
gutter={6}
|
||||||
|
type="flex"
|
||||||
|
justify="start"
|
||||||
|
align="middle"
|
||||||
|
id={`scroll_area_${data.id}`}
|
||||||
|
className="my-3"
|
||||||
|
>
|
||||||
|
<Col span={18}>
|
||||||
|
<Input
|
||||||
|
value={data.name}
|
||||||
|
placeholder="Name"
|
||||||
|
onChange={(value) => updateArea(data.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.AREA,
|
||||||
|
aid: i,
|
||||||
|
undo: editField,
|
||||||
|
redo: { name: e.target.value },
|
||||||
|
message: `Edit area name to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="popover-theme">
|
||||||
|
<ColorPallete
|
||||||
|
currentColor={data.color}
|
||||||
|
onClearColor={() => {
|
||||||
|
updateArea(i, { color: defaultBlue });
|
||||||
|
setSaveState(State.SAVING);
|
||||||
|
}}
|
||||||
|
onPickColor={(c) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.AREA,
|
||||||
|
aid: i,
|
||||||
|
undo: { color: data.color },
|
||||||
|
redo: { color: c },
|
||||||
|
message: `Edit area color to ${c}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateArea(i, { color: c });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="bottomLeft"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-[32px] w-[32px] rounded"
|
||||||
|
style={{ backgroundColor: data.color }}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
onClick={() => {
|
||||||
|
Toast.success(`Area deleted!`);
|
||||||
|
deleteArea(i, true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
37
src/components/EditorSidePanel/AreasTab/AreasTab.jsx
Normal file
37
src/components/EditorSidePanel/AreasTab/AreasTab.jsx
Normal file
@ -0,0 +1,37 @@
|
|||||||
|
import { Row, Col, Button } from "@douyinfe/semi-ui";
|
||||||
|
import { IconPlus } from "@douyinfe/semi-icons";
|
||||||
|
import Empty from "../Empty";
|
||||||
|
import { useAreas } from "../../../hooks";
|
||||||
|
import SearchBar from "./SearchBar";
|
||||||
|
import AreaInfo from "./AreaDetails";
|
||||||
|
|
||||||
|
export default function AreasTab() {
|
||||||
|
const { areas, addArea } = useAreas();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<Row gutter={6}>
|
||||||
|
<Col span={16}>
|
||||||
|
<SearchBar />
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Button icon={<IconPlus />} block onClick={addArea}>
|
||||||
|
Add area
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{areas.length <= 0 ? (
|
||||||
|
<Empty
|
||||||
|
title="No subject areas"
|
||||||
|
text="Add subject areas to organize tables!"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<div className="p-2">
|
||||||
|
{areas.map((a, i) => (
|
||||||
|
<AreaInfo data={a} key={"area_" + i} i={i} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
src/components/EditorSidePanel/AreasTab/SearchBar.jsx
Normal file
39
src/components/EditorSidePanel/AreasTab/SearchBar.jsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useAreas } from "../../../hooks";
|
||||||
|
import { AutoComplete } from "@douyinfe/semi-ui";
|
||||||
|
import { IconSearch } from "@douyinfe/semi-icons";
|
||||||
|
|
||||||
|
export default function SearchBar() {
|
||||||
|
const { areas } = useAreas();
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
|
||||||
|
const [filteredResult, setFilteredResult] = useState(
|
||||||
|
areas.map((t) => t.name)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleStringSearch = (value) => {
|
||||||
|
setFilteredResult(
|
||||||
|
areas.map((t) => t.name).filter((i) => i.includes(value))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AutoComplete
|
||||||
|
data={filteredResult}
|
||||||
|
value={searchText}
|
||||||
|
showClear
|
||||||
|
prefix={<IconSearch />}
|
||||||
|
placeholder="Search..."
|
||||||
|
emptyContent={<div className="p-3 popover-theme">No areas found</div>}
|
||||||
|
onSearch={(v) => handleStringSearch(v)}
|
||||||
|
onChange={(v) => setSearchText(v)}
|
||||||
|
onSelect={(v) => {
|
||||||
|
const { id } = areas.find((t) => t.name === v);
|
||||||
|
document
|
||||||
|
.getElementById(`scroll_area_${id}`)
|
||||||
|
.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,212 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
Button,
|
|
||||||
Collapse,
|
|
||||||
AutoComplete,
|
|
||||||
TextArea,
|
|
||||||
Popover,
|
|
||||||
Input,
|
|
||||||
Toast,
|
|
||||||
} from "@douyinfe/semi-ui";
|
|
||||||
import {
|
|
||||||
IconDeleteStroked,
|
|
||||||
IconPlus,
|
|
||||||
IconSearch,
|
|
||||||
IconCheckboxTick,
|
|
||||||
} from "@douyinfe/semi-icons";
|
|
||||||
import { noteThemes, Action, ObjectType } from "../../data/constants";
|
|
||||||
import { useUndoRedo, useNotes } from "../../hooks";
|
|
||||||
import Empty from "./Empty";
|
|
||||||
|
|
||||||
export default function NotesOverview() {
|
|
||||||
const { notes, updateNote, addNote, deleteNote } = useNotes();
|
|
||||||
const { setUndoStack, setRedoStack } = useUndoRedo();
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
const [editField, setEditField] = useState({});
|
|
||||||
const [activeKey, setActiveKey] = useState("");
|
|
||||||
const [filteredResult, setFilteredResult] = useState(
|
|
||||||
notes.map((t) => t.title)
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleStringSearch = (value) => {
|
|
||||||
setFilteredResult(
|
|
||||||
notes.map((t) => t.title).filter((i) => i.includes(value))
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<Row gutter={6}>
|
|
||||||
<Col span={16}>
|
|
||||||
<AutoComplete
|
|
||||||
data={filteredResult}
|
|
||||||
value={searchText}
|
|
||||||
showClear
|
|
||||||
prefix={<IconSearch />}
|
|
||||||
placeholder="Search..."
|
|
||||||
emptyContent={
|
|
||||||
<div className="p-3 popover-theme">No notes found</div>
|
|
||||||
}
|
|
||||||
onSearch={(v) => handleStringSearch(v)}
|
|
||||||
onChange={(v) => setSearchText(v)}
|
|
||||||
onSelect={(v) => {
|
|
||||||
const { id } = notes.find((t) => t.title === v);
|
|
||||||
setActiveKey(`${id}`);
|
|
||||||
document
|
|
||||||
.getElementById(`scroll_note_${id}`)
|
|
||||||
.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col span={8}>
|
|
||||||
<Button icon={<IconPlus />} block onClick={() => addNote()}>
|
|
||||||
Add note
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{notes.length <= 0 ? (
|
|
||||||
<Empty title="No text notes" text="Add notes cuz why not!" />
|
|
||||||
) : (
|
|
||||||
<Collapse
|
|
||||||
activeKey={activeKey}
|
|
||||||
onChange={(k) => setActiveKey(k)}
|
|
||||||
accordion
|
|
||||||
>
|
|
||||||
{notes.map((n, i) => (
|
|
||||||
<Collapse.Panel
|
|
||||||
header={
|
|
||||||
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
|
||||||
{n.title}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
itemKey={`${n.id}`}
|
|
||||||
id={`scroll_note_${n.id}`}
|
|
||||||
key={n.id}
|
|
||||||
>
|
|
||||||
<div className="flex items-center mb-2">
|
|
||||||
<div className="font-semibold me-2">Title:</div>
|
|
||||||
<Input
|
|
||||||
value={n.title}
|
|
||||||
placeholder="Title"
|
|
||||||
onChange={(value) => updateNote(n.id, { title: value })}
|
|
||||||
onFocus={(e) => setEditField({ title: e.target.value })}
|
|
||||||
onBlur={(e) => {
|
|
||||||
if (e.target.value === editField.title) return;
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.NOTE,
|
|
||||||
nid: n.id,
|
|
||||||
undo: editField,
|
|
||||||
redo: { title: e.target.value },
|
|
||||||
message: `Edit note title to "${e.target.name}"`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="flex justify-between align-top">
|
|
||||||
<TextArea
|
|
||||||
placeholder="Add content"
|
|
||||||
value={n.content}
|
|
||||||
autosize
|
|
||||||
onChange={(value) => {
|
|
||||||
const textarea = document.getElementById(`note_${n.id}`);
|
|
||||||
textarea.style.height = "0";
|
|
||||||
textarea.style.height = textarea.scrollHeight + "px";
|
|
||||||
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
|
|
||||||
updateNote(n.id, { height: newHeight, content: value });
|
|
||||||
}}
|
|
||||||
onFocus={(e) =>
|
|
||||||
setEditField({ content: e.target.value, height: n.height })
|
|
||||||
}
|
|
||||||
onBlur={(e) => {
|
|
||||||
if (e.target.value === editField.name) return;
|
|
||||||
const textarea = document.getElementById(`note_${n.id}`);
|
|
||||||
textarea.style.height = "0";
|
|
||||||
textarea.style.height = textarea.scrollHeight + "px";
|
|
||||||
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.NOTE,
|
|
||||||
nid: i,
|
|
||||||
undo: editField,
|
|
||||||
redo: { content: e.target.value, height: newHeight },
|
|
||||||
message: `Edit note content to "${e.target.value}"`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
}}
|
|
||||||
rows={3}
|
|
||||||
/>
|
|
||||||
<div className="ms-2">
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div className="popover-theme">
|
|
||||||
<div className="font-medium mb-1">Theme</div>
|
|
||||||
<hr />
|
|
||||||
<div className="py-3">
|
|
||||||
{noteThemes.map((c) => (
|
|
||||||
<button
|
|
||||||
key={c}
|
|
||||||
style={{ backgroundColor: c }}
|
|
||||||
className="p-3 rounded-full mx-1"
|
|
||||||
onClick={() => {
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.NOTE,
|
|
||||||
nid: i,
|
|
||||||
undo: { color: n.color },
|
|
||||||
redo: { color: c },
|
|
||||||
message: `Edit note color to ${c}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
updateNote(i, { color: c });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{n.color === c ? (
|
|
||||||
<IconCheckboxTick style={{ color: "white" }} />
|
|
||||||
) : (
|
|
||||||
<IconCheckboxTick style={{ color: c }} />
|
|
||||||
)}
|
|
||||||
</button>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
trigger="click"
|
|
||||||
position="rightTop"
|
|
||||||
showArrow
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
className="h-[32px] w-[32px] rounded mb-2"
|
|
||||||
style={{ backgroundColor: n.color }}
|
|
||||||
/>
|
|
||||||
</Popover>
|
|
||||||
<Button
|
|
||||||
icon={<IconDeleteStroked />}
|
|
||||||
type="danger"
|
|
||||||
onClick={() => {
|
|
||||||
Toast.success(`Note deleted!`);
|
|
||||||
deleteNote(i, true);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Collapse.Panel>
|
|
||||||
))}
|
|
||||||
</Collapse>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
148
src/components/EditorSidePanel/NotesTab/NoteInfo.jsx
Normal file
148
src/components/EditorSidePanel/NotesTab/NoteInfo.jsx
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Collapse,
|
||||||
|
TextArea,
|
||||||
|
Popover,
|
||||||
|
Input,
|
||||||
|
Toast,
|
||||||
|
} from "@douyinfe/semi-ui";
|
||||||
|
import { IconDeleteStroked, IconCheckboxTick } from "@douyinfe/semi-icons";
|
||||||
|
import { noteThemes, Action, ObjectType } from "../../../data/constants";
|
||||||
|
import { useNotes, useUndoRedo } from "../../../hooks";
|
||||||
|
|
||||||
|
export default function NoteInfo({ data, nid }) {
|
||||||
|
const { updateNote, deleteNote } = useNotes();
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const [editField, setEditField] = useState({});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Collapse.Panel
|
||||||
|
header={
|
||||||
|
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
|
{data.title}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
itemKey={`${data.id}`}
|
||||||
|
id={`scroll_note_${data.id}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center mb-2">
|
||||||
|
<div className="font-semibold me-2">Title:</div>
|
||||||
|
<Input
|
||||||
|
value={data.title}
|
||||||
|
placeholder="Title"
|
||||||
|
onChange={(value) => updateNote(data.id, { title: value })}
|
||||||
|
onFocus={(e) => setEditField({ title: e.target.value })}
|
||||||
|
onBlur={(e) => {
|
||||||
|
if (e.target.value === editField.title) return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.NOTE,
|
||||||
|
nid: data.id,
|
||||||
|
undo: editField,
|
||||||
|
redo: { title: e.target.value },
|
||||||
|
message: `Edit note title to "${e.target.name}"`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between align-top">
|
||||||
|
<TextArea
|
||||||
|
placeholder="Add content"
|
||||||
|
value={data.content}
|
||||||
|
autosize
|
||||||
|
onChange={(value) => {
|
||||||
|
const textarea = document.getElementById(`note_${data.id}`);
|
||||||
|
textarea.style.height = "0";
|
||||||
|
textarea.style.height = textarea.scrollHeight + "px";
|
||||||
|
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
|
||||||
|
updateNote(data.id, { height: newHeight, content: value });
|
||||||
|
}}
|
||||||
|
onFocus={(e) =>
|
||||||
|
setEditField({ content: e.target.value, height: data.height })
|
||||||
|
}
|
||||||
|
onBlur={(e) => {
|
||||||
|
if (e.target.value === editField.name) return;
|
||||||
|
const textarea = document.getElementById(`note_${data.id}`);
|
||||||
|
textarea.style.height = "0";
|
||||||
|
textarea.style.height = textarea.scrollHeight + "px";
|
||||||
|
const newHeight = textarea.scrollHeight + 16 + 20 + 4;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.NOTE,
|
||||||
|
nid: nid,
|
||||||
|
undo: editField,
|
||||||
|
redo: { content: e.target.value, height: newHeight },
|
||||||
|
message: `Edit note content to "${e.target.value}"`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
rows={3}
|
||||||
|
/>
|
||||||
|
<div className="ms-2">
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="popover-theme">
|
||||||
|
<div className="font-medium mb-1">Theme</div>
|
||||||
|
<hr />
|
||||||
|
<div className="py-3">
|
||||||
|
{noteThemes.map((c) => (
|
||||||
|
<button
|
||||||
|
key={c}
|
||||||
|
style={{ backgroundColor: c }}
|
||||||
|
className="p-3 rounded-full mx-1"
|
||||||
|
onClick={() => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.NOTE,
|
||||||
|
nid: nid,
|
||||||
|
undo: { color: data.color },
|
||||||
|
redo: { color: c },
|
||||||
|
message: `Edit note color to ${c}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateNote(nid, { color: c });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{data.color === c ? (
|
||||||
|
<IconCheckboxTick style={{ color: "white" }} />
|
||||||
|
) : (
|
||||||
|
<IconCheckboxTick style={{ color: c }} />
|
||||||
|
)}
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="rightTop"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-[32px] w-[32px] rounded mb-2"
|
||||||
|
style={{ backgroundColor: data.color }}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
onClick={() => {
|
||||||
|
Toast.success(`Note deleted!`);
|
||||||
|
deleteNote(nid, true);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Collapse.Panel>
|
||||||
|
);
|
||||||
|
}
|
||||||
40
src/components/EditorSidePanel/NotesTab/NotesTab.jsx
Normal file
40
src/components/EditorSidePanel/NotesTab/NotesTab.jsx
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Row, Col, Button, Collapse } from "@douyinfe/semi-ui";
|
||||||
|
import { IconPlus } from "@douyinfe/semi-icons";
|
||||||
|
import { useNotes } from "../../../hooks";
|
||||||
|
import Empty from "../Empty";
|
||||||
|
import SearchBar from "./SearchBar";
|
||||||
|
import NoteInfo from "./NoteInfo";
|
||||||
|
|
||||||
|
export default function NotesTab() {
|
||||||
|
const { notes, addNote } = useNotes();
|
||||||
|
const [activeKey, setActiveKey] = useState("");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={6}>
|
||||||
|
<Col span={16}>
|
||||||
|
<SearchBar setActiveKey={setActiveKey} />
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Button icon={<IconPlus />} block onClick={() => addNote()}>
|
||||||
|
Add note
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{notes.length <= 0 ? (
|
||||||
|
<Empty title="No text notes" text="Add notes cuz why not!" />
|
||||||
|
) : (
|
||||||
|
<Collapse
|
||||||
|
activeKey={activeKey}
|
||||||
|
onChange={(k) => setActiveKey(k)}
|
||||||
|
accordion
|
||||||
|
>
|
||||||
|
{notes.map((n, i) => (
|
||||||
|
<NoteInfo data={n} key={i} nid={i} />
|
||||||
|
))}
|
||||||
|
</Collapse>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
39
src/components/EditorSidePanel/NotesTab/SearchBar.jsx
Normal file
39
src/components/EditorSidePanel/NotesTab/SearchBar.jsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { AutoComplete } from "@douyinfe/semi-ui";
|
||||||
|
import { IconSearch } from "@douyinfe/semi-icons";
|
||||||
|
import { useNotes } from "../../../hooks";
|
||||||
|
|
||||||
|
export default function SearchBar({ setActiveKey }) {
|
||||||
|
const { notes } = useNotes();
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
const [filteredResult, setFilteredResult] = useState(
|
||||||
|
notes.map((t) => t.title)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleStringSearch = (value) => {
|
||||||
|
setFilteredResult(
|
||||||
|
notes.map((t) => t.title).filter((i) => i.includes(value))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AutoComplete
|
||||||
|
data={filteredResult}
|
||||||
|
value={searchText}
|
||||||
|
showClear
|
||||||
|
prefix={<IconSearch />}
|
||||||
|
placeholder="Search..."
|
||||||
|
emptyContent={<div className="p-3 popover-theme">No notes found</div>}
|
||||||
|
onSearch={(v) => handleStringSearch(v)}
|
||||||
|
onChange={(v) => setSearchText(v)}
|
||||||
|
onSelect={(v) => {
|
||||||
|
const { id } = notes.find((t) => t.title === v);
|
||||||
|
setActiveKey(`${id}`);
|
||||||
|
document
|
||||||
|
.getElementById(`scroll_note_${id}`)
|
||||||
|
.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,292 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import {
|
|
||||||
AutoComplete,
|
|
||||||
Collapse,
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
Select,
|
|
||||||
Button,
|
|
||||||
Popover,
|
|
||||||
Table,
|
|
||||||
} from "@douyinfe/semi-ui";
|
|
||||||
import {
|
|
||||||
IconDeleteStroked,
|
|
||||||
IconLoopTextStroked,
|
|
||||||
IconMore,
|
|
||||||
IconSearch,
|
|
||||||
} from "@douyinfe/semi-icons";
|
|
||||||
import {
|
|
||||||
Cardinality,
|
|
||||||
Constraint,
|
|
||||||
Action,
|
|
||||||
ObjectType,
|
|
||||||
} from "../../data/constants";
|
|
||||||
import { useTables, useUndoRedo } from "../../hooks";
|
|
||||||
import Empty from "./Empty";
|
|
||||||
|
|
||||||
export default function RelationshipsOverview() {
|
|
||||||
const { relationships } = useTables();
|
|
||||||
const [refActiveIndex, setRefActiveIndex] = useState("");
|
|
||||||
const [searchText, setSearchText] = useState("");
|
|
||||||
const [filteredResult, setFilteredResult] = useState(
|
|
||||||
relationships.map((t) => t.name)
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleStringSearch = (value) => {
|
|
||||||
setFilteredResult(
|
|
||||||
relationships.map((t) => t.name).filter((i) => i.includes(value))
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<AutoComplete
|
|
||||||
data={filteredResult}
|
|
||||||
value={searchText}
|
|
||||||
showClear
|
|
||||||
prefix={<IconSearch />}
|
|
||||||
placeholder="Search..."
|
|
||||||
emptyContent={
|
|
||||||
<div className="p-3 popover-theme">No relationships found</div>
|
|
||||||
}
|
|
||||||
onSearch={(v) => handleStringSearch(v)}
|
|
||||||
onChange={(v) => setSearchText(v)}
|
|
||||||
onSelect={(v) => {
|
|
||||||
const { id } = relationships.find((t) => t.name === v);
|
|
||||||
setRefActiveIndex(`${id}`);
|
|
||||||
document
|
|
||||||
.getElementById(`scroll_ref_${id}`)
|
|
||||||
.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
<Collapse
|
|
||||||
activeKey={refActiveIndex}
|
|
||||||
onChange={(k) => setRefActiveIndex(k)}
|
|
||||||
accordion
|
|
||||||
>
|
|
||||||
{relationships.length <= 0 ? (
|
|
||||||
<Empty
|
|
||||||
title="No relationships"
|
|
||||||
text="Drag to connect fields and form relationships!"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
relationships.map((r) => <RelationshipPanel key={r.id} data={r} />)
|
|
||||||
)}
|
|
||||||
</Collapse>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function RelationshipPanel({ data }) {
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: "Primary",
|
|
||||||
dataIndex: "primary",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "Foreign",
|
|
||||||
dataIndex: "foreign",
|
|
||||||
},
|
|
||||||
];
|
|
||||||
const { tables, setRelationships, deleteRelationship } = useTables();
|
|
||||||
const { setUndoStack, setRedoStack } = useUndoRedo();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div id={`scroll_ref_${data.id}`}>
|
|
||||||
<Collapse.Panel
|
|
||||||
header={
|
|
||||||
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
|
||||||
{data.name}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
itemKey={`${data.id}`}
|
|
||||||
>
|
|
||||||
<div className="flex justify-between items-center mb-3">
|
|
||||||
<div className="me-3">
|
|
||||||
<span className="font-semibold">Primary: </span>
|
|
||||||
{tables[data.endTableId].name}
|
|
||||||
</div>
|
|
||||||
<div className="mx-1">
|
|
||||||
<span className="font-semibold">Foreign: </span>
|
|
||||||
{tables[data.startTableId].name}
|
|
||||||
</div>
|
|
||||||
<div className="ms-1">
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div className="p-2 popover-theme">
|
|
||||||
<Table
|
|
||||||
columns={columns}
|
|
||||||
dataSource={[
|
|
||||||
{
|
|
||||||
key: "1",
|
|
||||||
foreign: `${tables[data.startTableId].name}(${
|
|
||||||
tables[data.startTableId].fields[data.startFieldId]
|
|
||||||
.name
|
|
||||||
})`,
|
|
||||||
primary: `${tables[data.endTableId].name}(${
|
|
||||||
tables[data.endTableId].fields[data.endFieldId].name
|
|
||||||
})`,
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
pagination={false}
|
|
||||||
size="small"
|
|
||||||
bordered
|
|
||||||
/>
|
|
||||||
<div className="mt-2">
|
|
||||||
<Button
|
|
||||||
icon={<IconLoopTextStroked />}
|
|
||||||
block
|
|
||||||
onClick={() => {
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.RELATIONSHIP,
|
|
||||||
rid: data.id,
|
|
||||||
undo: {
|
|
||||||
startTableId: data.startTableId,
|
|
||||||
startFieldId: data.startFieldId,
|
|
||||||
endTableId: data.endTableId,
|
|
||||||
endFieldId: data.endFieldId,
|
|
||||||
},
|
|
||||||
redo: {
|
|
||||||
startTableId: data.endTableId,
|
|
||||||
startFieldId: data.endFieldId,
|
|
||||||
endTableId: data.startTableId,
|
|
||||||
endFieldId: data.startFieldId,
|
|
||||||
},
|
|
||||||
message: `Swap primary and foreign tables`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
setRelationships((prev) =>
|
|
||||||
prev.map((e, idx) =>
|
|
||||||
idx === data.id
|
|
||||||
? {
|
|
||||||
...e,
|
|
||||||
startTableId: e.endTableId,
|
|
||||||
startFieldId: e.endFieldId,
|
|
||||||
endTableId: e.startTableId,
|
|
||||||
endFieldId: e.startFieldId,
|
|
||||||
}
|
|
||||||
: e
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Swap
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
trigger="click"
|
|
||||||
position="rightTop"
|
|
||||||
showArrow
|
|
||||||
>
|
|
||||||
<Button icon={<IconMore />} type="tertiary" />
|
|
||||||
</Popover>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="font-semibold my-1">Cardinality</div>
|
|
||||||
<Select
|
|
||||||
optionList={Object.values(Cardinality).map((v) => ({
|
|
||||||
label: v,
|
|
||||||
value: v,
|
|
||||||
}))}
|
|
||||||
value={data.cardinality}
|
|
||||||
className="w-full"
|
|
||||||
onChange={(value) => {
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.RELATIONSHIP,
|
|
||||||
rid: data.id,
|
|
||||||
undo: { cardinality: data.cardinality },
|
|
||||||
redo: { cardinality: value },
|
|
||||||
message: `Edit relationship cardinality`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
setRelationships((prev) =>
|
|
||||||
prev.map((e, idx) =>
|
|
||||||
idx === data.id ? { ...e, cardinality: value } : e
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
></Select>
|
|
||||||
<Row gutter={6} className="my-3">
|
|
||||||
<Col span={12}>
|
|
||||||
<div className="font-semibold">On update: </div>
|
|
||||||
<Select
|
|
||||||
optionList={Object.values(Constraint).map((v) => ({
|
|
||||||
label: v,
|
|
||||||
value: v,
|
|
||||||
}))}
|
|
||||||
value={data.updateConstraint}
|
|
||||||
className="w-full"
|
|
||||||
onChange={(value) => {
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.RELATIONSHIP,
|
|
||||||
rid: data.id,
|
|
||||||
undo: { updateConstraint: data.updateConstraint },
|
|
||||||
redo: { updateConstraint: value },
|
|
||||||
message: `Edit relationship update constraint`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
setRelationships((prev) =>
|
|
||||||
prev.map((e, idx) =>
|
|
||||||
idx === data.id ? { ...e, updateConstraint: value } : e
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
></Select>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<div className="font-semibold">On delete: </div>
|
|
||||||
<Select
|
|
||||||
optionList={Object.values(Constraint).map((v) => ({
|
|
||||||
label: v,
|
|
||||||
value: v,
|
|
||||||
}))}
|
|
||||||
value={data.deleteConstraint}
|
|
||||||
className="w-full"
|
|
||||||
onChange={(value) => {
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.RELATIONSHIP,
|
|
||||||
rid: data.id,
|
|
||||||
undo: { deleteConstraint: data.deleteConstraint },
|
|
||||||
redo: { deleteConstraint: value },
|
|
||||||
message: `Edit relationship delete constraint`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
setRelationships((prev) =>
|
|
||||||
prev.map((e, idx) =>
|
|
||||||
idx === data.id ? { ...e, deleteConstraint: value } : e
|
|
||||||
)
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
></Select>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
<Button
|
|
||||||
icon={<IconDeleteStroked />}
|
|
||||||
block
|
|
||||||
type="danger"
|
|
||||||
onClick={() => deleteRelationship(data.id, true)}
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</Collapse.Panel>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@ -0,0 +1,228 @@
|
|||||||
|
import {
|
||||||
|
Collapse,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Select,
|
||||||
|
Button,
|
||||||
|
Popover,
|
||||||
|
Table,
|
||||||
|
} from "@douyinfe/semi-ui";
|
||||||
|
import {
|
||||||
|
IconDeleteStroked,
|
||||||
|
IconLoopTextStroked,
|
||||||
|
IconMore,
|
||||||
|
} from "@douyinfe/semi-icons";
|
||||||
|
import {
|
||||||
|
Cardinality,
|
||||||
|
Constraint,
|
||||||
|
Action,
|
||||||
|
ObjectType,
|
||||||
|
} from "../../../data/constants";
|
||||||
|
import { useTables, useUndoRedo } from "../../../hooks";
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: "Primary",
|
||||||
|
dataIndex: "primary",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Foreign",
|
||||||
|
dataIndex: "foreign",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default function RelationshipInfo({ data }) {
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const { tables, setRelationships, deleteRelationship } = useTables();
|
||||||
|
|
||||||
|
const swapKeys = () => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.RELATIONSHIP,
|
||||||
|
rid: data.id,
|
||||||
|
undo: {
|
||||||
|
startTableId: data.startTableId,
|
||||||
|
startFieldId: data.startFieldId,
|
||||||
|
endTableId: data.endTableId,
|
||||||
|
endFieldId: data.endFieldId,
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
startTableId: data.endTableId,
|
||||||
|
startFieldId: data.endFieldId,
|
||||||
|
endTableId: data.startTableId,
|
||||||
|
endFieldId: data.startFieldId,
|
||||||
|
},
|
||||||
|
message: `Swap primary and foreign tables`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setRelationships((prev) =>
|
||||||
|
prev.map((e, idx) =>
|
||||||
|
idx === data.id
|
||||||
|
? {
|
||||||
|
...e,
|
||||||
|
startTableId: e.endTableId,
|
||||||
|
startFieldId: e.endFieldId,
|
||||||
|
endTableId: e.startTableId,
|
||||||
|
endFieldId: e.startFieldId,
|
||||||
|
}
|
||||||
|
: e
|
||||||
|
)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeCardinality = (value) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.RELATIONSHIP,
|
||||||
|
rid: data.id,
|
||||||
|
undo: { cardinality: data.cardinality },
|
||||||
|
redo: { cardinality: value },
|
||||||
|
message: `Edit relationship cardinality`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setRelationships((prev) =>
|
||||||
|
prev.map((e, idx) => (idx === data.id ? { ...e, cardinality: value } : e))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeConstraint = (key, value) => {
|
||||||
|
const undoKey = `${key}Constraint`;
|
||||||
|
console.log({
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.RELATIONSHIP,
|
||||||
|
rid: data.id,
|
||||||
|
undo: { [undoKey]: data[undoKey] },
|
||||||
|
redo: { [undoKey]: value },
|
||||||
|
message: `Edit relationship ${key} constraint`,
|
||||||
|
});
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.RELATIONSHIP,
|
||||||
|
rid: data.id,
|
||||||
|
undo: { [undoKey]: data[undoKey] },
|
||||||
|
redo: { [undoKey]: value },
|
||||||
|
message: `Edit relationship ${key} constraint`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setRelationships((prev) =>
|
||||||
|
prev.map((e, idx) => (idx === data.id ? { ...e, [undoKey]: value } : e))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id={`scroll_ref_${data.id}`}>
|
||||||
|
<Collapse.Panel
|
||||||
|
header={
|
||||||
|
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
|
{data.name}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
itemKey={`${data.id}`}
|
||||||
|
>
|
||||||
|
<div className="flex justify-between items-center mb-3">
|
||||||
|
<div className="me-3">
|
||||||
|
<span className="font-semibold">Primary: </span>
|
||||||
|
{tables[data.endTableId].name}
|
||||||
|
</div>
|
||||||
|
<div className="mx-1">
|
||||||
|
<span className="font-semibold">Foreign: </span>
|
||||||
|
{tables[data.startTableId].name}
|
||||||
|
</div>
|
||||||
|
<div className="ms-1">
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="p-2 popover-theme">
|
||||||
|
<Table
|
||||||
|
columns={columns}
|
||||||
|
dataSource={[
|
||||||
|
{
|
||||||
|
key: "1",
|
||||||
|
foreign: `${tables[data.startTableId].name}(${
|
||||||
|
tables[data.startTableId].fields[data.startFieldId]
|
||||||
|
.name
|
||||||
|
})`,
|
||||||
|
primary: `${tables[data.endTableId].name}(${
|
||||||
|
tables[data.endTableId].fields[data.endFieldId].name
|
||||||
|
})`,
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
pagination={false}
|
||||||
|
size="small"
|
||||||
|
bordered
|
||||||
|
/>
|
||||||
|
<div className="mt-2">
|
||||||
|
<Button
|
||||||
|
icon={<IconLoopTextStroked />}
|
||||||
|
block
|
||||||
|
onClick={swapKeys}
|
||||||
|
>
|
||||||
|
Swap
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="rightTop"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<Button icon={<IconMore />} type="tertiary" />
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="font-semibold my-1">Cardinality</div>
|
||||||
|
<Select
|
||||||
|
optionList={Object.values(Cardinality).map((v) => ({
|
||||||
|
label: v,
|
||||||
|
value: v,
|
||||||
|
}))}
|
||||||
|
value={data.cardinality}
|
||||||
|
className="w-full"
|
||||||
|
onChange={changeCardinality}
|
||||||
|
/>
|
||||||
|
<Row gutter={6} className="my-3">
|
||||||
|
<Col span={12}>
|
||||||
|
<div className="font-semibold">On update: </div>
|
||||||
|
<Select
|
||||||
|
optionList={Object.values(Constraint).map((v) => ({
|
||||||
|
label: v,
|
||||||
|
value: v,
|
||||||
|
}))}
|
||||||
|
value={data.updateConstraint}
|
||||||
|
className="w-full"
|
||||||
|
onChange={(value) => changeConstraint("update", value)}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<div className="font-semibold">On delete: </div>
|
||||||
|
<Select
|
||||||
|
optionList={Object.values(Constraint).map((v) => ({
|
||||||
|
label: v,
|
||||||
|
value: v,
|
||||||
|
}))}
|
||||||
|
value={data.deleteConstraint}
|
||||||
|
className="w-full"
|
||||||
|
onChange={(value) => changeConstraint("delete", value)}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
block
|
||||||
|
type="danger"
|
||||||
|
onClick={() => deleteRelationship(data.id, true)}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</Collapse.Panel>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,31 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Collapse } from "@douyinfe/semi-ui";
|
||||||
|
import { useTables } from "../../../hooks";
|
||||||
|
import Empty from "../Empty";
|
||||||
|
import SearchBar from "./SearchBar";
|
||||||
|
import RelationshipInfo from "./RelationshipInfo";
|
||||||
|
|
||||||
|
export default function RelationshipsTab() {
|
||||||
|
const { relationships } = useTables();
|
||||||
|
const [refActiveIndex, setRefActiveIndex] = useState("");
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SearchBar setRefActiveIndex={setRefActiveIndex} />
|
||||||
|
<Collapse
|
||||||
|
activeKey={refActiveIndex}
|
||||||
|
onChange={(k) => setRefActiveIndex(k)}
|
||||||
|
accordion
|
||||||
|
>
|
||||||
|
{relationships.length <= 0 ? (
|
||||||
|
<Empty
|
||||||
|
title="No relationships"
|
||||||
|
text="Drag to connect fields and form relationships!"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
relationships.map((r) => <RelationshipInfo key={r.id} data={r} />)
|
||||||
|
)}
|
||||||
|
</Collapse>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,41 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useTables } from "../../../hooks";
|
||||||
|
import { AutoComplete } from "@douyinfe/semi-ui";
|
||||||
|
import { IconSearch } from "@douyinfe/semi-icons";
|
||||||
|
|
||||||
|
export default function SearchBar({ setRefActiveIndex }) {
|
||||||
|
const { relationships } = useTables();
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
const [filteredResult, setFilteredResult] = useState(
|
||||||
|
relationships.map((t) => t.name)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleStringSearch = (value) => {
|
||||||
|
setFilteredResult(
|
||||||
|
relationships.map((t) => t.name).filter((i) => i.includes(value))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AutoComplete
|
||||||
|
data={filteredResult}
|
||||||
|
value={searchText}
|
||||||
|
showClear
|
||||||
|
prefix={<IconSearch />}
|
||||||
|
placeholder="Search..."
|
||||||
|
emptyContent={
|
||||||
|
<div className="p-3 popover-theme">No relationships found</div>
|
||||||
|
}
|
||||||
|
onSearch={(v) => handleStringSearch(v)}
|
||||||
|
onChange={(v) => setSearchText(v)}
|
||||||
|
onSelect={(v) => {
|
||||||
|
const { id } = relationships.find((t) => t.name === v);
|
||||||
|
setRefActiveIndex(`${id}`);
|
||||||
|
document
|
||||||
|
.getElementById(`scroll_ref_${id}`)
|
||||||
|
.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,12 +1,12 @@
|
|||||||
import { Tabs } from "@douyinfe/semi-ui";
|
import { Tabs } from "@douyinfe/semi-ui";
|
||||||
import { Tab } from "../../data/constants";
|
import { Tab } from "../../data/constants";
|
||||||
import TablesOverview from "./TablesOverview";
|
|
||||||
import RelationshipsOverview from "./RelationshipsOverview";
|
|
||||||
import AreasOverview from "./AreasOverview";
|
|
||||||
import NotesOverview from "./NotesOverview";
|
|
||||||
import TypesOverview from "./TypesOverview";
|
|
||||||
import Issues from "./Issues";
|
|
||||||
import { useLayout, useSelect } from "../../hooks";
|
import { useLayout, useSelect } from "../../hooks";
|
||||||
|
import RelationshipsTab from "./RelationshipsTab/RelationshipsTab";
|
||||||
|
import TypesTab from "./TypesTab/TypesTab";
|
||||||
|
import Issues from "./Issues";
|
||||||
|
import AreasTab from "./AreasTab/AreasTab";
|
||||||
|
import NotesTab from "./NotesTab/NotesTab";
|
||||||
|
import TablesTab from "./TablesTab/TablesTab";
|
||||||
|
|
||||||
export default function SidePanel({ width, resize, setResize }) {
|
export default function SidePanel({ width, resize, setResize }) {
|
||||||
const { layout } = useLayout();
|
const { layout } = useLayout();
|
||||||
@ -21,11 +21,11 @@ export default function SidePanel({ width, resize, setResize }) {
|
|||||||
];
|
];
|
||||||
|
|
||||||
const contentList = [
|
const contentList = [
|
||||||
<TablesOverview key="tables" />,
|
<TablesTab key="tables" />,
|
||||||
<RelationshipsOverview key="relationships" />,
|
<RelationshipsTab key="relationships" />,
|
||||||
<AreasOverview key="areas" />,
|
<AreasTab key="areas" />,
|
||||||
<NotesOverview key="notes" />,
|
<NotesTab key="notes" />,
|
||||||
<TypesOverview key="types" />,
|
<TypesTab key="types" />,
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
292
src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
Normal file
292
src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
Normal file
@ -0,0 +1,292 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
Input,
|
||||||
|
TextArea,
|
||||||
|
Button,
|
||||||
|
TagInput,
|
||||||
|
InputNumber,
|
||||||
|
Checkbox,
|
||||||
|
} from "@douyinfe/semi-ui";
|
||||||
|
import { Action, ObjectType } from "../../../data/constants";
|
||||||
|
import { IconDeleteStroked } from "@douyinfe/semi-icons";
|
||||||
|
import { hasCheck, hasPrecision, isSized } from "../../../utils/toSQL";
|
||||||
|
import { useTables, useUndoRedo } from "../../../hooks";
|
||||||
|
|
||||||
|
export default function FieldDetails({ data, tid, index }) {
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const { updateField, deleteField } = useTables();
|
||||||
|
const [editField, setEditField] = useState({});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div className="font-semibold">Default value</div>
|
||||||
|
<Input
|
||||||
|
className="my-2"
|
||||||
|
placeholder="Set default"
|
||||||
|
value={data.default}
|
||||||
|
disabled={
|
||||||
|
data.type === "BLOB" ||
|
||||||
|
data.type === "JSON" ||
|
||||||
|
data.type === "TEXT" ||
|
||||||
|
data.type === "UUID" ||
|
||||||
|
data.increment
|
||||||
|
}
|
||||||
|
onChange={(value) => updateField(tid, index, { 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: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: editField,
|
||||||
|
redo: { default: e.target.value },
|
||||||
|
message: `Edit table field default to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{(data.type === "ENUM" || data.type === "SET") && (
|
||||||
|
<>
|
||||||
|
<div className="font-semibold mb-1">{data.type} values</div>
|
||||||
|
<TagInput
|
||||||
|
separator={[",", ", ", " ,"]}
|
||||||
|
value={data.values}
|
||||||
|
validateStatus={
|
||||||
|
!data.values || data.values.length === 0 ? "error" : "default"
|
||||||
|
}
|
||||||
|
className="my-2"
|
||||||
|
placeholder="Use ',' for batch input"
|
||||||
|
onChange={(v) => updateField(tid, index, { values: v })}
|
||||||
|
onFocus={() => setEditField({ values: data.values })}
|
||||||
|
onBlur={() => {
|
||||||
|
if (
|
||||||
|
JSON.stringify(editField.values) === JSON.stringify(data.values)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: editField,
|
||||||
|
redo: { values: data.values },
|
||||||
|
message: `Edit table field values to "${JSON.stringify(
|
||||||
|
data.values
|
||||||
|
)}"`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{isSized(data.type) && (
|
||||||
|
<>
|
||||||
|
<div className="font-semibold">Size</div>
|
||||||
|
<InputNumber
|
||||||
|
className="my-2 w-full"
|
||||||
|
placeholder="Set length"
|
||||||
|
value={data.size}
|
||||||
|
onChange={(value) => updateField(tid, index, { 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: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: editField,
|
||||||
|
redo: { size: e.target.value },
|
||||||
|
message: `Edit table field size to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{hasPrecision(data.type) && (
|
||||||
|
<>
|
||||||
|
<div className="font-semibold">Precision</div>
|
||||||
|
<Input
|
||||||
|
className="my-2 w-full"
|
||||||
|
placeholder="Set precision: (size, d)"
|
||||||
|
validateStatus={
|
||||||
|
/^\(\d+,\s*\d+\)$|^$/.test(data.size) ? "default" : "error"
|
||||||
|
}
|
||||||
|
value={data.size}
|
||||||
|
onChange={(value) => updateField(tid, index, { 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: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: editField,
|
||||||
|
redo: { size: e.target.value },
|
||||||
|
message: `Edit table field precision to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{hasCheck(data.type) && (
|
||||||
|
<>
|
||||||
|
<div className="font-semibold">Check Expression</div>
|
||||||
|
<Input
|
||||||
|
className="mt-2"
|
||||||
|
placeholder="Set constraint"
|
||||||
|
value={data.check}
|
||||||
|
disabled={data.increment}
|
||||||
|
onChange={(value) => updateField(tid, index, { 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: tid,
|
||||||
|
fid: index,
|
||||||
|
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 appear 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={data.unique}
|
||||||
|
onChange={(checkedValues) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: {
|
||||||
|
[checkedValues.target.value]: !checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
[checkedValues.target.value]: checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateField(tid, index, {
|
||||||
|
[checkedValues.target.value]: checkedValues.target.checked,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-between items-center my-3">
|
||||||
|
<div className="font-medium">Autoincrement</div>
|
||||||
|
<Checkbox
|
||||||
|
value="increment"
|
||||||
|
checked={data.increment}
|
||||||
|
disabled={
|
||||||
|
!(
|
||||||
|
data.type === "INT" ||
|
||||||
|
data.type === "BIGINT" ||
|
||||||
|
data.type === "SMALLINT"
|
||||||
|
)
|
||||||
|
}
|
||||||
|
onChange={(checkedValues) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: {
|
||||||
|
[checkedValues.target.value]: !checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
[checkedValues.target.value]: checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
message: `Edit table field to${
|
||||||
|
data.increment ? " not" : ""
|
||||||
|
} auto increment`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateField(tid, index, {
|
||||||
|
increment: !data.increment,
|
||||||
|
check: data.increment ? data.check : "",
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="font-semibold">Comment</div>
|
||||||
|
<TextArea
|
||||||
|
className="my-2"
|
||||||
|
placeholder="Add comment"
|
||||||
|
value={data.comment}
|
||||||
|
autosize
|
||||||
|
rows={2}
|
||||||
|
onChange={(value) => updateField(tid, index, { 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: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: editField,
|
||||||
|
redo: { comment: e.target.value },
|
||||||
|
message: `Edit field comment to "${e.target.value}"`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
block
|
||||||
|
onClick={() => deleteField(data, tid)}
|
||||||
|
>
|
||||||
|
Delete field
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
143
src/components/EditorSidePanel/TablesTab/IndexDetails.jsx
Normal file
143
src/components/EditorSidePanel/TablesTab/IndexDetails.jsx
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
import { Action, ObjectType } from "../../../data/constants";
|
||||||
|
import { Input, Button, Popover, Checkbox, Select } from "@douyinfe/semi-ui";
|
||||||
|
import { IconMore, IconDeleteStroked } from "@douyinfe/semi-icons";
|
||||||
|
import { useTables, useUndoRedo } from "../../../hooks";
|
||||||
|
|
||||||
|
export default function IndexDetails({ data, fields, iid, tid }) {
|
||||||
|
const { tables, updateTable } = useTables();
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="flex justify-between items-center mb-2">
|
||||||
|
<Select
|
||||||
|
placeholder="Select fields"
|
||||||
|
multiple
|
||||||
|
validateStatus={data.fields.length === 0 ? "error" : "default"}
|
||||||
|
optionList={fields}
|
||||||
|
className="w-full"
|
||||||
|
value={data.fields}
|
||||||
|
onChange={(value) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "index",
|
||||||
|
tid: tid,
|
||||||
|
iid: iid,
|
||||||
|
undo: {
|
||||||
|
fields: [...data.fields],
|
||||||
|
name: `${data.fields.join("_")}_index`,
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
fields: [...value],
|
||||||
|
name: `${value.join("_")}_index`,
|
||||||
|
},
|
||||||
|
message: `Edit index fields to "${JSON.stringify(value)}"`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateTable(tid, {
|
||||||
|
indices: tables[tid].indices.map((index) =>
|
||||||
|
index.id === iid
|
||||||
|
? {
|
||||||
|
...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={data.name} placeholder="Index name" disabled />
|
||||||
|
<div className="flex justify-between items-center my-3">
|
||||||
|
<div className="font-medium">Unique</div>
|
||||||
|
<Checkbox
|
||||||
|
value="unique"
|
||||||
|
checked={data.unique}
|
||||||
|
onChange={(checkedValues) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "index",
|
||||||
|
tid: tid,
|
||||||
|
iid: iid,
|
||||||
|
undo: {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
!checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
message: `Edit table field to${
|
||||||
|
data.unique ? " not" : ""
|
||||||
|
} unique`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateTable(tid, {
|
||||||
|
indices: tables[tid].indices.map((index) =>
|
||||||
|
index.id === iid
|
||||||
|
? {
|
||||||
|
...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: tid,
|
||||||
|
data: data,
|
||||||
|
message: `Delete index`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateTable(tid, {
|
||||||
|
indices: tables[tid].indices
|
||||||
|
.filter((e) => e.id !== iid)
|
||||||
|
.map((e, j) => ({
|
||||||
|
...e,
|
||||||
|
id: j,
|
||||||
|
})),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="rightTop"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<Button
|
||||||
|
icon={<IconMore />}
|
||||||
|
type="tertiary"
|
||||||
|
style={{ marginLeft: "12px" }}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
44
src/components/EditorSidePanel/TablesTab/SearchBar.jsx
Normal file
44
src/components/EditorSidePanel/TablesTab/SearchBar.jsx
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { useSelect, useTables } from "../../../hooks";
|
||||||
|
import { AutoComplete } from "@douyinfe/semi-ui";
|
||||||
|
import { IconSearch } from "@douyinfe/semi-icons";
|
||||||
|
|
||||||
|
export default function SearchBar() {
|
||||||
|
const { tables } = useTables();
|
||||||
|
const { setSelectedElement } = useSelect();
|
||||||
|
const [searchText, setSearchText] = useState("");
|
||||||
|
const [filteredResult, setFilteredResult] = useState(
|
||||||
|
tables.map((t) => t.name)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleStringSearch = (value) => {
|
||||||
|
setFilteredResult(
|
||||||
|
tables.map((t) => t.name).filter((i) => i.includes(value))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AutoComplete
|
||||||
|
data={filteredResult}
|
||||||
|
value={searchText}
|
||||||
|
showClear
|
||||||
|
prefix={<IconSearch />}
|
||||||
|
placeholder="Search..."
|
||||||
|
onSearch={(v) => handleStringSearch(v)}
|
||||||
|
emptyContent={<div className="p-3 popover-theme">No tables found</div>}
|
||||||
|
onChange={(v) => setSearchText(v)}
|
||||||
|
onSelect={(v) => {
|
||||||
|
const { id } = tables.find((t) => t.name === v);
|
||||||
|
setSelectedElement((prev) => ({
|
||||||
|
...prev,
|
||||||
|
id: id,
|
||||||
|
open: true,
|
||||||
|
}));
|
||||||
|
document
|
||||||
|
.getElementById(`scroll_table_${id}`)
|
||||||
|
.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
194
src/components/EditorSidePanel/TablesTab/TableField.jsx
Normal file
194
src/components/EditorSidePanel/TablesTab/TableField.jsx
Normal file
@ -0,0 +1,194 @@
|
|||||||
|
import { Action, ObjectType, sqlDataTypes } from "../../../data/constants";
|
||||||
|
import { Row, Col, Input, Button, Popover, Select } from "@douyinfe/semi-ui";
|
||||||
|
import { IconMore, IconKeyStroked } from "@douyinfe/semi-icons";
|
||||||
|
import { getSize, hasCheck, hasPrecision, isSized } from "../../../utils/toSQL";
|
||||||
|
import { useTables, useTypes, useUndoRedo } from "../../../hooks";
|
||||||
|
import { useState } from "react";
|
||||||
|
import FieldDetails from "./FieldDetails";
|
||||||
|
|
||||||
|
export default function TableField({ data, tid, index }) {
|
||||||
|
const { updateField } = useTables();
|
||||||
|
const { types } = useTypes();
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const [editField, setEditField] = useState({});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row gutter={6} className="hover-1 my-2">
|
||||||
|
<Col span={7}>
|
||||||
|
<Input
|
||||||
|
value={data.name}
|
||||||
|
validateStatus={data.name === "" ? "error" : "default"}
|
||||||
|
placeholder="Name"
|
||||||
|
onChange={(value) => updateField(tid, index, { 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: tid,
|
||||||
|
fid: index,
|
||||||
|
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={data.type}
|
||||||
|
validateStatus={data.type === "" ? "error" : "default"}
|
||||||
|
placeholder="Type"
|
||||||
|
onChange={(value) => {
|
||||||
|
if (value === data.type) return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: { type: data.type },
|
||||||
|
redo: { type: value },
|
||||||
|
message: `Edit table field type to ${value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
const incr =
|
||||||
|
data.increment &&
|
||||||
|
(value === "INT" || value === "BIGINT" || value === "SMALLINT");
|
||||||
|
if (value === "ENUM" || value === "SET") {
|
||||||
|
updateField(tid, index, {
|
||||||
|
type: value,
|
||||||
|
default: "",
|
||||||
|
values: data.values ? [...data.values] : [],
|
||||||
|
increment: incr,
|
||||||
|
});
|
||||||
|
} else if (isSized(value) || hasPrecision(value)) {
|
||||||
|
updateField(tid, index, {
|
||||||
|
type: value,
|
||||||
|
size: getSize(value),
|
||||||
|
increment: incr,
|
||||||
|
});
|
||||||
|
} else if (
|
||||||
|
value === "BLOB" ||
|
||||||
|
value === "JSON" ||
|
||||||
|
value === "UUID" ||
|
||||||
|
value === "TEXT" ||
|
||||||
|
incr
|
||||||
|
) {
|
||||||
|
updateField(tid, index, {
|
||||||
|
type: value,
|
||||||
|
increment: incr,
|
||||||
|
default: "",
|
||||||
|
size: "",
|
||||||
|
values: [],
|
||||||
|
});
|
||||||
|
} else if (hasCheck(value)) {
|
||||||
|
updateField(tid, index, {
|
||||||
|
type: value,
|
||||||
|
check: "",
|
||||||
|
increment: incr,
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
updateField(tid, index, {
|
||||||
|
type: value,
|
||||||
|
increment: incr,
|
||||||
|
size: "",
|
||||||
|
values: [],
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Button
|
||||||
|
type={data.notNull ? "primary" : "tertiary"}
|
||||||
|
title="Nullable"
|
||||||
|
theme={data.notNull ? "solid" : "light"}
|
||||||
|
onClick={() => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: { notNull: data.notNull },
|
||||||
|
redo: { notNull: !data.notNull },
|
||||||
|
message: `Edit table field to${
|
||||||
|
data.notNull ? "" : " not"
|
||||||
|
} null`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateField(tid, index, { notNull: !data.notNull });
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
?
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Button
|
||||||
|
type={data.primary ? "primary" : "tertiary"}
|
||||||
|
title="Primary"
|
||||||
|
theme={data.primary ? "solid" : "light"}
|
||||||
|
onClick={() => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: index,
|
||||||
|
undo: { primary: data.primary },
|
||||||
|
redo: { primary: !data.primary },
|
||||||
|
message: `Edit table field to${
|
||||||
|
data.primary ? " not" : ""
|
||||||
|
} primary`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateField(tid, index, { primary: !data.primary });
|
||||||
|
}}
|
||||||
|
icon={<IconKeyStroked />}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="px-1 w-[240px] popover-theme">
|
||||||
|
<FieldDetails data={data} index={index} tid={tid} />
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="right"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<Button type="tertiary" icon={<IconMore />} />
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
266
src/components/EditorSidePanel/TablesTab/TableInfo.jsx
Normal file
266
src/components/EditorSidePanel/TablesTab/TableInfo.jsx
Normal file
@ -0,0 +1,266 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import {
|
||||||
|
Collapse,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Input,
|
||||||
|
TextArea,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Popover,
|
||||||
|
Toast,
|
||||||
|
} from "@douyinfe/semi-ui";
|
||||||
|
import { IconDeleteStroked } from "@douyinfe/semi-icons";
|
||||||
|
import { useTables, useUndoRedo } from "../../../hooks";
|
||||||
|
import { Action, ObjectType, defaultBlue } from "../../../data/constants";
|
||||||
|
import ColorPallete from "../../ColorPallete";
|
||||||
|
import TableField from "./TableField";
|
||||||
|
import IndexDetails from "./IndexDetails";
|
||||||
|
|
||||||
|
export default function TableInfo({ data }) {
|
||||||
|
const [indexActiveKey, setIndexActiveKey] = useState("");
|
||||||
|
const { deleteTable, updateTable } = useTables();
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const [editField, setEditField] = useState({});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id={`scroll_table_${data.id}`}>
|
||||||
|
<Collapse.Panel
|
||||||
|
header={
|
||||||
|
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
|
{data.name}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
itemKey={`${data.id}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center mb-2.5">
|
||||||
|
<div className="text-md font-semibold">Name: </div>
|
||||||
|
<Input
|
||||||
|
value={data.name}
|
||||||
|
validateStatus={data.name === "" ? "error" : "default"}
|
||||||
|
placeholder="Name"
|
||||||
|
className="ms-2"
|
||||||
|
onChange={(value) => updateTable(data.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: data.id,
|
||||||
|
undo: editField,
|
||||||
|
redo: { name: e.target.value },
|
||||||
|
message: `Edit table name to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{data.fields.map((f, j) => (
|
||||||
|
<TableField key={"field_" + j} data={f} tid={data.id} index={j} />
|
||||||
|
))}
|
||||||
|
{data.indices.length > 0 && (
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ padding: "4px" }}
|
||||||
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||||
|
headerLine={false}
|
||||||
|
>
|
||||||
|
<Collapse
|
||||||
|
activeKey={indexActiveKey}
|
||||||
|
onChange={(itemKey) => setIndexActiveKey(itemKey)}
|
||||||
|
accordion
|
||||||
|
>
|
||||||
|
<Collapse.Panel header="Indices" itemKey="1">
|
||||||
|
{data.indices.map((idx, k) => (
|
||||||
|
<IndexDetails
|
||||||
|
key={"index_" + k}
|
||||||
|
data={idx}
|
||||||
|
iid={k}
|
||||||
|
tid={data.id}
|
||||||
|
fields={data.fields.map((e) => ({
|
||||||
|
value: e.name,
|
||||||
|
label: e.name,
|
||||||
|
}))}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</Collapse.Panel>
|
||||||
|
</Collapse>
|
||||||
|
</Card>
|
||||||
|
)}
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ padding: "4px" }}
|
||||||
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||||
|
headerLine={false}
|
||||||
|
>
|
||||||
|
<Collapse>
|
||||||
|
<Collapse.Panel header="Comment" itemKey="1">
|
||||||
|
<TextArea
|
||||||
|
field="comment"
|
||||||
|
value={data.comment}
|
||||||
|
autosize
|
||||||
|
placeholder="Add comment"
|
||||||
|
rows={1}
|
||||||
|
onChange={(value) =>
|
||||||
|
updateTable(data.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: data.id,
|
||||||
|
undo: editField,
|
||||||
|
redo: { comment: e.target.value },
|
||||||
|
message: `Edit table comment to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Collapse.Panel>
|
||||||
|
</Collapse>
|
||||||
|
</Card>
|
||||||
|
<Row gutter={6} className="mt-2">
|
||||||
|
<Col span={8}>
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="popover-theme">
|
||||||
|
<ColorPallete
|
||||||
|
currentColor={data.color}
|
||||||
|
onClearColor={() => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "self",
|
||||||
|
tid: data.id,
|
||||||
|
undo: { color: data.color },
|
||||||
|
redo: { color: defaultBlue },
|
||||||
|
message: `Edit table color to default`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateTable(data.id, { color: defaultBlue });
|
||||||
|
}}
|
||||||
|
onPickColor={(c) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "self",
|
||||||
|
tid: data.id,
|
||||||
|
undo: { color: data.color },
|
||||||
|
redo: { color: c },
|
||||||
|
message: `Edit table color to ${c}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateTable(data.id, { color: c });
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="bottomLeft"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
className="h-[32px] w-[32px] rounded mb-2"
|
||||||
|
style={{ backgroundColor: data.color }}
|
||||||
|
/>
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
<Col span={7}>
|
||||||
|
<Button
|
||||||
|
block
|
||||||
|
onClick={() => {
|
||||||
|
setIndexActiveKey("1");
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "index_add",
|
||||||
|
tid: data.id,
|
||||||
|
message: `Add index`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateTable(data.id, {
|
||||||
|
indices: [
|
||||||
|
...data.indices,
|
||||||
|
{
|
||||||
|
id: data.indices.length,
|
||||||
|
name: `index_${data.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: data.id,
|
||||||
|
message: `Add field`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateTable(data.id, {
|
||||||
|
fields: [
|
||||||
|
...data.fields,
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "",
|
||||||
|
default: "",
|
||||||
|
check: "",
|
||||||
|
primary: false,
|
||||||
|
unique: false,
|
||||||
|
notNull: false,
|
||||||
|
increment: false,
|
||||||
|
comment: "",
|
||||||
|
id: data.fields.length,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
block
|
||||||
|
>
|
||||||
|
Add field
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
onClick={() => {
|
||||||
|
Toast.success(`Table deleted!`);
|
||||||
|
deleteTable(data.id);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Collapse.Panel>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
45
src/components/EditorSidePanel/TablesTab/TablesTab.jsx
Normal file
45
src/components/EditorSidePanel/TablesTab/TablesTab.jsx
Normal file
@ -0,0 +1,45 @@
|
|||||||
|
import { Collapse, Row, Col, Button } from "@douyinfe/semi-ui";
|
||||||
|
import { IconPlus } from "@douyinfe/semi-icons";
|
||||||
|
import { useSelect, useTables } from "../../../hooks";
|
||||||
|
import SearchBar from "./SearchBar";
|
||||||
|
import Empty from "../Empty";
|
||||||
|
import TableInfo from "./TableInfo";
|
||||||
|
|
||||||
|
export default function TablesTab() {
|
||||||
|
const { tables, addTable } = useTables();
|
||||||
|
const { selectedElement, setSelectedElement } = useSelect();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={6}>
|
||||||
|
<Col span={16}>
|
||||||
|
<SearchBar />
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Button icon={<IconPlus />} block onClick={() => addTable(true)}>
|
||||||
|
Add table
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{tables.length === 0 ? (
|
||||||
|
<Empty title="No tables" text="Start building your diagram!" />
|
||||||
|
) : (
|
||||||
|
<Collapse
|
||||||
|
activeKey={selectedElement.open ? `${selectedElement.id}` : ""}
|
||||||
|
onChange={(k) =>
|
||||||
|
setSelectedElement((prev) => ({
|
||||||
|
...prev,
|
||||||
|
id: parseInt(k),
|
||||||
|
open: true,
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
accordion
|
||||||
|
>
|
||||||
|
{tables.map((t) => (
|
||||||
|
<TableInfo data={t} key={t.id} />
|
||||||
|
))}
|
||||||
|
</Collapse>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -1,507 +0,0 @@
|
|||||||
import { useState } from "react";
|
|
||||||
import { Action, ObjectType, sqlDataTypes } from "../../data/constants";
|
|
||||||
import {
|
|
||||||
Collapse,
|
|
||||||
Row,
|
|
||||||
Col,
|
|
||||||
Input,
|
|
||||||
TextArea,
|
|
||||||
Button,
|
|
||||||
Card,
|
|
||||||
Select,
|
|
||||||
TagInput,
|
|
||||||
InputNumber,
|
|
||||||
AutoComplete,
|
|
||||||
Toast,
|
|
||||||
Popover,
|
|
||||||
} from "@douyinfe/semi-ui";
|
|
||||||
import {
|
|
||||||
IconDeleteStroked,
|
|
||||||
IconPlus,
|
|
||||||
IconSearch,
|
|
||||||
IconInfoCircle,
|
|
||||||
IconMore,
|
|
||||||
} from "@douyinfe/semi-icons";
|
|
||||||
import { isSized, hasPrecision, getSize } from "../../utils/toSQL";
|
|
||||||
import { useUndoRedo, useTypes } from "../../hooks";
|
|
||||||
import NoElements from "./Empty";
|
|
||||||
|
|
||||||
export default function TypesOverview() {
|
|
||||||
const [value, setValue] = useState("");
|
|
||||||
const { types, addType } = useTypes();
|
|
||||||
const [filteredResult, setFilteredResult] = useState(
|
|
||||||
types.map((t) => t.name)
|
|
||||||
);
|
|
||||||
|
|
||||||
const handleStringSearch = (value) => {
|
|
||||||
setFilteredResult(
|
|
||||||
types.map((t) => t.name).filter((i) => i.includes(value))
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Row gutter={6}>
|
|
||||||
<Col span={13}>
|
|
||||||
<AutoComplete
|
|
||||||
data={filteredResult}
|
|
||||||
value={value}
|
|
||||||
showClear
|
|
||||||
prefix={<IconSearch />}
|
|
||||||
placeholder="Search..."
|
|
||||||
onSearch={(v) => handleStringSearch(v)}
|
|
||||||
emptyContent={
|
|
||||||
<div className="p-3 popover-theme">No types found</div>
|
|
||||||
}
|
|
||||||
onChange={(v) => setValue(v)}
|
|
||||||
onSelect={(v) => {
|
|
||||||
const i = types.findIndex((t) => t.name === v);
|
|
||||||
document
|
|
||||||
.getElementById(`scroll_type_${i}`)
|
|
||||||
.scrollIntoView({ behavior: "smooth" });
|
|
||||||
}}
|
|
||||||
className="w-full"
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col span={8}>
|
|
||||||
<Button icon={<IconPlus />} block onClick={() => addType(true)}>
|
|
||||||
Add type
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
<Col span={3}>
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div className="w-[240px] text-sm space-y-2 popover-theme">
|
|
||||||
<div>
|
|
||||||
This feature is meant for object-relational DBMSs like{" "}
|
|
||||||
<strong>PostgreSQL</strong>.
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
If used for <strong>MySQL</strong> or <strong>MariaDB</strong>{" "}
|
|
||||||
a <code>JSON</code> type will be generated with the
|
|
||||||
corresponding json validation check.
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
If used for <strong>SQLite</strong> it will be translated to a{" "}
|
|
||||||
<code>BLOB</code>.
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
If used for <strong>MSSQL</strong> a type alias to the first
|
|
||||||
field will be generated.
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
showArrow
|
|
||||||
position="rightTop"
|
|
||||||
>
|
|
||||||
<Button theme="borderless" icon={<IconInfoCircle />} />
|
|
||||||
</Popover>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
{types.length <= 0 ? (
|
|
||||||
<NoElements title="No types" text="Make your own custom data types" />
|
|
||||||
) : (
|
|
||||||
<Collapse accordion>
|
|
||||||
{types.map((t, i) => (
|
|
||||||
<TypePanel data={t} key={i} index={i} />
|
|
||||||
))}
|
|
||||||
</Collapse>
|
|
||||||
)}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function TypePanel({ index, data }) {
|
|
||||||
const { types, deleteType, updateType } = useTypes();
|
|
||||||
const { setUndoStack, setRedoStack } = useUndoRedo();
|
|
||||||
const [editField, setEditField] = useState({});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div id={`scroll_type_${index}`}>
|
|
||||||
<Collapse.Panel
|
|
||||||
header={
|
|
||||||
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
|
||||||
{data.name}
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
itemKey={`${index}`}
|
|
||||||
>
|
|
||||||
<div className="flex items-center mb-2.5">
|
|
||||||
<div className="text-md font-semibold">Name: </div>
|
|
||||||
<Input
|
|
||||||
value={data.name}
|
|
||||||
validateStatus={data.name === "" ? "error" : "default"}
|
|
||||||
placeholder="Name"
|
|
||||||
className="ms-2"
|
|
||||||
onChange={(value) => updateType(index, { 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.TYPE,
|
|
||||||
component: "self",
|
|
||||||
tid: index,
|
|
||||||
undo: editField,
|
|
||||||
redo: { name: e.target.value },
|
|
||||||
message: `Edit type name to ${e.target.value}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{data.fields.map((f, j) => (
|
|
||||||
<Row gutter={6} key={j} className="hover-1 my-2">
|
|
||||||
<Col span={10}>
|
|
||||||
<Input
|
|
||||||
value={f.name}
|
|
||||||
validateStatus={f.name === "" ? "error" : "default"}
|
|
||||||
placeholder="Name"
|
|
||||||
onChange={(value) =>
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.map((e, id) =>
|
|
||||||
id === j ? { ...f, name: value } : e
|
|
||||||
),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onFocus={(e) => setEditField({ name: e.target.value })}
|
|
||||||
onBlur={(e) => {
|
|
||||||
if (e.target.value === editField.name) return;
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.TYPE,
|
|
||||||
component: "field",
|
|
||||||
tid: index,
|
|
||||||
fid: j,
|
|
||||||
undo: editField,
|
|
||||||
redo: { name: e.target.value },
|
|
||||||
message: `Edit type field name to ${e.target.value}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Col>
|
|
||||||
<Col span={11}>
|
|
||||||
<Select
|
|
||||||
className="w-full"
|
|
||||||
optionList={[
|
|
||||||
...sqlDataTypes.map((value) => ({
|
|
||||||
label: value,
|
|
||||||
value: value,
|
|
||||||
})),
|
|
||||||
...types
|
|
||||||
.filter((type) => type.name !== data.name)
|
|
||||||
.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.TYPE,
|
|
||||||
component: "field",
|
|
||||||
tid: index,
|
|
||||||
fid: j,
|
|
||||||
undo: { type: f.type },
|
|
||||||
redo: { type: value },
|
|
||||||
message: `Edit type field type to ${value}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
if (value === "ENUM" || value === "SET") {
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.map((e, id) =>
|
|
||||||
id === j
|
|
||||||
? {
|
|
||||||
...f,
|
|
||||||
type: value,
|
|
||||||
values: f.values ? [...f.values] : [],
|
|
||||||
}
|
|
||||||
: e
|
|
||||||
),
|
|
||||||
});
|
|
||||||
} else if (isSized(value) || hasPrecision(value)) {
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.map((e, id) =>
|
|
||||||
id === j
|
|
||||||
? { ...f, type: value, size: getSize(value) }
|
|
||||||
: e
|
|
||||||
),
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.map((e, id) =>
|
|
||||||
id === j ? { ...f, type: value } : e
|
|
||||||
),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
></Select>
|
|
||||||
</Col>
|
|
||||||
<Col span={3}>
|
|
||||||
<Popover
|
|
||||||
content={
|
|
||||||
<div className="popover-theme w-[240px]">
|
|
||||||
{(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) =>
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.map((e, id) =>
|
|
||||||
id === j ? { ...f, values: v } : e
|
|
||||||
),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
onFocus={() => setEditField({ values: f.values })}
|
|
||||||
onBlur={() => {
|
|
||||||
if (
|
|
||||||
JSON.stringify(editField.values) ===
|
|
||||||
JSON.stringify(f.values)
|
|
||||||
)
|
|
||||||
return;
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.TYPE,
|
|
||||||
component: "field",
|
|
||||||
tid: index,
|
|
||||||
fid: j,
|
|
||||||
undo: editField,
|
|
||||||
redo: { values: f.values },
|
|
||||||
message: `Edit type 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) =>
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.map((e, id) =>
|
|
||||||
id === j ? { ...f, size: value } : e
|
|
||||||
),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
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: index,
|
|
||||||
fid: j,
|
|
||||||
undo: editField,
|
|
||||||
redo: { size: e.target.value },
|
|
||||||
message: `Edit type 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) =>
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.map((e, id) =>
|
|
||||||
id === j ? { ...f, size: value } : e
|
|
||||||
),
|
|
||||||
})
|
|
||||||
}
|
|
||||||
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: index,
|
|
||||||
fid: j,
|
|
||||||
undo: editField,
|
|
||||||
redo: { size: e.target.value },
|
|
||||||
message: `Edit type field precision to ${e.target.value}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
<Button
|
|
||||||
icon={<IconDeleteStroked />}
|
|
||||||
block
|
|
||||||
type="danger"
|
|
||||||
onClick={() => {
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.TYPE,
|
|
||||||
component: "field_delete",
|
|
||||||
tid: index,
|
|
||||||
fid: j,
|
|
||||||
data: f,
|
|
||||||
message: `Delete field`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
updateType(index, {
|
|
||||||
fields: data.fields.filter((field, k) => k !== j),
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Delete field
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
}
|
|
||||||
showArrow
|
|
||||||
trigger="click"
|
|
||||||
position="right"
|
|
||||||
>
|
|
||||||
<Button icon={<IconMore />} type="tertiary" />
|
|
||||||
</Popover>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
))}
|
|
||||||
<Card
|
|
||||||
bodyStyle={{ padding: "4px" }}
|
|
||||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
|
||||||
headerLine={false}
|
|
||||||
>
|
|
||||||
<Collapse>
|
|
||||||
<Collapse.Panel header="Comment" itemKey="1">
|
|
||||||
<TextArea
|
|
||||||
field="comment"
|
|
||||||
value={data.comment}
|
|
||||||
autosize
|
|
||||||
placeholder="Add comment"
|
|
||||||
rows={1}
|
|
||||||
onChange={(value) =>
|
|
||||||
updateType(index, { 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.TYPE,
|
|
||||||
component: "self",
|
|
||||||
tid: index,
|
|
||||||
undo: editField,
|
|
||||||
redo: { comment: e.target.value },
|
|
||||||
message: `Edit type comment to ${e.target.value}`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Collapse.Panel>
|
|
||||||
</Collapse>
|
|
||||||
</Card>
|
|
||||||
<Row gutter={6} className="mt-2">
|
|
||||||
<Col span={12}>
|
|
||||||
<Button
|
|
||||||
icon={<IconPlus />}
|
|
||||||
onClick={() => {
|
|
||||||
setUndoStack((prev) => [
|
|
||||||
...prev,
|
|
||||||
{
|
|
||||||
action: Action.EDIT,
|
|
||||||
element: ObjectType.TYPE,
|
|
||||||
component: "field_add",
|
|
||||||
tid: index,
|
|
||||||
message: `Add field to type`,
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setRedoStack([]);
|
|
||||||
updateType(index, {
|
|
||||||
fields: [
|
|
||||||
...data.fields,
|
|
||||||
{
|
|
||||||
name: "",
|
|
||||||
type: "",
|
|
||||||
},
|
|
||||||
],
|
|
||||||
});
|
|
||||||
}}
|
|
||||||
block
|
|
||||||
>
|
|
||||||
Add field
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
<Col span={12}>
|
|
||||||
<Button
|
|
||||||
icon={<IconDeleteStroked />}
|
|
||||||
type="danger"
|
|
||||||
onClick={() => {
|
|
||||||
Toast.success(`Type deleted!`);
|
|
||||||
deleteType(index);
|
|
||||||
}}
|
|
||||||
block
|
|
||||||
>
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</Col>
|
|
||||||
</Row>
|
|
||||||
</Collapse.Panel>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
39
src/components/EditorSidePanel/TypesTab/SearchBar.jsx
Normal file
39
src/components/EditorSidePanel/TypesTab/SearchBar.jsx
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { AutoComplete } from "@douyinfe/semi-ui";
|
||||||
|
import { IconSearch } from "@douyinfe/semi-icons";
|
||||||
|
import { useTypes } from "../../../hooks";
|
||||||
|
|
||||||
|
export default function Searchbar() {
|
||||||
|
const { types } = useTypes();
|
||||||
|
const [value, setValue] = useState("");
|
||||||
|
|
||||||
|
const [filteredResult, setFilteredResult] = useState(
|
||||||
|
types.map((t) => t.name)
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleStringSearch = (value) => {
|
||||||
|
setFilteredResult(
|
||||||
|
types.map((t) => t.name).filter((i) => i.includes(value))
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AutoComplete
|
||||||
|
data={filteredResult}
|
||||||
|
value={value}
|
||||||
|
showClear
|
||||||
|
prefix={<IconSearch />}
|
||||||
|
placeholder="Search..."
|
||||||
|
onSearch={(v) => handleStringSearch(v)}
|
||||||
|
emptyContent={<div className="p-3 popover-theme">No types found</div>}
|
||||||
|
onChange={(v) => setValue(v)}
|
||||||
|
onSelect={(v) => {
|
||||||
|
const i = types.findIndex((t) => t.name === v);
|
||||||
|
document
|
||||||
|
.getElementById(`scroll_type_${i}`)
|
||||||
|
.scrollIntoView({ behavior: "smooth" });
|
||||||
|
}}
|
||||||
|
className="w-full"
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
283
src/components/EditorSidePanel/TypesTab/TypeField.jsx
Normal file
283
src/components/EditorSidePanel/TypesTab/TypeField.jsx
Normal file
@ -0,0 +1,283 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Action, ObjectType, sqlDataTypes } from "../../../data/constants";
|
||||||
|
import {
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Input,
|
||||||
|
Button,
|
||||||
|
Select,
|
||||||
|
TagInput,
|
||||||
|
InputNumber,
|
||||||
|
Popover,
|
||||||
|
} from "@douyinfe/semi-ui";
|
||||||
|
import { IconDeleteStroked, IconMore } from "@douyinfe/semi-icons";
|
||||||
|
import { isSized, hasPrecision, getSize } from "../../../utils/toSQL";
|
||||||
|
import { useUndoRedo, useTypes } from "../../../hooks";
|
||||||
|
|
||||||
|
export default function TypeField({ data, tid, fid }) {
|
||||||
|
const { types, updateType } = useTypes();
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const [editField, setEditField] = useState({});
|
||||||
|
return (
|
||||||
|
<Row gutter={6} className="hover-1 my-2">
|
||||||
|
<Col span={10}>
|
||||||
|
<Input
|
||||||
|
value={data.name}
|
||||||
|
validateStatus={data.name === "" ? "error" : "default"}
|
||||||
|
placeholder="Name"
|
||||||
|
onChange={(value) =>
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields.map((e, id) =>
|
||||||
|
id === fid ? { ...data, name: value } : e
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onFocus={(e) => setEditField({ name: e.target.value })}
|
||||||
|
onBlur={(e) => {
|
||||||
|
if (e.target.value === editField.name) return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TYPE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: fid,
|
||||||
|
undo: editField,
|
||||||
|
redo: { name: e.target.value },
|
||||||
|
message: `Edit type field name to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={11}>
|
||||||
|
<Select
|
||||||
|
className="w-full"
|
||||||
|
optionList={[
|
||||||
|
...sqlDataTypes.map((value) => ({
|
||||||
|
label: value,
|
||||||
|
value: value,
|
||||||
|
})),
|
||||||
|
...types
|
||||||
|
.filter(
|
||||||
|
(type) => type.name.toLowerCase() !== data.name.toLowerCase()
|
||||||
|
)
|
||||||
|
.map((type) => ({
|
||||||
|
label: type.name.toUpperCase(),
|
||||||
|
value: type.name.toUpperCase(),
|
||||||
|
})),
|
||||||
|
]}
|
||||||
|
filter
|
||||||
|
value={data.type}
|
||||||
|
validateStatus={data.type === "" ? "error" : "default"}
|
||||||
|
placeholder="Type"
|
||||||
|
onChange={(value) => {
|
||||||
|
if (value === data.type) return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TYPE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: fid,
|
||||||
|
undo: { type: data?.type },
|
||||||
|
redo: { type: value },
|
||||||
|
message: `Edit type field type to ${value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
if (value === "ENUM" || value === "SET") {
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields?.map((e, id) =>
|
||||||
|
id === fid
|
||||||
|
? {
|
||||||
|
...data,
|
||||||
|
type: value,
|
||||||
|
values: data.values ? [...data.values] : [],
|
||||||
|
}
|
||||||
|
: e
|
||||||
|
),
|
||||||
|
});
|
||||||
|
} else if (isSized(value) || hasPrecision(value)) {
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields.map((e, id) =>
|
||||||
|
id === fid
|
||||||
|
? { ...data, type: value, size: getSize(value) }
|
||||||
|
: e
|
||||||
|
),
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields.map((e, id) =>
|
||||||
|
id === fid ? { ...data, type: value } : e
|
||||||
|
),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="popover-theme w-[240px]">
|
||||||
|
{(data.type === "ENUM" || data.type === "SET") && (
|
||||||
|
<>
|
||||||
|
<div className="font-semibold mb-1">{data.type} values</div>
|
||||||
|
<TagInput
|
||||||
|
separator={[",", ", ", " ,"]}
|
||||||
|
value={data.values}
|
||||||
|
validateStatus={
|
||||||
|
!data.values || data.values.length === 0
|
||||||
|
? "error"
|
||||||
|
: "default"
|
||||||
|
}
|
||||||
|
className="my-2"
|
||||||
|
placeholder="Use ',' for batch input"
|
||||||
|
onChange={(v) =>
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields.map((e, id) =>
|
||||||
|
id === fid ? { ...data, values: v } : e
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onFocus={() => setEditField({ values: data.values })}
|
||||||
|
onBlur={() => {
|
||||||
|
if (
|
||||||
|
JSON.stringify(editField.values) ===
|
||||||
|
JSON.stringify(data.values)
|
||||||
|
)
|
||||||
|
return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TYPE,
|
||||||
|
component: "field",
|
||||||
|
tid: tid,
|
||||||
|
fid: fid,
|
||||||
|
undo: editField,
|
||||||
|
redo: { values: data.values },
|
||||||
|
message: `Edit type field values to "${JSON.stringify(
|
||||||
|
data.values
|
||||||
|
)}"`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{isSized(data.type) && (
|
||||||
|
<>
|
||||||
|
<div className="font-semibold">Size</div>
|
||||||
|
<InputNumber
|
||||||
|
className="my-2 w-full"
|
||||||
|
placeholder="Set length"
|
||||||
|
value={data.size}
|
||||||
|
onChange={(value) =>
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields.map((e, id) =>
|
||||||
|
id === fid ? { ...data, size: value } : e
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
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: tid,
|
||||||
|
fid: fid,
|
||||||
|
undo: editField,
|
||||||
|
redo: { size: e.target.value },
|
||||||
|
message: `Edit type field size to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
{hasPrecision(data.type) && (
|
||||||
|
<>
|
||||||
|
<div className="font-semibold">Precision</div>
|
||||||
|
<Input
|
||||||
|
className="my-2 w-full"
|
||||||
|
placeholder="Set precision: (size, d)"
|
||||||
|
validateStatus={
|
||||||
|
/^\(\d+,\s*\d+\)$|^$/.test(data.size)
|
||||||
|
? "default"
|
||||||
|
: "error"
|
||||||
|
}
|
||||||
|
value={data.size}
|
||||||
|
onChange={(value) =>
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields.map((e, id) =>
|
||||||
|
id === fid ? { ...data, size: value } : e
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
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: tid,
|
||||||
|
fid: fid,
|
||||||
|
undo: editField,
|
||||||
|
redo: { size: e.target.value },
|
||||||
|
message: `Edit type field precision to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
block
|
||||||
|
type="danger"
|
||||||
|
onClick={() => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TYPE,
|
||||||
|
component: "field_delete",
|
||||||
|
tid: tid,
|
||||||
|
fid: fid,
|
||||||
|
data: data,
|
||||||
|
message: `Delete field`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
updateType(tid, {
|
||||||
|
fields: types[tid].fields.filter((_, k) => k !== fid),
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete field
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
showArrow
|
||||||
|
trigger="click"
|
||||||
|
position="right"
|
||||||
|
>
|
||||||
|
<Button icon={<IconMore />} type="tertiary" />
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
}
|
||||||
147
src/components/EditorSidePanel/TypesTab/TypeInfo.jsx
Normal file
147
src/components/EditorSidePanel/TypesTab/TypeInfo.jsx
Normal file
@ -0,0 +1,147 @@
|
|||||||
|
import { useState } from "react";
|
||||||
|
import { Action, ObjectType } from "../../../data/constants";
|
||||||
|
import {
|
||||||
|
Collapse,
|
||||||
|
Row,
|
||||||
|
Col,
|
||||||
|
Input,
|
||||||
|
TextArea,
|
||||||
|
Button,
|
||||||
|
Card,
|
||||||
|
Toast,
|
||||||
|
} from "@douyinfe/semi-ui";
|
||||||
|
import { IconDeleteStroked, IconPlus } from "@douyinfe/semi-icons";
|
||||||
|
import { useUndoRedo, useTypes } from "../../../hooks";
|
||||||
|
import TypeField from "./TypeField";
|
||||||
|
|
||||||
|
export default function TypeInfo({ index, data }) {
|
||||||
|
const { deleteType, updateType } = useTypes();
|
||||||
|
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||||
|
const [editField, setEditField] = useState({});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div id={`scroll_type_${index}`}>
|
||||||
|
<Collapse.Panel
|
||||||
|
header={
|
||||||
|
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
|
{data.name}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
itemKey={`${index}`}
|
||||||
|
>
|
||||||
|
<div className="flex items-center mb-2.5">
|
||||||
|
<div className="text-md font-semibold">Name: </div>
|
||||||
|
<Input
|
||||||
|
value={data.name}
|
||||||
|
validateStatus={data.name === "" ? "error" : "default"}
|
||||||
|
placeholder="Name"
|
||||||
|
className="ms-2"
|
||||||
|
onChange={(value) => updateType(index, { 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.TYPE,
|
||||||
|
component: "self",
|
||||||
|
tid: index,
|
||||||
|
undo: editField,
|
||||||
|
redo: { name: e.target.value },
|
||||||
|
message: `Edit type name to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
{data.fields.map((f, j) => (
|
||||||
|
<TypeField key={j} data={f} fid={j} tid={index} />
|
||||||
|
))}
|
||||||
|
<Card
|
||||||
|
bodyStyle={{ padding: "4px" }}
|
||||||
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||||
|
headerLine={false}
|
||||||
|
>
|
||||||
|
<Collapse>
|
||||||
|
<Collapse.Panel header="Comment" itemKey="1">
|
||||||
|
<TextArea
|
||||||
|
field="comment"
|
||||||
|
value={data.comment}
|
||||||
|
autosize
|
||||||
|
placeholder="Add comment"
|
||||||
|
rows={1}
|
||||||
|
onChange={(value) =>
|
||||||
|
updateType(index, { 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.TYPE,
|
||||||
|
component: "self",
|
||||||
|
tid: index,
|
||||||
|
undo: editField,
|
||||||
|
redo: { comment: e.target.value },
|
||||||
|
message: `Edit type comment to ${e.target.value}`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Collapse.Panel>
|
||||||
|
</Collapse>
|
||||||
|
</Card>
|
||||||
|
<Row gutter={6} className="mt-2">
|
||||||
|
<Col span={12}>
|
||||||
|
<Button
|
||||||
|
icon={<IconPlus />}
|
||||||
|
onClick={() => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TYPE,
|
||||||
|
component: "field_add",
|
||||||
|
tid: index,
|
||||||
|
message: `Add field to type`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
updateType(index, {
|
||||||
|
fields: [
|
||||||
|
...data.fields,
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
block
|
||||||
|
>
|
||||||
|
Add field
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col span={12}>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
onClick={() => {
|
||||||
|
Toast.success(`Type deleted!`);
|
||||||
|
deleteType(index);
|
||||||
|
}}
|
||||||
|
block
|
||||||
|
>
|
||||||
|
Delete
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</Collapse.Panel>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
63
src/components/EditorSidePanel/TypesTab/TypesTab.jsx
Normal file
63
src/components/EditorSidePanel/TypesTab/TypesTab.jsx
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
import { Collapse, Row, Col, Button, Popover } from "@douyinfe/semi-ui";
|
||||||
|
import { IconPlus, IconInfoCircle } from "@douyinfe/semi-icons";
|
||||||
|
import Searchbar from "./SearchBar";
|
||||||
|
import Empty from "../Empty";
|
||||||
|
import { useTypes } from "../../../hooks";
|
||||||
|
import TypeInfo from "./TypeInfo";
|
||||||
|
|
||||||
|
export default function TypesTab() {
|
||||||
|
const { types, addType } = useTypes();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Row gutter={6}>
|
||||||
|
<Col span={13}>
|
||||||
|
<Searchbar />
|
||||||
|
</Col>
|
||||||
|
<Col span={8}>
|
||||||
|
<Button icon={<IconPlus />} block onClick={() => addType(true)}>
|
||||||
|
Add type
|
||||||
|
</Button>
|
||||||
|
</Col>
|
||||||
|
<Col span={3}>
|
||||||
|
<Popover
|
||||||
|
content={
|
||||||
|
<div className="w-[240px] text-sm space-y-2 popover-theme">
|
||||||
|
<div>
|
||||||
|
This feature is meant for object-relational DBMSs like{" "}
|
||||||
|
<strong>PostgreSQL</strong>.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
If used for <strong>MySQL</strong> or <strong>MariaDB</strong>{" "}
|
||||||
|
a <code>JSON</code> type will be generated with the
|
||||||
|
corresponding json validation check.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
If used for <strong>SQLite</strong> it will be translated to a{" "}
|
||||||
|
<code>BLOB</code>.
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
If used for <strong>MSSQL</strong> a type alias to the first
|
||||||
|
field will be generated.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
showArrow
|
||||||
|
position="rightTop"
|
||||||
|
>
|
||||||
|
<Button theme="borderless" icon={<IconInfoCircle />} />
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
{types.length <= 0 ? (
|
||||||
|
<Empty title="No types" text="Make your own custom data types" />
|
||||||
|
) : (
|
||||||
|
<Collapse accordion>
|
||||||
|
{types.map((t, i) => (
|
||||||
|
<TypeInfo data={t} key={i} index={i} />
|
||||||
|
))}
|
||||||
|
</Collapse>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -125,6 +125,56 @@ export default function TablesContextProvider({ children }) {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const deleteField = (field, tid) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field_delete",
|
||||||
|
tid: tid,
|
||||||
|
data: field,
|
||||||
|
message: `Delete field`,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setRelationships((prev) =>
|
||||||
|
prev
|
||||||
|
.filter(
|
||||||
|
(e) =>
|
||||||
|
!(
|
||||||
|
(e.startTableId === tid && e.startFieldId === field.id) ||
|
||||||
|
(e.endTableId === tid && e.endFieldId === field.id)
|
||||||
|
)
|
||||||
|
)
|
||||||
|
.map((e, i) => ({ ...e, id: i }))
|
||||||
|
);
|
||||||
|
setRelationships((prev) => {
|
||||||
|
return prev.map((e) => {
|
||||||
|
if (e.startTableId === tid && e.startFieldId > field.id) {
|
||||||
|
return {
|
||||||
|
...e,
|
||||||
|
startFieldId: e.startFieldId - 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (e.endTableId === tid && e.endFieldId > field.id) {
|
||||||
|
return {
|
||||||
|
...e,
|
||||||
|
endFieldId: e.endFieldId - 1,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return e;
|
||||||
|
});
|
||||||
|
});
|
||||||
|
updateTable(tid, {
|
||||||
|
fields: tables[tid].fields
|
||||||
|
.filter((e) => e.id !== field.id)
|
||||||
|
.map((t, i) => {
|
||||||
|
return { ...t, id: i };
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const addRelationship = (data, addToHistory = true) => {
|
const addRelationship = (data, addToHistory = true) => {
|
||||||
if (addToHistory) {
|
if (addToHistory) {
|
||||||
setRelationships((prev) => {
|
setRelationships((prev) => {
|
||||||
@ -175,6 +225,7 @@ export default function TablesContextProvider({ children }) {
|
|||||||
addTable,
|
addTable,
|
||||||
updateTable,
|
updateTable,
|
||||||
updateField,
|
updateField,
|
||||||
|
deleteField,
|
||||||
deleteTable,
|
deleteTable,
|
||||||
relationships,
|
relationships,
|
||||||
setRelationships,
|
setRelationships,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user