hi
This commit is contained in:
1ilit
parent
44e179f15a
commit
21d01b1fe2
@ -83,6 +83,7 @@ export default function ControlPanel(props) {
|
|||||||
addTable,
|
addTable,
|
||||||
moveTable,
|
moveTable,
|
||||||
deleteTable,
|
deleteTable,
|
||||||
|
updateField,
|
||||||
setRelationships,
|
setRelationships,
|
||||||
addRelationship,
|
addRelationship,
|
||||||
deleteRelationship,
|
deleteRelationship,
|
||||||
@ -113,22 +114,6 @@ export default function ControlPanel(props) {
|
|||||||
setNotes(data.notes);
|
setNotes(data.notes);
|
||||||
};
|
};
|
||||||
|
|
||||||
const updatedField = (tid, fid, updatedValues) => {
|
|
||||||
setTables((prev) =>
|
|
||||||
prev.map((table, i) => {
|
|
||||||
if (tid === i) {
|
|
||||||
return {
|
|
||||||
...table,
|
|
||||||
fields: table.fields.map((field, j) =>
|
|
||||||
fid === j ? { ...field, ...updatedValues } : field
|
|
||||||
),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return table;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const undo = () => {
|
const undo = () => {
|
||||||
if (undoStack.length === 0) return;
|
if (undoStack.length === 0) return;
|
||||||
const a = undoStack.pop();
|
const a = undoStack.pop();
|
||||||
@ -184,17 +169,95 @@ export default function ControlPanel(props) {
|
|||||||
return n;
|
return n;
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}else if(a.element===ObjectType.TABLE){
|
} else if (a.element === ObjectType.TABLE) {
|
||||||
if(a.component==="field"){
|
if (a.component === "field") {
|
||||||
console.log(a);
|
updateField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values);
|
||||||
updatedField(a.data.undo.tid, a.data.undo.fid, a.data.undo.values)
|
} else if (a.component === "field_delete") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((t, i) => {
|
||||||
|
if (t.id === a.tid) {
|
||||||
|
const temp = t.fields.slice();
|
||||||
|
temp.splice(a.data.id, 0, a.data);
|
||||||
|
return { ...t, fields: temp.map((t, i) => ({ ...t, id: i })) };
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "field_add") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((t, i) => {
|
||||||
|
if (t.id === a.tid) {
|
||||||
|
return {
|
||||||
|
...t,
|
||||||
|
fields: t.fields
|
||||||
|
.filter((e) => e.id !== tables[a.tid].fields.length - 1)
|
||||||
|
.map((t, i) => ({ ...t, id: i })),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "comment") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((t, i) => {
|
||||||
|
if (t.id === a.data.undo.tid) {
|
||||||
|
return {
|
||||||
|
...t,
|
||||||
|
...a.data.undo.values,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "index_add") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table, i) => {
|
||||||
|
if (table.id === a.tid) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: table.indices
|
||||||
|
.filter((e) => e.id !== tables[a.tid].indices.length - 1)
|
||||||
|
.map((t, i) => ({ ...t, id: i })),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "index") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table, i) => {
|
||||||
|
if (a.tid === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: table.indices.map((idx) =>
|
||||||
|
idx.id === a.iid ? { ...idx, ...a.undo.values } : idx
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "index_delete") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table, i) => {
|
||||||
|
if (table.id === a.tid) {
|
||||||
|
const temp = table.indices.slice();
|
||||||
|
temp.splice(a.data.id, 0, a.data);
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: temp.map((t, i) => ({ ...t, id: i })),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setRedoStack((prev) => [...prev, a]);
|
setRedoStack((prev) => [...prev, a]);
|
||||||
} else if (a.action === Action.PAN) {
|
} else if (a.action === Action.PAN) {
|
||||||
setSettings((prev) => ({
|
setSettings((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
pan: a.data.undo
|
pan: a.data.undo,
|
||||||
}));
|
}));
|
||||||
setRedoStack((prev) => [...prev, a]);
|
setRedoStack((prev) => [...prev, a]);
|
||||||
}
|
}
|
||||||
@ -255,17 +318,115 @@ export default function ControlPanel(props) {
|
|||||||
return n;
|
return n;
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
} else if(a.element===ObjectType.TABLE){
|
} else if (a.element === ObjectType.TABLE) {
|
||||||
if(a.component==="field"){
|
if (a.component === "field") {
|
||||||
console.log(a);
|
updateField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values);
|
||||||
updatedField(a.data.redo.tid, a.data.redo.fid, a.data.redo.values)
|
} else if (a.component === "field_delete") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((t, i) => {
|
||||||
|
if (t.id === a.tid) {
|
||||||
|
return {
|
||||||
|
...t,
|
||||||
|
fields: t.fields
|
||||||
|
.filter((e) => e.id !== a.data.id)
|
||||||
|
.map((t, i) => ({ ...t, id: i })),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "field_add") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((t, i) => {
|
||||||
|
if (t.id === a.tid) {
|
||||||
|
return {
|
||||||
|
...t,
|
||||||
|
fields: [
|
||||||
|
...t.fields,
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "",
|
||||||
|
default: "",
|
||||||
|
check: "",
|
||||||
|
primary: false,
|
||||||
|
unique: false,
|
||||||
|
notNull: false,
|
||||||
|
increment: false,
|
||||||
|
comment: "",
|
||||||
|
id: t.fields.length,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "comment") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((t, i) => {
|
||||||
|
if (t.id === a.data.redo.tid) {
|
||||||
|
return {
|
||||||
|
...t,
|
||||||
|
...a.data.redo.values,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return t;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "index_add") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table) => {
|
||||||
|
if (table.id === a.tid) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: [
|
||||||
|
...table.indices,
|
||||||
|
{
|
||||||
|
id: table.indices.length,
|
||||||
|
name: `index_${table.indices.length}`,
|
||||||
|
fields: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "index") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table, i) => {
|
||||||
|
if (a.tid === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: table.indices.map((idx) =>
|
||||||
|
idx.id === a.iid ? { ...idx, ...a.redo.values } : idx
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else if (a.component === "index_delete") {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table, i) => {
|
||||||
|
if (table.id === a.tid) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: table.indices
|
||||||
|
.filter((e) => e.id !== a.data.id)
|
||||||
|
.map((t, i) => ({ ...t, id: i })),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
setUndoStack((prev) => [...prev, a]);
|
setUndoStack((prev) => [...prev, a]);
|
||||||
} else if (a.action === Action.PAN) {
|
} else if (a.action === Action.PAN) {
|
||||||
setSettings((prev) => ({
|
setSettings((prev) => ({
|
||||||
...prev,
|
...prev,
|
||||||
pan: a.data.redo
|
pan: a.data.redo,
|
||||||
}));
|
}));
|
||||||
setUndoStack((prev) => [...prev, a]);
|
setUndoStack((prev) => [...prev, a]);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import { React, useContext, useState, useRef } from "react";
|
import { React, useContext, useState } from "react";
|
||||||
import {
|
import {
|
||||||
Action,
|
Action,
|
||||||
ObjectType,
|
ObjectType,
|
||||||
@ -11,7 +11,7 @@ import {
|
|||||||
Row,
|
Row,
|
||||||
Col,
|
Col,
|
||||||
Input,
|
Input,
|
||||||
Form,
|
TextArea,
|
||||||
Button,
|
Button,
|
||||||
Card,
|
Card,
|
||||||
Popover,
|
Popover,
|
||||||
@ -38,10 +38,10 @@ import { TableContext, UndoRedoContext } from "../pages/editor";
|
|||||||
export default function TableOverview(props) {
|
export default function TableOverview(props) {
|
||||||
const [indexActiveKey, setIndexActiveKey] = useState("");
|
const [indexActiveKey, setIndexActiveKey] = useState("");
|
||||||
const [value, setValue] = useState("");
|
const [value, setValue] = useState("");
|
||||||
const { tables, setTables, addTable, deleteTable } = useContext(TableContext);
|
const { tables, setTables, addTable, deleteTable, updateField } =
|
||||||
|
useContext(TableContext);
|
||||||
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
||||||
const [editField, setEditField] = useState({});
|
const [editField, setEditField] = useState({});
|
||||||
const selectRef = useRef(null);
|
|
||||||
const [filteredResult, setFilteredResult] = useState(
|
const [filteredResult, setFilteredResult] = useState(
|
||||||
tables.map((t) => {
|
tables.map((t) => {
|
||||||
return t.name;
|
return t.name;
|
||||||
@ -58,22 +58,6 @@ export default function TableOverview(props) {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const updatedField = (tid, fid, updatedValues) => {
|
|
||||||
setTables((prev) =>
|
|
||||||
prev.map((table, i) => {
|
|
||||||
if (tid === i) {
|
|
||||||
return {
|
|
||||||
...table,
|
|
||||||
fields: table.fields.map((field, j) =>
|
|
||||||
fid === j ? { ...field, ...updatedValues } : field
|
|
||||||
),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
return table;
|
|
||||||
})
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const updateTable = (tid, updatedValues) => {
|
const updateTable = (tid, updatedValues) => {
|
||||||
setTables((prev) =>
|
setTables((prev) =>
|
||||||
prev.map((table, i) => {
|
prev.map((table, i) => {
|
||||||
@ -142,218 +126,405 @@ export default function TableOverview(props) {
|
|||||||
<div id={`scroll_table_${t.id}`} key={t.id}>
|
<div id={`scroll_table_${t.id}`} key={t.id}>
|
||||||
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
|
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
|
||||||
{t.fields.map((f, j) => (
|
{t.fields.map((f, j) => (
|
||||||
<Row
|
<Row
|
||||||
type="flex"
|
type="flex"
|
||||||
justify="start"
|
justify="start"
|
||||||
align="middle"
|
align="middle"
|
||||||
gutter={6}
|
gutter={6}
|
||||||
className="hover:bg-slate-100"
|
key={j}
|
||||||
>
|
className="hover:bg-slate-100 mb-2"
|
||||||
<Col span={7}>
|
>
|
||||||
<Input
|
<Col span={7}>
|
||||||
field="name"
|
<Input
|
||||||
value={f.name}
|
field="name"
|
||||||
className="m-0"
|
value={f.name}
|
||||||
placeholder="Name"
|
className="m-0"
|
||||||
onChange={(value) =>
|
placeholder="Name"
|
||||||
updatedField(i, j, { name: value })
|
onChange={(value) => updateField(i, j, { name: value })}
|
||||||
}
|
onFocus={(e) =>
|
||||||
onFocus={(e) =>
|
setEditField({
|
||||||
setEditField({
|
tid: i,
|
||||||
tid: i,
|
fid: j,
|
||||||
fid: j,
|
values: { name: e.target.value },
|
||||||
values: { name: e.target.value },
|
})
|
||||||
})
|
}
|
||||||
}
|
onBlur={(e) => {
|
||||||
onBlur={(e) => {
|
if (e.target.value === editField.name) return;
|
||||||
if (e.target.value === editField.name) return;
|
setUndoStack((prev) => [
|
||||||
setUndoStack((prev) => [
|
...prev,
|
||||||
...prev,
|
{
|
||||||
{
|
action: Action.EDIT,
|
||||||
action: Action.EDIT,
|
element: ObjectType.TABLE,
|
||||||
element: ObjectType.TABLE,
|
component: "field",
|
||||||
component: "field",
|
data: {
|
||||||
data: {
|
undo: editField,
|
||||||
undo: editField,
|
redo: {
|
||||||
redo: {
|
tid: i,
|
||||||
tid: i,
|
fid: j,
|
||||||
fid: j,
|
values: { name: e.target.value },
|
||||||
values: { name: e.target.value },
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]);
|
},
|
||||||
setRedoStack([]);
|
]);
|
||||||
setEditField({});
|
setRedoStack([]);
|
||||||
}}
|
setEditField({});
|
||||||
/>
|
}}
|
||||||
</Col>
|
/>
|
||||||
<Col span={8}>
|
</Col>
|
||||||
<Select
|
<Col span={8}>
|
||||||
className="w-full"
|
<Select
|
||||||
optionList={sqlDataTypes.map((value, index) => {
|
className="w-full"
|
||||||
return {
|
optionList={sqlDataTypes.map((value, index) => {
|
||||||
label: value,
|
return {
|
||||||
value: value,
|
label: value,
|
||||||
};
|
value: value,
|
||||||
})}
|
};
|
||||||
filter
|
})}
|
||||||
value={f.type}
|
filter
|
||||||
ref={selectRef}
|
value={f.type}
|
||||||
placeholder="Type"
|
placeholder="Type"
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
updatedField(i, j, { type: value });
|
if (value === f.type) return;
|
||||||
if (value === editField.type) return;
|
setUndoStack((prev) => [
|
||||||
setUndoStack((prev) => [
|
...prev,
|
||||||
...prev,
|
{
|
||||||
{
|
action: Action.EDIT,
|
||||||
action: Action.EDIT,
|
element: ObjectType.TABLE,
|
||||||
element: ObjectType.TABLE,
|
component: "field",
|
||||||
component: "field",
|
data: {
|
||||||
data: {
|
undo: {
|
||||||
undo: editField,
|
tid: i,
|
||||||
redo: {
|
fid: j,
|
||||||
tid: i,
|
values: { type: f.type },
|
||||||
fid: j,
|
},
|
||||||
values: { type: value },
|
redo: {
|
||||||
},
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: { type: value },
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
]);
|
},
|
||||||
setRedoStack([]);
|
]);
|
||||||
setEditField({});
|
setRedoStack([]);
|
||||||
}}
|
setEditField({});
|
||||||
onFocus={() => {
|
updateField(i, j, { type: value });
|
||||||
setEditField({
|
}}
|
||||||
tid: i,
|
></Select>
|
||||||
fid: j,
|
</Col>
|
||||||
values: { type: selectRef.current.props.value },
|
<Col span={3}>
|
||||||
});
|
<Button
|
||||||
}}
|
type={f.notNull ? "primary" : "tertiary"}
|
||||||
></Select>
|
title="Nullable"
|
||||||
</Col>
|
theme={f.notNull ? "solid" : "light"}
|
||||||
<Col span={3}>
|
onClick={() => {
|
||||||
<Button
|
setUndoStack((prev) => [
|
||||||
type={f.notNull ? "primary" : "tertiary"}
|
...prev,
|
||||||
title="Nullable"
|
{
|
||||||
theme={f.notNull ? "solid" : "light"}
|
action: Action.EDIT,
|
||||||
onClick={() =>
|
element: ObjectType.TABLE,
|
||||||
updatedField(i, j, { notNull: !f.notNull })
|
component: "field",
|
||||||
}
|
data: {
|
||||||
>
|
undo: {
|
||||||
?
|
tid: i,
|
||||||
</Button>
|
fid: j,
|
||||||
</Col>
|
values: { notNull: f.notNull },
|
||||||
<Col span={3}>
|
},
|
||||||
<Button
|
redo: {
|
||||||
type={f.primary ? "primary" : "tertiary"}
|
tid: i,
|
||||||
title="Primary"
|
fid: j,
|
||||||
theme={f.primary ? "solid" : "light"}
|
values: { notNull: !f.notNull },
|
||||||
onClick={() =>
|
},
|
||||||
updatedField(i, j, { primary: !f.primary })
|
},
|
||||||
}
|
},
|
||||||
icon={<IconKeyStroked />}
|
]);
|
||||||
></Button>
|
setRedoStack([]);
|
||||||
</Col>
|
setEditField({});
|
||||||
<Col span={3}>
|
updateField(i, j, { notNull: !f.notNull });
|
||||||
<Popover
|
}}
|
||||||
content={
|
>
|
||||||
<div className="px-1">
|
?
|
||||||
<Form
|
</Button>
|
||||||
onChange={(value) =>
|
</Col>
|
||||||
updatedField(i, j, value.values)
|
<Col span={3}>
|
||||||
}
|
<Button
|
||||||
>
|
type={f.primary ? "primary" : "tertiary"}
|
||||||
<Form.Input
|
title="Primary"
|
||||||
field="default"
|
theme={f.primary ? "solid" : "light"}
|
||||||
label="Default"
|
onClick={() => {
|
||||||
initValue={f.default}
|
setUndoStack((prev) => [
|
||||||
trigger="blur"
|
...prev,
|
||||||
placeholder="Set default"
|
{
|
||||||
/>
|
action: Action.EDIT,
|
||||||
<Form.Input
|
element: ObjectType.TABLE,
|
||||||
field="check"
|
component: "field",
|
||||||
label="Check Expression"
|
data: {
|
||||||
trigger="blur"
|
undo: {
|
||||||
placeholder="Set constraint"
|
tid: i,
|
||||||
initValue={f.check}
|
fid: j,
|
||||||
/>
|
values: { primary: f.primary },
|
||||||
<div className="flex justify-between items-center my-3">
|
},
|
||||||
<label
|
redo: {
|
||||||
htmlFor="unique"
|
tid: i,
|
||||||
className="font-medium"
|
fid: j,
|
||||||
>
|
values: { primary: !f.primary },
|
||||||
Unique
|
},
|
||||||
</label>
|
},
|
||||||
<Checkbox
|
},
|
||||||
value="unique"
|
]);
|
||||||
defaultChecked={f.unique}
|
setRedoStack([]);
|
||||||
onChange={(checkedValues) =>
|
setEditField({});
|
||||||
updatedField(i, j, {
|
updateField(i, j, { primary: !f.primary });
|
||||||
[checkedValues.target.value]:
|
}}
|
||||||
checkedValues.target.checked,
|
icon={<IconKeyStroked />}
|
||||||
})
|
></Button>
|
||||||
}
|
</Col>
|
||||||
></Checkbox>
|
<Col span={3}>
|
||||||
</div>
|
<Popover
|
||||||
<div className="flex justify-between items-center my-3">
|
content={
|
||||||
<label
|
<div className="px-1 w-[240px]">
|
||||||
htmlFor="increment"
|
<div className="font-semibold">Default value</div>
|
||||||
className="font-medium"
|
<Input
|
||||||
>
|
className="my-2"
|
||||||
Autoincrement
|
placeholder="Set default"
|
||||||
</label>
|
value={f.default}
|
||||||
<Checkbox
|
onChange={(value) =>
|
||||||
value="increment"
|
updateField(i, j, { default: value })
|
||||||
defaultChecked={f.increment}
|
}
|
||||||
onChange={(checkedValues) =>
|
onFocus={(e) =>
|
||||||
updatedField(i, j, {
|
setEditField({
|
||||||
[checkedValues.target.value]:
|
tid: i,
|
||||||
checkedValues.target.checked,
|
fid: j,
|
||||||
})
|
values: { default: e.target.value },
|
||||||
}
|
})
|
||||||
></Checkbox>
|
}
|
||||||
</div>
|
onBlur={(e) => {
|
||||||
<Form.TextArea
|
if (e.target.value === editField.default)
|
||||||
field="comment"
|
return;
|
||||||
label="Comment"
|
setUndoStack((prev) => [
|
||||||
placeholder="Add comment"
|
...prev,
|
||||||
initValue={f.comment}
|
{
|
||||||
autosize
|
action: Action.EDIT,
|
||||||
rows={2}
|
element: ObjectType.TABLE,
|
||||||
/>
|
component: "field",
|
||||||
</Form>
|
data: {
|
||||||
<Button
|
undo: editField,
|
||||||
icon={<IconDeleteStroked />}
|
redo: {
|
||||||
type="danger"
|
tid: i,
|
||||||
block
|
fid: j,
|
||||||
onClick={(ev) => {
|
values: { default: e.target.value },
|
||||||
setTables((prev) => {
|
},
|
||||||
const updatedTables = [...prev];
|
},
|
||||||
const updatedFields = [
|
},
|
||||||
...updatedTables[t.id].fields,
|
]);
|
||||||
];
|
setRedoStack([]);
|
||||||
updatedFields.splice(j, 1);
|
setEditField({});
|
||||||
updatedTables[t.id].fields = [
|
}}
|
||||||
...updatedFields,
|
/>
|
||||||
];
|
<div className="font-semibold">
|
||||||
return updatedTables;
|
Check Expression
|
||||||
|
</div>
|
||||||
|
<Input
|
||||||
|
className="my-2"
|
||||||
|
placeholder="Set constraint"
|
||||||
|
value={f.check}
|
||||||
|
onChange={(value) =>
|
||||||
|
updateField(i, j, { check: value })
|
||||||
|
}
|
||||||
|
onFocus={(e) =>
|
||||||
|
setEditField({
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: { check: e.target.value },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onBlur={(e) => {
|
||||||
|
if (e.target.value === editField.check) return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
data: {
|
||||||
|
undo: editField,
|
||||||
|
redo: {
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: { check: e.target.value },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setEditField({});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<div className="flex justify-between items-center my-3">
|
||||||
|
<div className="font-medium">Unique</div>
|
||||||
|
<Checkbox
|
||||||
|
value="unique"
|
||||||
|
defaultChecked={f.unique}
|
||||||
|
onChange={(checkedValues) => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
data: {
|
||||||
|
undo: {
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
!checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setEditField({});
|
||||||
|
updateField(i, j, {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
checkedValues.target.checked,
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
>
|
></Checkbox>
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
<div className="flex justify-between items-center my-3">
|
||||||
trigger="click"
|
<div className="font-medium">Autoincrement</div>
|
||||||
position="rightTop"
|
<Checkbox
|
||||||
showArrow
|
value="increment"
|
||||||
>
|
defaultChecked={f.increment}
|
||||||
<Button type="tertiary" icon={<IconMore />}></Button>
|
onChange={(checkedValues) => {
|
||||||
</Popover>
|
setUndoStack((prev) => [
|
||||||
</Col>
|
...prev,
|
||||||
</Row>
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
data: {
|
||||||
|
undo: {
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
!checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
checkedValues.target.checked,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setEditField({});
|
||||||
|
updateField(i, j, {
|
||||||
|
[checkedValues.target.value]:
|
||||||
|
checkedValues.target.checked,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
></Checkbox>
|
||||||
|
</div>
|
||||||
|
<div className="font-semibold">Comment</div>
|
||||||
|
<TextArea
|
||||||
|
className="my-2"
|
||||||
|
label="Comment"
|
||||||
|
placeholder="Add comment"
|
||||||
|
value={f.comment}
|
||||||
|
autosize
|
||||||
|
rows={2}
|
||||||
|
onChange={(value) =>
|
||||||
|
updateField(i, j, { comment: value })
|
||||||
|
}
|
||||||
|
onFocus={(e) =>
|
||||||
|
setEditField({
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: { comment: e.target.value },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onBlur={(e) => {
|
||||||
|
if (e.target.value === editField.comment)
|
||||||
|
return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field",
|
||||||
|
data: {
|
||||||
|
undo: editField,
|
||||||
|
redo: {
|
||||||
|
tid: i,
|
||||||
|
fid: j,
|
||||||
|
values: { comment: e.target.value },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setEditField({});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<Button
|
||||||
|
icon={<IconDeleteStroked />}
|
||||||
|
type="danger"
|
||||||
|
block
|
||||||
|
onClick={() => {
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "field_delete",
|
||||||
|
tid: t.id,
|
||||||
|
data: f,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table) => {
|
||||||
|
if (table.id === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
fields: table.fields.filter(
|
||||||
|
(field, k) => k !== j
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Delete field
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
trigger="click"
|
||||||
|
position="rightTop"
|
||||||
|
showArrow
|
||||||
|
>
|
||||||
|
<Button type="tertiary" icon={<IconMore />}></Button>
|
||||||
|
</Popover>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
))}
|
))}
|
||||||
{t.indices.length > 0 && (
|
{t.indices.length > 0 && (
|
||||||
<Card
|
<Card
|
||||||
@ -380,46 +551,98 @@ export default function TableOverview(props) {
|
|||||||
label: e.name,
|
label: e.name,
|
||||||
}))}
|
}))}
|
||||||
className="w-full"
|
className="w-full"
|
||||||
defaultValue={idx.fields}
|
value={idx.fields}
|
||||||
onChange={(value) => {
|
onChange={(value) => {
|
||||||
const updatedTables = [...tables];
|
setUndoStack((prev) => [
|
||||||
const updatedIndices = [...t.indices];
|
...prev,
|
||||||
updatedIndices[k] = {
|
{
|
||||||
name: `${value.join("_")}_index`,
|
action: Action.EDIT,
|
||||||
fields: [...value],
|
element: ObjectType.TABLE,
|
||||||
};
|
component: "index",
|
||||||
updatedTables[i] = {
|
tid: i,
|
||||||
...t,
|
iid: k,
|
||||||
indices: [...updatedIndices],
|
undo: {
|
||||||
};
|
values: {
|
||||||
setTables(updatedTables);
|
fields: [...idx.fields],
|
||||||
|
name: `${idx.fields.join("_")}_index`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
redo: {
|
||||||
|
values: {
|
||||||
|
fields: [...value],
|
||||||
|
name: `${value.join("_")}_index`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setEditField({});
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table, i) => {
|
||||||
|
if (table.id === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: table.indices.map((index) =>
|
||||||
|
index.id === k
|
||||||
|
? {
|
||||||
|
...index,
|
||||||
|
fields: [...value],
|
||||||
|
name: `${value.join(
|
||||||
|
"_"
|
||||||
|
)}_index`,
|
||||||
|
}
|
||||||
|
: index
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Popover
|
<Popover
|
||||||
content={
|
content={
|
||||||
<div className="px-1">
|
<div className="px-1">
|
||||||
<Form>
|
<Input
|
||||||
<Form.Input
|
className="my-2"
|
||||||
field="name"
|
value={idx.name}
|
||||||
label="Name"
|
placeholder="Index name"
|
||||||
initValue={idx.name}
|
disabled
|
||||||
trigger="blur"
|
/>
|
||||||
placeholder="Index name"
|
|
||||||
/>
|
|
||||||
</Form>
|
|
||||||
<Button
|
<Button
|
||||||
icon={<IconDeleteStroked />}
|
icon={<IconDeleteStroked />}
|
||||||
type="danger"
|
type="danger"
|
||||||
block
|
block
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const updatedTables = [...tables];
|
setUndoStack((prev) => [
|
||||||
const updatedIndices = [...t.indices];
|
...prev,
|
||||||
updatedIndices.splice(k, 1);
|
{
|
||||||
updatedTables[i] = {
|
action: Action.EDIT,
|
||||||
...t,
|
element: ObjectType.TABLE,
|
||||||
indices: [...updatedIndices],
|
component: "index_delete",
|
||||||
};
|
tid: t.id,
|
||||||
setTables(updatedTables);
|
data: idx,
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table) => {
|
||||||
|
if (table.id === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: table.indices
|
||||||
|
.filter(
|
||||||
|
(index) => index.id !== idx.id
|
||||||
|
)
|
||||||
|
.map((e, j) => ({
|
||||||
|
...e,
|
||||||
|
id: j,
|
||||||
|
})),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Delete
|
Delete
|
||||||
@ -449,18 +672,42 @@ export default function TableOverview(props) {
|
|||||||
>
|
>
|
||||||
<Collapse>
|
<Collapse>
|
||||||
<Collapse.Panel header="Comment" itemKey="1">
|
<Collapse.Panel header="Comment" itemKey="1">
|
||||||
<Form onChange={(value) => updateTable(i, value.values)}>
|
<TextArea
|
||||||
<Form.TextArea
|
field="comment"
|
||||||
field="comment"
|
showClear
|
||||||
noLabel={true}
|
onClear={() => updateTable(i, { comment: "" })}
|
||||||
showClear
|
value={t.comment}
|
||||||
onClear={() => updateTable(i, { comment: "" })}
|
autosize
|
||||||
initValue={t.comment}
|
placeholder="Add comment"
|
||||||
autosize
|
rows={1}
|
||||||
placeholder="Add comment"
|
onChange={(value) => updateTable(i, { comment: value })}
|
||||||
rows={1}
|
onFocus={(e) =>
|
||||||
/>
|
setEditField({
|
||||||
</Form>
|
tid: t.id,
|
||||||
|
values: { comment: e.target.value },
|
||||||
|
})
|
||||||
|
}
|
||||||
|
onBlur={(e) => {
|
||||||
|
if (e.target.value === editField.comment) return;
|
||||||
|
setUndoStack((prev) => [
|
||||||
|
...prev,
|
||||||
|
{
|
||||||
|
action: Action.EDIT,
|
||||||
|
element: ObjectType.TABLE,
|
||||||
|
component: "comment",
|
||||||
|
data: {
|
||||||
|
undo: editField,
|
||||||
|
redo: {
|
||||||
|
tid: i,
|
||||||
|
values: { comment: e.target.value },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setEditField({});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</Card>
|
</Card>
|
||||||
@ -539,15 +786,34 @@ export default function TableOverview(props) {
|
|||||||
block
|
block
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setIndexActiveKey("1");
|
setIndexActiveKey("1");
|
||||||
const updatedTables = [...tables];
|
setUndoStack((prev) => [
|
||||||
updatedTables[i] = {
|
...prev,
|
||||||
...t,
|
{
|
||||||
indices: [
|
action: Action.EDIT,
|
||||||
...t.indices,
|
element: ObjectType.TABLE,
|
||||||
{ name: `index_${t.indices.length}`, fields: [] },
|
component: "index_add",
|
||||||
],
|
tid: t.id,
|
||||||
};
|
},
|
||||||
setTables(updatedTables);
|
]);
|
||||||
|
setRedoStack([]);
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table) => {
|
||||||
|
if (table.id === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
indices: [
|
||||||
|
...table.indices,
|
||||||
|
{
|
||||||
|
id: table.indices.length,
|
||||||
|
name: `index_${table.indices.length}`,
|
||||||
|
fields: [],
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Add index
|
Add index
|
||||||
@ -556,22 +822,41 @@ export default function TableOverview(props) {
|
|||||||
<Col span={6}>
|
<Col span={6}>
|
||||||
<Button
|
<Button
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
const updatedTables = [...tables];
|
setUndoStack((prev) => [
|
||||||
updatedTables[i].fields = [
|
...prev,
|
||||||
...updatedTables[i].fields,
|
|
||||||
{
|
{
|
||||||
name: "",
|
action: Action.EDIT,
|
||||||
type: "",
|
element: ObjectType.TABLE,
|
||||||
default: "",
|
component: "field_add",
|
||||||
check: "",
|
tid: t.id,
|
||||||
primary: false,
|
|
||||||
unique: false,
|
|
||||||
notNull: false,
|
|
||||||
increment: false,
|
|
||||||
comment: "",
|
|
||||||
},
|
},
|
||||||
];
|
]);
|
||||||
setTables(updatedTables);
|
setRedoStack([]);
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table) => {
|
||||||
|
if (table.id === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
fields: [
|
||||||
|
...table.fields,
|
||||||
|
{
|
||||||
|
name: "",
|
||||||
|
type: "",
|
||||||
|
default: "",
|
||||||
|
check: "",
|
||||||
|
primary: false,
|
||||||
|
unique: false,
|
||||||
|
notNull: false,
|
||||||
|
increment: false,
|
||||||
|
comment: "",
|
||||||
|
id: table.fields.length,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
}}
|
}}
|
||||||
block
|
block
|
||||||
>
|
>
|
||||||
|
|||||||
@ -85,6 +85,7 @@ export default function Editor(props) {
|
|||||||
notNull: true,
|
notNull: true,
|
||||||
increment: true,
|
increment: true,
|
||||||
comment: "",
|
comment: "",
|
||||||
|
id: 0,
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
comment: "",
|
comment: "",
|
||||||
@ -105,6 +106,22 @@ export default function Editor(props) {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const updateField = (tid, fid, updatedValues) => {
|
||||||
|
setTables((prev) =>
|
||||||
|
prev.map((table, i) => {
|
||||||
|
if (tid === i) {
|
||||||
|
return {
|
||||||
|
...table,
|
||||||
|
fields: table.fields.map((field, j) =>
|
||||||
|
fid === j ? { ...field, ...updatedValues } : field
|
||||||
|
),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return table;
|
||||||
|
})
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const addArea = (addToHistory = true, data) => {
|
const addArea = (addToHistory = true, data) => {
|
||||||
if (data) {
|
if (data) {
|
||||||
setAreas((prev) => {
|
setAreas((prev) => {
|
||||||
@ -325,7 +342,7 @@ export default function Editor(props) {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const editNote = (id, values, addToHistory=true) => {
|
const editNote = (id, values, addToHistory = true) => {
|
||||||
setNotes((prev) =>
|
setNotes((prev) =>
|
||||||
prev.map((t) => {
|
prev.map((t) => {
|
||||||
if (t.id === id) {
|
if (t.id === id) {
|
||||||
@ -337,7 +354,7 @@ export default function Editor(props) {
|
|||||||
return t;
|
return t;
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
document.title = "Editor - drawDB";
|
document.title = "Editor - drawDB";
|
||||||
@ -351,6 +368,7 @@ export default function Editor(props) {
|
|||||||
setTables,
|
setTables,
|
||||||
addTable,
|
addTable,
|
||||||
moveTable,
|
moveTable,
|
||||||
|
updateField,
|
||||||
deleteTable,
|
deleteTable,
|
||||||
relationships,
|
relationships,
|
||||||
setRelationships,
|
setRelationships,
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user