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

add enum type

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:43 +03:00
parent fc287d12f0
commit 662e2294e8
4 changed files with 186 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

123
src/components/table.jsx
View File

@ -23,6 +23,7 @@ import {
TextArea, TextArea,
Card, Card,
Checkbox, Checkbox,
TagInput,
Row, Row,
Col, Col,
Popover, Popover,
@ -342,10 +343,22 @@ export default function Table(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
updateField(props.tableData.id, j, { const incr =
type: value, f.increment &&
length: value === "VARCHAR" ? 255 : "n/a", (value === "INT" ||
}); value === "BIGINT" ||
value === "SMALLINT");
updateField(
props.tableData.id,
j,
value === "ENUM"
? { type: value, enumValues: [], increment: incr }
: {
type: value,
length: value === "VARCHAR" ? 255 : "n/a",
increment: incr,
}
);
}} }}
></Select> ></Select>
</Col> </Col>
@ -437,35 +450,79 @@ export default function Table(props) {
setRedoStack([]); setRedoStack([]);
}} }}
/> />
<div className="font-semibold">Length</div> {f.type === "ENUM" && (
<Input <>
className="my-2" <div className="font-semibold mb-1">Enum values</div>
placeholder="Set length" <TagInput
value={f.length} separator={[",", ", ", " ,"]}
disabled={!(f.type === "VARCHAR")} value={f.enumValues}
onChange={(value) => className="my-2"
updateField(props.tableData.id, j, { length: value }) placeholder="Use ',' for batch input"
} onChange={(v) =>
onFocus={(e) => updateField(props.tableData.id, j, {
setEditField({ length: e.target.value }) enumValues: v,
} })
onBlur={(e) => { }
if (e.target.value === editField.length) return; onFocus={(e) =>
setUndoStack((prev) => [ setEditField({ enumValues: f.enumValues })
...prev, }
{ onBlur={(e) => {
action: Action.EDIT, if (
element: ObjectType.TABLE, JSON.stringify(editField.enumValues) ===
component: "field", JSON.stringify(f.enumValues)
tid: props.tableData.id, )
fid: j, return;
undo: editField, setUndoStack((prev) => [
redo: { length: e.target.value }, ...prev,
}, {
]); action: Action.EDIT,
setRedoStack([]); element: ObjectType.TABLE,
}} component: "field",
/> tid: props.tableData.id,
fid: j,
undo: editField,
redo: { enumValues: f.enumValues },
},
]);
setRedoStack([]);
}}
/>
</>
)}
{f.type === "VARCHAR" && (
<>
<div className="font-semibold">Length</div>
<Input
className="my-2"
placeholder="Set length"
value={f.length}
onChange={(value) =>
updateField(props.tableData.id, j, {
length: value,
})
}
onFocus={(e) =>
setEditField({ length: e.target.value })
}
onBlur={(e) => {
if (e.target.value === editField.length) return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "field",
tid: props.tableData.id,
fid: j,
undo: editField,
redo: { length: e.target.value },
},
]);
setRedoStack([]);
}}
/>
</>
)}
<div className="font-semibold">Check Expression</div> <div className="font-semibold">Check Expression</div>
<Input <Input
className="my-2" className="my-2"

123
src/components/table_overview.jsx
View File

@ -14,6 +14,7 @@ import {
TextArea, TextArea,
Button, Button,
Card, Card,
TagInput,
Popover, Popover,
Checkbox, Checkbox,
Select, Select,
@ -176,10 +177,23 @@ export default function TableOverview(props) {
}, },
]); ]);
setRedoStack([]); setRedoStack([]);
updateField(i, j, {
type: value, const incr =
length: value === "VARCHAR" ? 255 : "n/a", f.increment &&
}); (value === "INT" ||
value === "BIGINT" ||
value === "SMALLINT");
updateField(
i,
j,
value === "ENUM"
? { type: value, enumValues: [], increment: incr }
: {
type: value,
length: value === "VARCHAR" ? 255 : "n/a",
increment: incr,
}
);
}} }}
></Select> ></Select>
</Col> </Col>
@ -272,35 +286,78 @@ export default function TableOverview(props) {
setRedoStack([]); setRedoStack([]);
}} }}
/> />
<div className="font-semibold">Length</div> {f.type === "ENUM" && (
<Input <>
className="my-2" <div className="font-semibold mb-1">
placeholder="Set length" Enum values
value={f.length} </div>
disabled={!(f.type === "VARCHAR")} <TagInput
onChange={(value) => separator={[",", ", ", " ,"]}
updateField(i, j, { length: value }) value={f.enumValues}
} className="my-2"
onFocus={(e) => placeholder="Use ',' for batch input"
setEditField({ length: e.target.value }) onChange={(v) =>
} updateField(i, j, { enumValues: v })
onBlur={(e) => { }
if (e.target.value === editField.length) return; onFocus={(e) =>
setUndoStack((prev) => [ setEditField({ enumValues: f.enumValues })
...prev, }
{ onBlur={(e) => {
action: Action.EDIT, if (
element: ObjectType.TABLE, JSON.stringify(editField.enumValues) ===
component: "field", JSON.stringify(f.enumValues)
tid: i, )
fid: j, return;
undo: editField, setUndoStack((prev) => [
redo: { length: e.target.value }, ...prev,
}, {
]); action: Action.EDIT,
setRedoStack([]); element: ObjectType.TABLE,
}} component: "field",
/> tid: i,
fid: j,
undo: editField,
redo: { enumValues: f.enumValues },
},
]);
setRedoStack([]);
}}
/>
</>
)}
{f.type === "VARCHAR" && (
<>
<div className="font-semibold">Length</div>
<Input
className="my-2"
placeholder="Set length"
value={f.length}
onChange={(value) =>
updateField(i, j, { length: value })
}
onFocus={(e) =>
setEditField({ length: e.target.value })
}
onBlur={(e) => {
if (e.target.value === editField.length)
return;
setUndoStack((prev) => [
...prev,
{
action: Action.EDIT,
element: ObjectType.TABLE,
component: "field",
tid: i,
fid: j,
undo: editField,
redo: { length: e.target.value },
},
]);
setRedoStack([]);
}}
/>
</>
)}
<div className="font-semibold"> <div className="font-semibold">
Check Expression Check Expression
</div> </div>

1
src/data/data.js
View File

@ -19,6 +19,7 @@ const sqlDataTypes = [
"VARBINARY", "VARBINARY",
"BLOB", "BLOB",
"JSON", "JSON",
"ENUM",
]; ];
const tableThemes = [ const tableThemes = [

6
src/utils/index.js
View File

@ -59,7 +59,11 @@ function jsonToSQL(obj) {
`${field.comment === "" ? "" : `\t-- ${field.comment}\n`}\t\`${ `${field.comment === "" ? "" : `\t-- ${field.comment}\n`}\t\`${
field.name field.name
}\` ${field.type}${ }\` ${field.type}${
field.length !== "n/a" ? `(${field.length})` : "" field.length !== "n/a"
? `(${field.length})`
: field.enumValues
? `(${field.enumValues.map((v) => `"${v}"`).join(", ")})`
: ""
}${field.notNull ? " NOT NULL" : ""}${ }${field.notNull ? " NOT NULL" : ""}${
field.increment ? " AUTO_INCREMENT" : "" field.increment ? " AUTO_INCREMENT" : ""
}${field.unique ? " UNIQUE" : ""}${ }${field.unique ? " UNIQUE" : ""}${