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

add restrictions on default, autoincrement, length

Browse Source
This commit is contained in:
1ilit 2023-09-19 15:50:42 +03:00
parent 348363acbb
commit fc287d12f0
5 changed files with 115 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/table.jsx
View File

@ -246,7 +246,11 @@ export default function Table(props) {
<SideSheet
title="Edit table"
size="small"
visible={selectedElement.element===ObjectType.TABLE && selectedElement.id===props.tableData.id && selectedElement.openDialogue}
visible={
selectedElement.element === ObjectType.TABLE &&
selectedElement.id === props.tableData.id &&
selectedElement.openDialogue
}
onCancel={() =>
setSelectedElement((prev) => ({
...prev,
@ -338,7 +342,10 @@ export default function Table(props) {
},
]);
setRedoStack([]);
updateField(props.tableData.id, j, { type: value });
updateField(props.tableData.id, j, {
type: value,
length: value === "VARCHAR" ? 255 : "n/a",
});
}}
></Select>
</Col>
@ -400,6 +407,13 @@ export default function Table(props) {
className="my-2"
placeholder="Set default"
value={f.default}
disabled={
f.type === "BLOB" ||
f.type === "JSON" ||
f.type === "GEOMETRY" ||
f.type === "TEXT" ||
f.increment
}
onChange={(value) =>
updateField(props.tableData.id, j, { default: value })
}
@ -423,6 +437,35 @@ export default function Table(props) {
setRedoStack([]);
}}
/>
<div className="font-semibold">Length</div>
<Input
className="my-2"
placeholder="Set length"
value={f.length}
disabled={!(f.type === "VARCHAR")}
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>
<Input
className="my-2"
@ -486,6 +529,13 @@ export default function Table(props) {
<Checkbox
value="increment"
defaultChecked={f.increment}
disabled={
!(
f.type === "INT" ||
f.type === "BIGINT" ||
f.type === "SMALLINT"
)
}
onChange={(checkedValues) => {
setUndoStack((prev) => [
...prev,
@ -572,7 +622,7 @@ export default function Table(props) {
</div>
}
trigger="click"
position="rightTop"
position="right"
showArrow
>
<Button type="tertiary" icon={<IconMore />}></Button>
@ -874,6 +924,7 @@ export default function Table(props) {
type: "",
default: "",
check: "",
length: "n/a",
primary: false,
unique: false,
notNull: false,

51
src/components/table_overview.jsx
View File

@ -176,7 +176,10 @@ export default function TableOverview(props) {
},
]);
setRedoStack([]);
updateField(i, j, { type: value });
updateField(i, j, {
type: value,
length: value === "VARCHAR" ? 255 : "n/a",
});
}}
></Select>
</Col>
@ -238,6 +241,13 @@ export default function TableOverview(props) {
className="my-2"
placeholder="Set default"
value={f.default}
disabled={
f.type === "BLOB" ||
f.type === "JSON" ||
f.type === "GEOMETRY" ||
f.type === "TEXT" ||
f.increment
}
onChange={(value) =>
updateField(i, j, { default: value })
}
@ -262,6 +272,35 @@ export default function TableOverview(props) {
setRedoStack([]);
}}
/>
<div className="font-semibold">Length</div>
<Input
className="my-2"
placeholder="Set length"
value={f.length}
disabled={!(f.type === "VARCHAR")}
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">
Check Expression
</div>
@ -329,6 +368,13 @@ export default function TableOverview(props) {
<Checkbox
value="increment"
defaultChecked={f.increment}
disabled={
!(
f.type === "INT" ||
f.type === "BIGINT" ||
f.type === "SMALLINT"
)
}
onChange={(checkedValues) => {
setUndoStack((prev) => [
...prev,
@ -416,7 +462,7 @@ export default function TableOverview(props) {
</div>
}
trigger="click"
position="rightTop"
position="right"
showArrow
>
<Button type="tertiary" icon={<IconMore />}></Button>
@ -738,6 +784,7 @@ export default function TableOverview(props) {
default: "",
check: "",
primary: false,
length: "n/a",
unique: false,
notNull: false,
increment: false,

3
src/data/data.js
View File

@ -18,9 +18,6 @@ const sqlDataTypes = [
"BINARY",
"VARBINARY",
"BLOB",
"CLOB",
"UUID",
"XML",
"JSON",
];

1
src/pages/editor.jsx
View File

@ -87,6 +87,7 @@ export default function Editor(props) {
unique: true,
notNull: true,
increment: true,
length: "n/a",
comment: "",
id: 0,
},

17
src/utils/index.js
View File

@ -58,13 +58,18 @@ function jsonToSQL(obj) {
(field) =>
`${field.comment === "" ? "" : `\t-- ${field.comment}\n`}\t\`${
field.name
}\` ${field.type} ${field.notNull ? "NOT NULL" : ""} ${
field.increment ? "AUTO_INCREMENT" : ""
} ${field.unique ? "UNIQUE" : ""},`
}\` ${field.type}${
field.length !== "n/a" ? `(${field.length})` : ""
}${field.notNull ? " NOT NULL" : ""}${
field.increment ? " AUTO_INCREMENT" : ""
}${field.unique ? " UNIQUE" : ""}${
field.default !== "" ? ` DEFAULT ${field.default}` : ""
},`
)
.join("\n")}\n\tPRIMARY KEY(${table.fields.map((f) =>
f.primary ? `${f.name}` : ""
)})\n);`
.join("\n")}\n\tPRIMARY KEY(${table.fields
.filter((f) => f.primary)
.map((f) => `\`${f.name}\``)
.join(", ")})\n);`
)
.join("\n");
}