im hungered
This commit is contained in:
1ilit
parent
614e2ed24b
commit
d1a372d40b
@ -186,19 +186,11 @@ export default function ControlPanel(props) {
|
||||
})
|
||||
);
|
||||
} else if (a.component === "field_add") {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === a.tid) {
|
||||
return {
|
||||
...t,
|
||||
fields: t.fields
|
||||
updateTable(a.tid, {
|
||||
fields: tables[a.tid].fields
|
||||
.filter((e) => e.id !== tables[a.tid].fields.length - 1)
|
||||
.map((t, i) => ({ ...t, id: i })),
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
});
|
||||
} else if (a.component === "comment") {
|
||||
updateTable(a.tid, a.undo, false);
|
||||
} else if (a.component === "index_add") {
|
||||
|
||||
@ -4,6 +4,8 @@ import {
|
||||
tableThemes,
|
||||
defaultTableTheme,
|
||||
Tab,
|
||||
Action,
|
||||
ObjectType,
|
||||
} from "../data/data";
|
||||
import {
|
||||
IconEdit,
|
||||
@ -17,6 +19,8 @@ import {
|
||||
import {
|
||||
Popconfirm,
|
||||
Select,
|
||||
Input,
|
||||
TextArea,
|
||||
Card,
|
||||
Form,
|
||||
Checkbox,
|
||||
@ -33,51 +37,26 @@ import {
|
||||
SettingsContext,
|
||||
TabContext,
|
||||
TableContext,
|
||||
UndoRedoContext,
|
||||
} from "../pages/editor";
|
||||
|
||||
export default function Table(props) {
|
||||
const [isHovered, setIsHovered] = useState(false);
|
||||
const [indexActiveKey, setIndexActiveKey] = useState("");
|
||||
const [hoveredField, setHoveredField] = useState(-1);
|
||||
const [visible, setVisible] = useState(false);
|
||||
const { layout } = useContext(LayoutContext);
|
||||
const { setTables, deleteTable } = useContext(TableContext);
|
||||
const { setTables, deleteTable, updateTable, updateField } =
|
||||
useContext(TableContext);
|
||||
const { tab, setTab } = useContext(TabContext);
|
||||
const { settings } = useContext(SettingsContext);
|
||||
|
||||
const height = props.tableData.fields.length * 36 + 50 + 3;
|
||||
|
||||
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) => {
|
||||
setTables((prev) =>
|
||||
prev.map((table, i) => {
|
||||
if (tid === i) {
|
||||
return {
|
||||
...table,
|
||||
...updatedValues,
|
||||
};
|
||||
}
|
||||
return table;
|
||||
})
|
||||
);
|
||||
};
|
||||
|
||||
const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
|
||||
const [editField, setEditField] = useState({});
|
||||
return (
|
||||
<g>
|
||||
<>
|
||||
<foreignObject
|
||||
key={props.tableData.id}
|
||||
x={props.tableData.x}
|
||||
@ -241,10 +220,6 @@ export default function Table(props) {
|
||||
<strong>Default :</strong>{" "}
|
||||
{e.default === "" ? "Not set" : e.default}
|
||||
</p>
|
||||
<p className="text-slate-600">
|
||||
<strong>Comment :</strong>{" "}
|
||||
{e.comment === "" ? "Not comment" : e.comment}
|
||||
</p>
|
||||
</>
|
||||
}
|
||||
position="right"
|
||||
@ -260,49 +235,70 @@ export default function Table(props) {
|
||||
</foreignObject>
|
||||
<SideSheet
|
||||
title="Edit table"
|
||||
size="small"
|
||||
visible={visible}
|
||||
onCancel={() => setVisible((prev) => !prev)}
|
||||
style={{ paddingBottom: "16px" }}
|
||||
>
|
||||
<Form
|
||||
labelPosition="left"
|
||||
onChange={(value) => updateTable(props.tableData.id, value.values)}
|
||||
>
|
||||
<Form.Input
|
||||
initValue={props.tableData.name}
|
||||
field="name"
|
||||
label="Name"
|
||||
<div className="flex items-center">
|
||||
<div className="text-md font-semibold">Name: </div>
|
||||
<Input
|
||||
value={props.tableData.name}
|
||||
placeholder="Name"
|
||||
className="mx-2 mb-1"
|
||||
onChange={(value) =>
|
||||
updateTable(props.tableData.id, { name: value })
|
||||
}
|
||||
onFocus={(e) => setEditField({ name: e.target.value })}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.name) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "self",
|
||||
tid: props.tableData.id,
|
||||
undo: editField,
|
||||
redo: { name: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
</Form>
|
||||
</div>
|
||||
<div>
|
||||
{props.tableData.fields.map((f, j) => (
|
||||
<Form
|
||||
key={j}
|
||||
onChange={(value) =>
|
||||
updatedField(props.tableData.id, j, value.values)
|
||||
}
|
||||
initValues={f}
|
||||
>
|
||||
<Row
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
gutter={6}
|
||||
className="hover:bg-slate-100"
|
||||
>
|
||||
<Col span={8}>
|
||||
<Form.Input
|
||||
field="name"
|
||||
noLabel={true}
|
||||
className="m-0"
|
||||
<Row gutter={6} key={j} className="hover:bg-slate-100 mt-2">
|
||||
<Col span={7}>
|
||||
<Input
|
||||
value={f.name}
|
||||
placeholder="Name"
|
||||
onChange={(value) =>
|
||||
updateField(props.tableData.id, j, { name: value })
|
||||
}
|
||||
onFocus={(e) => setEditField({ name: e.target.value })}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.name) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: editField,
|
||||
redo: { name: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={8}>
|
||||
<Form.Select
|
||||
<Select
|
||||
className="w-full"
|
||||
field="type"
|
||||
noLabel={true}
|
||||
optionList={sqlDataTypes.map((value, index) => {
|
||||
return {
|
||||
label: value,
|
||||
@ -310,116 +306,253 @@ export default function Table(props) {
|
||||
};
|
||||
})}
|
||||
filter
|
||||
value={f.type}
|
||||
placeholder="Type"
|
||||
></Form.Select>
|
||||
onChange={(value) => {
|
||||
if (value === f.type) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: { type: f.type },
|
||||
redo: { type: value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateField(props.tableData.id, j, { type: value });
|
||||
}}
|
||||
></Select>
|
||||
</Col>
|
||||
<Col
|
||||
span={8}
|
||||
style={{ display: "flex", justifyContent: "space-around" }}
|
||||
>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
type={f.notNull ? "primary" : "tertiary"}
|
||||
title="Nullable"
|
||||
theme={f.notNull ? "solid" : "light"}
|
||||
onClick={() =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
notNull: !f.notNull,
|
||||
})
|
||||
}
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: { notNull: f.notNull },
|
||||
redo: { notNull: !f.notNull },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateField(props.tableData.id, j, { notNull: !f.notNull });
|
||||
}}
|
||||
>
|
||||
?
|
||||
</Button>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Button
|
||||
type={f.primary ? "primary" : "tertiary"}
|
||||
title="Primary"
|
||||
theme={f.primary ? "solid" : "light"}
|
||||
onClick={() =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
primary: !f.primary,
|
||||
})
|
||||
}
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: { primary: f.primary },
|
||||
redo: { primary: !f.primary },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateField(props.tableData.id, j, { primary: !f.primary });
|
||||
}}
|
||||
icon={<IconKeyStroked />}
|
||||
></Button>
|
||||
</Col>
|
||||
<Col span={3}>
|
||||
<Popover
|
||||
content={
|
||||
<div className="px-1">
|
||||
<Form
|
||||
onChange={(value) =>
|
||||
updatedField(props.tableData.id, j, value.values)
|
||||
}
|
||||
>
|
||||
<Form.Input
|
||||
field="default"
|
||||
label="Default"
|
||||
initValue={f.default}
|
||||
trigger="blur"
|
||||
<div className="px-1 w-[240px]">
|
||||
<div className="font-semibold">Default value</div>
|
||||
<Input
|
||||
className="my-2"
|
||||
placeholder="Set default"
|
||||
value={f.default}
|
||||
onChange={(value) =>
|
||||
updateField(props.tableData.id, j, { default: value })
|
||||
}
|
||||
onFocus={(e) =>
|
||||
setEditField({ default: e.target.value })
|
||||
}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.default) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: editField,
|
||||
redo: { default: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
<Form.Input
|
||||
field="check"
|
||||
label="Check Expression"
|
||||
trigger="blur"
|
||||
<div className="font-semibold">Check Expression</div>
|
||||
<Input
|
||||
className="my-2"
|
||||
placeholder="Set constraint"
|
||||
initValue={f.check}
|
||||
value={f.check}
|
||||
onChange={(value) =>
|
||||
updateField(props.tableData.id, j, { check: value })
|
||||
}
|
||||
onFocus={(e) => setEditField({ check: e.target.value })}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.check) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: editField,
|
||||
redo: { check: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
<div className="flex justify-between items-center my-3">
|
||||
<label htmlFor="unique" className="font-medium">
|
||||
Unique
|
||||
</label>
|
||||
<div className="font-medium">Unique</div>
|
||||
<Checkbox
|
||||
value="unique"
|
||||
defaultChecked={f.unique}
|
||||
onChange={(checkedValues) =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
onChange={(checkedValues) => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: {
|
||||
[checkedValues.target.value]:
|
||||
!checkedValues.target.checked,
|
||||
},
|
||||
redo: {
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateField(props.tableData.id, j, {
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
});
|
||||
}}
|
||||
></Checkbox>
|
||||
</div>
|
||||
<div className="flex justify-between items-center my-3">
|
||||
<label htmlFor="increment" className="font-medium">
|
||||
Autoincrement
|
||||
</label>
|
||||
<div className="font-medium">Autoincrement</div>
|
||||
<Checkbox
|
||||
value="increment"
|
||||
defaultChecked={f.increment}
|
||||
onChange={(checkedValues) =>
|
||||
updatedField(props.tableData.id, j, {
|
||||
onChange={(checkedValues) => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: {
|
||||
[checkedValues.target.value]:
|
||||
!checkedValues.target.checked,
|
||||
},
|
||||
redo: {
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
})
|
||||
}
|
||||
},
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateField(props.tableData.id, j, {
|
||||
[checkedValues.target.value]:
|
||||
checkedValues.target.checked,
|
||||
});
|
||||
}}
|
||||
></Checkbox>
|
||||
</div>
|
||||
<Form.TextArea
|
||||
field="comment"
|
||||
<div className="font-semibold">Comment</div>
|
||||
<TextArea
|
||||
className="my-2"
|
||||
label="Comment"
|
||||
placeholder="Add comment"
|
||||
initValue={f.comment}
|
||||
value={f.comment}
|
||||
autosize
|
||||
rows={2}
|
||||
onChange={(value) =>
|
||||
updateField(props.tableData.id, j, { comment: value })
|
||||
}
|
||||
onFocus={(e) =>
|
||||
setEditField({ comment: e.target.value })
|
||||
}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.comment) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field",
|
||||
tid: props.tableData.id,
|
||||
fid: j,
|
||||
undo: editField,
|
||||
redo: { comment: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
</Form>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
onClick={(ev) => {
|
||||
setTables((prev) => {
|
||||
const updatedTables = [...prev];
|
||||
const updatedFields = [
|
||||
...updatedTables[props.tableData.id].fields,
|
||||
];
|
||||
updatedFields.splice(j, 1);
|
||||
updatedTables[props.tableData.id].fields = [
|
||||
...updatedFields,
|
||||
];
|
||||
return updatedTables;
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field_delete",
|
||||
tid: props.tableData.id,
|
||||
data: f,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, {
|
||||
fields: props.tableData.fields
|
||||
.filter((field) => field.id !== j)
|
||||
.map((e, i) => ({ ...e, id: i })),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
Delete field
|
||||
</Button>
|
||||
</div>
|
||||
}
|
||||
@ -431,7 +564,6 @@ export default function Table(props) {
|
||||
</Popover>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
))}
|
||||
{props.tableData.indices.length > 0 && (
|
||||
<Card
|
||||
@ -439,7 +571,7 @@ export default function Table(props) {
|
||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||
headerLine={false}
|
||||
>
|
||||
<div className="font-medium ms-1 mb-1">Indices</div>
|
||||
<div className="font-medium mb-2 ms-1">Indices</div>
|
||||
{props.tableData.indices.map((idx, k) => (
|
||||
<div className="flex justify-between items-center mb-2" key={k}>
|
||||
<Select
|
||||
@ -450,58 +582,73 @@ export default function Table(props) {
|
||||
label: e.name,
|
||||
}))}
|
||||
className="w-full"
|
||||
defaultValue={idx.fields}
|
||||
value={idx.fields}
|
||||
onChange={(value) => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
return {
|
||||
...t,
|
||||
indices: t.indices.map((index, j) => {
|
||||
if (j === k)
|
||||
return {
|
||||
name: `${value.join("_")}_index`,
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "index",
|
||||
tid: props.tableData.id,
|
||||
iid: k,
|
||||
undo: {
|
||||
fields: [...idx.fields],
|
||||
name: `${idx.fields.join("_")}_index`,
|
||||
},
|
||||
redo: {
|
||||
fields: [...value],
|
||||
};
|
||||
return index;
|
||||
}),
|
||||
};
|
||||
name: `${value.join("_")}_index`,
|
||||
},
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, {
|
||||
indices: props.tableData.indices.map((index) =>
|
||||
index.id === k
|
||||
? {
|
||||
...index,
|
||||
fields: [...value],
|
||||
name: `${value.join("_")}_index`,
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
: index
|
||||
),
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Popover
|
||||
content={
|
||||
<div className="px-1">
|
||||
<Form>
|
||||
<Form.Input
|
||||
field="name"
|
||||
label="Name"
|
||||
initValue={idx.name}
|
||||
trigger="blur"
|
||||
<Input
|
||||
className="my-2"
|
||||
value={idx.name}
|
||||
placeholder="Index name"
|
||||
disabled
|
||||
/>
|
||||
</Form>
|
||||
<Button
|
||||
icon={<IconDeleteStroked />}
|
||||
type="danger"
|
||||
block
|
||||
onClick={() => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
const updatedIndices = [...t.indices];
|
||||
updatedIndices.splice(k, 1);
|
||||
return {
|
||||
...t,
|
||||
indices: updatedIndices,
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "index_delete",
|
||||
tid: props.tableData.id,
|
||||
data: idx,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, {
|
||||
indices: props.tableData.indices
|
||||
.filter((e) => e.id !== k)
|
||||
.map((e, j) => ({
|
||||
...e,
|
||||
id: j,
|
||||
})),
|
||||
});
|
||||
}}
|
||||
>
|
||||
Delete
|
||||
@ -527,23 +674,32 @@ export default function Table(props) {
|
||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||
headerLine={false}
|
||||
>
|
||||
<div className="font-medium ms-1">Comment</div>
|
||||
<Form
|
||||
onChange={(value) =>
|
||||
updateTable(props.tableData.id, value.values)
|
||||
}
|
||||
>
|
||||
<Form.TextArea
|
||||
field="comment"
|
||||
noLabel={true}
|
||||
showClear
|
||||
onClear={() => updateTable(props.tableData.id, { comment: "" })}
|
||||
initValue={props.tableData.comment}
|
||||
<div className="font-medium ms-1 mb-1">Comment</div>
|
||||
<TextArea
|
||||
value={props.tableData.comment}
|
||||
autosize
|
||||
placeholder="Add comment"
|
||||
rows={1}
|
||||
onChange={(value) =>
|
||||
updateTable(props.tableData.id, { comment: value }, false)
|
||||
}
|
||||
onFocus={(e) => setEditField({ comment: e.target.value })}
|
||||
onBlur={(e) => {
|
||||
if (e.target.value === editField.comment) return;
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "comment",
|
||||
tid: props.tableData.id,
|
||||
undo: editField,
|
||||
redo: { comment: e.target.value },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
}}
|
||||
/>
|
||||
</Form>
|
||||
</Card>
|
||||
<Row gutter={6} className="mt-2">
|
||||
<Col span={8}>
|
||||
@ -555,11 +711,23 @@ export default function Table(props) {
|
||||
<Button
|
||||
type="tertiary"
|
||||
size="small"
|
||||
onClick={() =>
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "self",
|
||||
tid: props.tableData.id,
|
||||
undo: { color: props.tableData.color },
|
||||
redo: { color: defaultTableTheme },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, {
|
||||
color: defaultTableTheme,
|
||||
})
|
||||
}
|
||||
});
|
||||
}}
|
||||
>
|
||||
Clear
|
||||
</Button>
|
||||
@ -574,9 +742,21 @@ export default function Table(props) {
|
||||
key={c}
|
||||
style={{ backgroundColor: c }}
|
||||
className="p-3 rounded-full mx-1"
|
||||
onClick={() =>
|
||||
updateTable(props.tableData.id, { color: c })
|
||||
}
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "self",
|
||||
tid: props.tableData.id,
|
||||
undo: { color: props.tableData.color },
|
||||
redo: { color: c },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, { color: c });
|
||||
}}
|
||||
>
|
||||
{props.tableData.color === c ? (
|
||||
<IconCheckboxTick style={{ color: "white" }} />
|
||||
@ -594,9 +774,21 @@ export default function Table(props) {
|
||||
key={c}
|
||||
style={{ backgroundColor: c }}
|
||||
className="p-3 rounded-full mx-1"
|
||||
onClick={() =>
|
||||
updateTable(props.tableData.id, { color: c })
|
||||
}
|
||||
onClick={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "self",
|
||||
tid: props.tableData.id,
|
||||
undo: { color: props.tableData.color },
|
||||
redo: { color: c },
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, { color: c });
|
||||
}}
|
||||
>
|
||||
<IconCheckboxTick
|
||||
style={{
|
||||
@ -621,20 +813,27 @@ export default function Table(props) {
|
||||
<Button
|
||||
block
|
||||
onClick={() => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
return {
|
||||
...t,
|
||||
setIndexActiveKey("1");
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "index_add",
|
||||
tid: props.tableData.id,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, {
|
||||
indices: [
|
||||
...t.indices,
|
||||
{ name: `index_${t.indices.length}`, fields: [] },
|
||||
...props.tableData.indices,
|
||||
{
|
||||
id: props.tableData.indices.length,
|
||||
name: `index_${props.tableData.indices.length}`,
|
||||
fields: [],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
});
|
||||
}}
|
||||
>
|
||||
Add index
|
||||
@ -643,13 +842,19 @@ export default function Table(props) {
|
||||
<Col span={6}>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setTables((prev) =>
|
||||
prev.map((t, i) => {
|
||||
if (t.id === props.tableData.id) {
|
||||
return {
|
||||
...t,
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field_add",
|
||||
tid: props.tableData.id,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, {
|
||||
fields: [
|
||||
...t.fields,
|
||||
...props.tableData.fields,
|
||||
{
|
||||
name: "",
|
||||
type: "",
|
||||
@ -660,13 +865,10 @@ export default function Table(props) {
|
||||
notNull: false,
|
||||
increment: false,
|
||||
comment: "",
|
||||
id: props.tableData.fields.length,
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
return t;
|
||||
})
|
||||
);
|
||||
});
|
||||
}}
|
||||
block
|
||||
>
|
||||
@ -688,7 +890,7 @@ export default function Table(props) {
|
||||
</Row>
|
||||
</div>
|
||||
</SideSheet>
|
||||
</g>
|
||||
</>
|
||||
);
|
||||
|
||||
function field(fieldData, index) {
|
||||
@ -733,17 +935,24 @@ export default function Table(props) {
|
||||
<Popconfirm
|
||||
title="Are you sure you want to delete this field?"
|
||||
content="This modification will be irreversible"
|
||||
onConfirm={() =>
|
||||
setTables((prev) => {
|
||||
const updatedTables = [...prev];
|
||||
const updatedFields = [
|
||||
...updatedTables[props.tableData.id].fields,
|
||||
];
|
||||
updatedFields.splice(index, 1);
|
||||
updatedTables[props.tableData.id].fields = [...updatedFields];
|
||||
return updatedTables;
|
||||
})
|
||||
}
|
||||
onConfirm={() => {
|
||||
setUndoStack((prev) => [
|
||||
...prev,
|
||||
{
|
||||
action: Action.EDIT,
|
||||
element: ObjectType.TABLE,
|
||||
component: "field_delete",
|
||||
tid: props.tableData.id,
|
||||
data: fieldData,
|
||||
},
|
||||
]);
|
||||
setRedoStack([]);
|
||||
updateTable(props.tableData.id, {
|
||||
fields: props.tableData.fields
|
||||
.filter((e) => e.id !== fieldData.id)
|
||||
.map((t, i) => ({ ...t, id: i })),
|
||||
});
|
||||
}}
|
||||
onCancel={() => {}}
|
||||
>
|
||||
<Button
|
||||
|
||||
@ -111,17 +111,9 @@ export default function TableOverview(props) {
|
||||
<div id={`scroll_table_${t.id}`} key={t.id}>
|
||||
<Collapse.Panel header={<div>{t.name}</div>} itemKey={`${t.id}`}>
|
||||
{t.fields.map((f, j) => (
|
||||
<Row
|
||||
type="flex"
|
||||
justify="start"
|
||||
align="middle"
|
||||
gutter={6}
|
||||
key={j}
|
||||
className="hover:bg-slate-100 mb-2"
|
||||
>
|
||||
<Row gutter={6} key={j} className="hover:bg-slate-100 mb-2">
|
||||
<Col span={7}>
|
||||
<Input
|
||||
field="name"
|
||||
value={f.name}
|
||||
placeholder="Name"
|
||||
onChange={(value) => updateField(i, j, { name: value })}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user