From fc287d12f041ed546ac7c769a3219caeb0676f92 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:50:42 +0300
Subject: [PATCH] add restrictions on default, autoincrement, length

---
 src/components/table.jsx          | 57 +++++++++++++++++++++++++++++--
 src/components/table_overview.jsx | 51 +++++++++++++++++++++++++--
 src/data/data.js                  |  3 --
 src/pages/editor.jsx              |  1 +
 src/utils/index.js                | 17 +++++----
 5 files changed, 115 insertions(+), 14 deletions(-)

diff --git a/src/components/table.jsx b/src/components/table.jsx
index 837d522..168472a 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -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,
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index 274e3b2..9e8e074 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -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,
diff --git a/src/data/data.js b/src/data/data.js
index 5ecf245..ec07981 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -18,9 +18,6 @@ const sqlDataTypes = [
   "BINARY",
   "VARBINARY",
   "BLOB",
-  "CLOB",
-  "UUID",
-  "XML",
   "JSON",
 ];
 
diff --git a/src/pages/editor.jsx b/src/pages/editor.jsx
index b2d4a96..9e8ef32 100644
--- a/src/pages/editor.jsx
+++ b/src/pages/editor.jsx
@@ -87,6 +87,7 @@ export default function Editor(props) {
               unique: true,
               notNull: true,
               increment: true,
+              length: "n/a",
               comment: "",
               id: 0,
             },
diff --git a/src/utils/index.js b/src/utils/index.js
index 730508f..fe74f18 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -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");
 }