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 [editField, setEditField] = useState({});
|
||||
const { layout } = useLayout();
|
||||
const { deleteTable, updateTable, updateField, setRelationships } =
|
||||
useTables();
|
||||
const {
|
||||
deleteTable,
|
||||
updateTable,
|
||||
updateField,
|
||||
deleteField,
|
||||
setRelationships,
|
||||
} = useTables();
|
||||
const { settings } = useSettings();
|
||||
const { types } = useTypes();
|
||||
const { setUndoStack, setRedoStack } = useUndoRedo();
|
||||
@ -1269,63 +1274,7 @@ export default function Table(props) {
|
||||
backgroundColor: "#d42020",
|
||||
}}
|
||||
icon={<IconMinus />}
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field_delete",
|
||||
tid: props.tableData.id,
|
||||
data: fieldData,
|
||||
message: `Delete field`,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
setRelationships((prev) =>
|
||||
prev
|
||||
.filter(
|
||||
(e) =>
|
||||
!(
|
||||
(e.startTableId === props.tableData.id &&
|
||||
e.startFieldId === index) ||
|
||||
(e.endTableId === props.tableData.id &&
|
||||
e.endFieldId === index)
|
||||
)
|
||||
)
|
||||
.map((e, i) => ({ ...e, id: i }))
|
||||
);
|
||||
setRelationships((prev) => {
|
||||
return prev.map((e) => {
|
||||
if (
|
||||
e.startTableId === props.tableData.id &&
|
||||
e.startFieldId > fieldData.id
|
||||
) {
|
||||
return {
|
||||
...e,
|
||||
startFieldId: e.startFieldId - 1,
|
||||
};
|
||||
}
|
||||
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 };
|
||||
}),
|
||||
});
|
||||
}}
|
||||
onClick={() => deleteField(fieldData, props.tableData.id)}
|
||||
/>
|
||||
) : (
|
||||
<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 { 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 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 }) {
|
||||
const { layout } = useLayout();
|
||||
@ -21,11 +21,11 @@ export default function SidePanel({ width, resize, setResize }) {
|
||||
];
|
||||
|
||||
const contentList = [
|
||||
<TablesOverview key="tables" />,
|
||||
<RelationshipsOverview key="relationships" />,
|
||||
<AreasOverview key="areas" />,
|
||||
<NotesOverview key="notes" />,
|
||||
<TypesOverview key="types" />,
|
||||
<TablesTab key="tables" />,
|
||||
<RelationshipsTab key="relationships" />,
|
||||
<AreasTab key="areas" />,
|
||||
<NotesTab key="notes" />,
|
||||
<TypesTab key="types" />,
|
||||
];
|
||||
|
||||
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) => {
|
||||
if (addToHistory) {
|
||||
setRelationships((prev) => {
|
||||
@ -175,6 +225,7 @@ export default function TablesContextProvider({ children }) {
|
||||
addTable,
|
||||
updateTable,
|
||||
updateField,
|
||||
deleteField,
|
||||
deleteTable,
|
||||
relationships,
|
||||
setRelationships,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user