Remove duplicate logic to edit table
This commit is contained in:
1ilit
parent
0ec280b821
commit
234d4fc04b
File diff suppressed because it is too large
Load Diff
@ -24,243 +24,234 @@ export default function TableInfo({ data }) {
|
|||||||
const [editField, setEditField] = useState({});
|
const [editField, setEditField] = useState({});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div id={`scroll_table_${data.id}`}>
|
<div>
|
||||||
<Collapse.Panel
|
<div className="flex items-center mb-2.5">
|
||||||
header={
|
<div className="text-md font-semibold">Name: </div>
|
||||||
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
<Input
|
||||||
{data.name}
|
value={data.name}
|
||||||
</div>
|
validateStatus={data.name === "" ? "error" : "default"}
|
||||||
}
|
placeholder="Name"
|
||||||
itemKey={`${data.id}`}
|
className="ms-2"
|
||||||
>
|
onChange={(value) => updateTable(data.id, { name: value })}
|
||||||
<div className="flex items-center mb-2.5">
|
onFocus={(e) => setEditField({ name: e.target.value })}
|
||||||
<div className="text-md font-semibold">Name: </div>
|
onBlur={(e) => {
|
||||||
<Input
|
if (e.target.value === editField.name) return;
|
||||||
value={data.name}
|
setUndoStack((prev) => [
|
||||||
validateStatus={data.name === "" ? "error" : "default"}
|
...prev,
|
||||||
placeholder="Name"
|
{
|
||||||
className="ms-2"
|
action: Action.EDIT,
|
||||||
onChange={(value) => updateTable(data.id, { name: value })}
|
element: ObjectType.TABLE,
|
||||||
onFocus={(e) => setEditField({ name: e.target.value })}
|
component: "self",
|
||||||
onBlur={(e) => {
|
tid: data.id,
|
||||||
if (e.target.value === editField.name) return;
|
undo: editField,
|
||||||
setUndoStack((prev) => [
|
redo: { name: e.target.value },
|
||||||
...prev,
|
message: `Edit table name to ${e.target.value}`,
|
||||||
{
|
},
|
||||||
action: Action.EDIT,
|
]);
|
||||||
element: ObjectType.TABLE,
|
setRedoStack([]);
|
||||||
component: "self",
|
}}
|
||||||
tid: data.id,
|
/>
|
||||||
undo: editField,
|
</div>
|
||||||
redo: { name: e.target.value },
|
{data.fields.map((f, j) => (
|
||||||
message: `Edit table name to ${e.target.value}`,
|
<TableField key={"field_" + j} data={f} tid={data.id} index={j} />
|
||||||
},
|
))}
|
||||||
]);
|
{data.indices.length > 0 && (
|
||||||
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
|
<Card
|
||||||
bodyStyle={{ padding: "4px" }}
|
bodyStyle={{ padding: "4px" }}
|
||||||
style={{ marginTop: "12px", marginBottom: "12px" }}
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||||
headerLine={false}
|
headerLine={false}
|
||||||
>
|
>
|
||||||
<Collapse>
|
<Collapse
|
||||||
<Collapse.Panel header="Comment" itemKey="1">
|
activeKey={indexActiveKey}
|
||||||
<TextArea
|
onChange={(itemKey) => setIndexActiveKey(itemKey)}
|
||||||
field="comment"
|
accordion
|
||||||
value={data.comment}
|
>
|
||||||
autosize
|
<Collapse.Panel header="Indices" itemKey="1">
|
||||||
placeholder="Add comment"
|
{data.indices.map((idx, k) => (
|
||||||
rows={1}
|
<IndexDetails
|
||||||
onChange={(value) =>
|
key={"index_" + k}
|
||||||
updateTable(data.id, { comment: value }, false)
|
data={idx}
|
||||||
}
|
iid={k}
|
||||||
onFocus={(e) => setEditField({ comment: e.target.value })}
|
tid={data.id}
|
||||||
onBlur={(e) => {
|
fields={data.fields.map((e) => ({
|
||||||
if (e.target.value === editField.comment) return;
|
value: e.name,
|
||||||
setUndoStack((prev) => [
|
label: e.name,
|
||||||
...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.Panel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</Card>
|
</Card>
|
||||||
<Row gutter={6} className="mt-2">
|
)}
|
||||||
<Col span={8}>
|
<Card
|
||||||
<Popover
|
bodyStyle={{ padding: "4px" }}
|
||||||
content={
|
style={{ marginTop: "12px", marginBottom: "12px" }}
|
||||||
<div className="popover-theme">
|
headerLine={false}
|
||||||
<ColorPallete
|
>
|
||||||
currentColor={data.color}
|
<Collapse>
|
||||||
onClearColor={() => {
|
<Collapse.Panel header="Comment" itemKey="1">
|
||||||
setUndoStack((prev) => [
|
<TextArea
|
||||||
...prev,
|
field="comment"
|
||||||
{
|
value={data.comment}
|
||||||
action: Action.EDIT,
|
autosize
|
||||||
element: ObjectType.TABLE,
|
placeholder="Add comment"
|
||||||
component: "self",
|
rows={1}
|
||||||
tid: data.id,
|
onChange={(value) =>
|
||||||
undo: { color: data.color },
|
updateTable(data.id, { comment: value }, false)
|
||||||
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"
|
onFocus={(e) => setEditField({ comment: e.target.value })}
|
||||||
position="bottomLeft"
|
onBlur={(e) => {
|
||||||
showArrow
|
if (e.target.value === editField.comment) return;
|
||||||
>
|
|
||||||
<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) => [
|
setUndoStack((prev) => [
|
||||||
...prev,
|
...prev,
|
||||||
{
|
{
|
||||||
action: Action.EDIT,
|
action: Action.EDIT,
|
||||||
element: ObjectType.TABLE,
|
element: ObjectType.TABLE,
|
||||||
component: "index_add",
|
component: "self",
|
||||||
tid: data.id,
|
tid: data.id,
|
||||||
message: `Add index`,
|
undo: editField,
|
||||||
|
redo: { comment: e.target.value },
|
||||||
|
message: `Edit table comment to ${e.target.value}`,
|
||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
setRedoStack([]);
|
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>
|
</Collapse.Panel>
|
||||||
</Row>
|
</Collapse>
|
||||||
</Collapse.Panel>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -36,7 +36,18 @@ export default function TablesTab() {
|
|||||||
accordion
|
accordion
|
||||||
>
|
>
|
||||||
{tables.map((t) => (
|
{tables.map((t) => (
|
||||||
<TableInfo data={t} key={t.id} />
|
<div id={`scroll_table_${t.id}`} key={t.id}>
|
||||||
|
<Collapse.Panel
|
||||||
|
header={
|
||||||
|
<div className="overflow-hidden text-ellipsis whitespace-nowrap">
|
||||||
|
{t.name}
|
||||||
|
</div>
|
||||||
|
}
|
||||||
|
itemKey={`${t.id}`}
|
||||||
|
>
|
||||||
|
<TableInfo data={t} />
|
||||||
|
</Collapse.Panel>
|
||||||
|
</div>
|
||||||
))}
|
))}
|
||||||
</Collapse>
|
</Collapse>
|
||||||
)}
|
)}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user