titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

im hungered

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:16 +03:00
parent 614e2ed24b
commit d1a372d40b
3 changed files with 526 additions and 333 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/components/control_panel.jsx
View File

@ -186,19 +186,11 @@ export default function ControlPanel(props) {
}) })
); );
} else if (a.component === "field_add") { } else if (a.component === "field_add") {
setTables((prev) => updateTable(a.tid, {
prev.map((t, i) => { fields: tables[a.tid].fields
if (t.id === a.tid) { .filter((e) => e.id !== tables[a.tid].fields.length - 1)
return { .map((t, i) => ({ ...t, id: i })),
...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") { } else if (a.component === "comment") {
updateTable(a.tid, a.undo, false); updateTable(a.tid, a.undo, false);
} else if (a.component === "index_add") { } else if (a.component === "index_add") {

831
src/components/table.jsx
View File

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

10
src/components/table_overview.jsx
View File

@ -111,17 +111,9 @@ 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 gutter={6} key={j} className="hover:bg-slate-100 mb-2">
type="flex"
justify="start"
align="middle"
gutter={6}
key={j}
className="hover:bg-slate-100 mb-2"
>
<Col span={7}> <Col span={7}>
<Input <Input
field="name"
value={f.name} value={f.name}
placeholder="Name" placeholder="Name"
onChange={(value) => updateField(i, j, { name: value })} onChange={(value) => updateField(i, j, { name: value })}