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

make overview functional

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:47:56 +03:00
parent 52ed3a88b7
commit 1dc2c4d3d3
3 changed files with 134 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/canvas.jsx
View File

@ -169,6 +169,7 @@ export default function Canvas(props) {
{
name: "id",
type: "UUID",
check: "",
default: "",
primary: true,
unique: true,

138
src/components/diagram_overview.jsx
View File

@ -42,7 +42,17 @@ export default function DiagramOverview(props) {
itemKey={`${i}`}
>
{t.fields.map((f, j) => (
<Form key={j}>
<Form
key={j}
onChange={(value) => {
const updatedTables = [...props.tables];
updatedTables[i].fields = updatedTables[i].fields.map(
(field, index) =>
index === j ? { ...field, ...value.values } : field
);
props.setTables(updatedTables);
}}
>
<Row
type="flex"
justify="start"
@ -52,7 +62,7 @@ export default function DiagramOverview(props) {
>
<Col span={7}>
<Form.Input
field={`name-${j}`}
field="name"
noLabel={true}
initValue={f.name}
className="m-0"
@ -62,7 +72,7 @@ export default function DiagramOverview(props) {
<Col span={8}>
<Form.Select
className="w-full"
field={`type-${j}`}
field="type"
noLabel={true}
optionList={sqlDataTypes.map((value, index) => {
return {
@ -75,18 +85,61 @@ export default function DiagramOverview(props) {
></Form.Select>
</Col>
<Col span={3}>
<Button type="tertiary" title="Nullable">
<Button
type={f.notNull ? "primary" : "tertiary"}
title="Nullable"
theme={f.notNull ? "solid" : "light"}
onClick={() => {
const updatedTables = [...props.tables];
updatedTables[i].fields = updatedTables[i].fields.map(
(field, index) =>
index === j
? { ...field, notNull: !f.notNull }
: field
);
props.setTables(updatedTables);
}}
>
?
</Button>
</Col>
<Col span={3}>
<Button type="tertiary" icon={<IconKeyStroked />}></Button>
<Button
type={f.primary ? "primary" : "tertiary"}
title="Nullable"
theme={f.primary ? "solid" : "light"}
onClick={() => {
const updatedTables = [...props.tables];
updatedTables[i].fields = updatedTables[i].fields.map(
(field, index) =>
index === j
? { ...field, primary: !f.primary }
: field
);
props.setTables(updatedTables);
}}
icon={<IconKeyStroked />}
></Button>
</Col>
<Col span={3}>
<Popover
content={
<div className="px-1">
<Form>
<Form
onChange={(value) => {
const updatedTables = [...props.tables];
updatedTables[i] = {
...updatedTables[i],
fields: updatedTables[i].fields.map(
(field, index) =>
index === j
? { ...field, ...value.values }
: field
),
};
props.setTables(updatedTables);
}}
>
<Form.Input
field="default"
label="Default"
@ -99,7 +152,32 @@ export default function DiagramOverview(props) {
label="Check Expression"
trigger="blur"
placeholder="Set constraint"
initValue={f.check}
/>
<div className="flex justify-between items-center my-3">
<label htmlFor="unique" className="font-medium">
Unique
</label>
<Checkbox
value="unique"
defaultChecked={f.unique}
onChange={(checkedValues) => {
const updatedTables = [...props.tables];
updatedTables[i].fields = updatedTables[
i
].fields.map((field, index) =>
index === j
? {
...field,
[checkedValues.target.value]:
checkedValues.target.checked,
}
: field
);
props.setTables(updatedTables);
}}
></Checkbox>
</div>
<div className="flex justify-between items-center my-3">
<label htmlFor="increment" className="font-medium">
Autoincrement
@ -107,6 +185,21 @@ export default function DiagramOverview(props) {
<Checkbox
value="increment"
defaultChecked={f.increment}
onChange={(checkedValues) => {
const updatedTables = [...props.tables];
updatedTables[i].fields = updatedTables[
i
].fields.map((field, index) =>
index === j
? {
...field,
[checkedValues.target.value]:
checkedValues.target.checked,
}
: field
);
props.setTables(updatedTables);
}}
></Checkbox>
</div>
<Form.TextArea
@ -122,6 +215,16 @@ export default function DiagramOverview(props) {
icon={<IconDeleteStroked />}
type="danger"
block
onClick={() => {
const updatedTables = [...props.tables];
const updatedFields = [...t.fields];
updatedFields.splice(j, 1);
updatedTables[i] = {
...t,
fields: [...updatedFields],
};
props.setTables(updatedTables);
}}
>
Delete
</Button>
@ -326,7 +429,28 @@ export default function DiagramOverview(props) {
</Button>
</Col>
<Col span={8}>
<Button block>Add field</Button>
<Button
onClick={() => {
const updatedTables = [...props.tables];
updatedTables[i].fields = [
...updatedTables[i].fields,
{
name: "",
type: "",
default: "",
primary: false,
unique: false,
notNull: false,
increment: false,
comment: "",
},
];
props.setTables(updatedTables);
}}
block
>
Add field
</Button>
</Col>
</Row>
</Collapse.Panel>

2
src/components/editor_panel.jsx
View File

@ -89,6 +89,7 @@ export default function EditorPanel(props) {
name: "id",
type: "UUID",
default: "",
check: "",
primary: true,
unique: true,
notNull: true,
@ -148,6 +149,7 @@ export default function EditorPanel(props) {
name: "id",
type: "UUID",
default: "",
check: "",
primary: true,
unique: true,
notNull: true,