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

51
src/components/table_overview.jsx
View File

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

3
src/data/data.js
View File

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

1
src/pages/editor.jsx
View File

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

17
src/utils/index.js
View File

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