From 662e2294e813803b60409f7543f9bbee0a94a128 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:50:43 +0300
Subject: [PATCH] add enum type

---
 src/components/table.jsx          | 123 ++++++++++++++++++++++--------
 src/components/table_overview.jsx | 123 ++++++++++++++++++++++--------
 src/data/data.js                  |   1 +
 src/utils/index.js                |   6 +-
 4 files changed, 186 insertions(+), 67 deletions(-)

diff --git a/src/components/table.jsx b/src/components/table.jsx
index 168472a..4145293 100644
--- a/src/components/table.jsx
+++ b/src/components/table.jsx
@@ -23,6 +23,7 @@ import {
   TextArea,
   Card,
   Checkbox,
+  TagInput,
   Row,
   Col,
   Popover,
@@ -342,10 +343,22 @@ export default function Table(props) {
                       },
                     ]);
                     setRedoStack([]);
-                    updateField(props.tableData.id, j, {
-                      type: value,
-                      length: value === "VARCHAR" ? 255 : "n/a",
-                    });
+                    const incr =
+                      f.increment &&
+                      (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>
               </Col>
@@ -437,35 +450,79 @@ 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([]);
-                        }}
-                      />
+                      {f.type === "ENUM" && (
+                        <>
+                          <div className="font-semibold mb-1">Enum values</div>
+                          <TagInput
+                            separator={[",", ", ", " ,"]}
+                            value={f.enumValues}
+                            className="my-2"
+                            placeholder="Use ',' for batch input"
+                            onChange={(v) =>
+                              updateField(props.tableData.id, j, {
+                                enumValues: v,
+                              })
+                            }
+                            onFocus={(e) =>
+                              setEditField({ enumValues: f.enumValues })
+                            }
+                            onBlur={(e) => {
+                              if (
+                                JSON.stringify(editField.enumValues) ===
+                                JSON.stringify(f.enumValues)
+                              )
+                                return;
+                              setUndoStack((prev) => [
+                                ...prev,
+                                {
+                                  action: Action.EDIT,
+                                  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>
                       <Input
                         className="my-2"
diff --git a/src/components/table_overview.jsx b/src/components/table_overview.jsx
index 9e8e074..9710a4b 100644
--- a/src/components/table_overview.jsx
+++ b/src/components/table_overview.jsx
@@ -14,6 +14,7 @@ import {
   TextArea,
   Button,
   Card,
+  TagInput,
   Popover,
   Checkbox,
   Select,
@@ -176,10 +177,23 @@ export default function TableOverview(props) {
                             },
                           ]);
                           setRedoStack([]);
-                          updateField(i, j, {
-                            type: value,
-                            length: value === "VARCHAR" ? 255 : "n/a",
-                          });
+
+                          const incr =
+                            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>
                     </Col>
@@ -272,35 +286,78 @@ 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([]);
-                              }}
-                            />
+                            {f.type === "ENUM" && (
+                              <>
+                                <div className="font-semibold mb-1">
+                                  Enum values
+                                </div>
+                                <TagInput
+                                  separator={[",", ", ", " ,"]}
+                                  value={f.enumValues}
+                                  className="my-2"
+                                  placeholder="Use ',' for batch input"
+                                  onChange={(v) =>
+                                    updateField(i, j, { enumValues: v })
+                                  }
+                                  onFocus={(e) =>
+                                    setEditField({ enumValues: f.enumValues })
+                                  }
+                                  onBlur={(e) => {
+                                    if (
+                                      JSON.stringify(editField.enumValues) ===
+                                      JSON.stringify(f.enumValues)
+                                    )
+                                      return;
+                                    setUndoStack((prev) => [
+                                      ...prev,
+                                      {
+                                        action: Action.EDIT,
+                                        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">
                               Check Expression
                             </div>
diff --git a/src/data/data.js b/src/data/data.js
index ec07981..04f3bb1 100644
--- a/src/data/data.js
+++ b/src/data/data.js
@@ -19,6 +19,7 @@ const sqlDataTypes = [
   "VARBINARY",
   "BLOB",
   "JSON",
+  "ENUM",
 ];
 
 const tableThemes = [
diff --git a/src/utils/index.js b/src/utils/index.js
index fe74f18..e15062a 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -59,7 +59,11 @@ function jsonToSQL(obj) {
               `${field.comment === "" ? "" : `\t-- ${field.comment}\n`}\t\`${
                 field.name
               }\` ${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.increment ? " AUTO_INCREMENT" : ""
               }${field.unique ? " UNIQUE" : ""}${