From 6515b87988197de17fed4d18477eeb13a5316626 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Tue, 19 Sep 2023 15:51:29 +0300
Subject: [PATCH] Add size and value to type fields

---
 src/components/control_panel.jsx  |   2 +
 src/components/types_overview.jsx | 226 ++++++++++++++++++++++++++----
 src/schemas/index.js              |  33 ++++-
 3 files changed, 234 insertions(+), 27 deletions(-)

diff --git a/src/components/control_panel.jsx b/src/components/control_panel.jsx
index 4c34334..64bc49f 100644
--- a/src/components/control_panel.jsx
+++ b/src/components/control_panel.jsx
@@ -716,6 +716,7 @@ export default function ControlPanel(props) {
                   relationships: relationships,
                   notes: notes,
                   subjectAreas: areas,
+                  types: types,
                 },
                 null,
                 2
@@ -774,6 +775,7 @@ export default function ControlPanel(props) {
                   relationships: relationships,
                   notes: notes,
                   subjectAreas: areas,
+                  types: types
                 },
                 null,
                 2
diff --git a/src/components/types_overview.jsx b/src/components/types_overview.jsx
index 4acdc4d..7e1d934 100644
--- a/src/components/types_overview.jsx
+++ b/src/components/types_overview.jsx
@@ -9,6 +9,8 @@ import {
   Button,
   Card,
   Select,
+  TagInput,
+  InputNumber,
   AutoComplete,
   Toast,
   Empty,
@@ -19,12 +21,14 @@ import {
   IconPlus,
   IconSearch,
   IconInfoCircle,
+  IconMore,
 } from "@douyinfe/semi-icons";
 import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
 import { TypeContext, UndoRedoContext } from "../pages/editor";
+import { isSized, hasPrecision, getSize } from "../utils";
 
 export default function TableOverview(props) {
   const [value, setValue] = useState("");
@@ -202,36 +206,206 @@ export default function TableOverview(props) {
                             },
                           ]);
                           setRedoStack([]);
-                          updateType(i, {
-                            fields: t.fields.map((e, id) =>
-                              id === j ? { ...f, type: value } : e
-                            ),
-                          });
+                          if (value === "ENUM" || value === "SET") {
+                            updateType(i, {
+                              fields: t.fields.map((e, id) =>
+                                id === j
+                                  ? {
+                                      ...f,
+                                      type: value,
+                                      values: f.values ? [...f.values] : [],
+                                    }
+                                  : e
+                              ),
+                            });
+                          } else if (isSized(value) || hasPrecision(value)) {
+                            updateType(i, {
+                              fields: t.fields.map((e, id) =>
+                                id === j
+                                  ? { ...f, type: value, size: getSize(value) }
+                                  : e
+                              ),
+                            });
+                          } else {
+                            updateType(i, {
+                              fields: t.fields.map((e, id) =>
+                                id === j ? { ...f, type: value } : e
+                              ),
+                            });
+                          }
                         }}
                       ></Select>
                     </Col>
                     <Col span={3}>
-                      <Button
-                        icon={<IconDeleteStroked />}
-                        type="danger"
-                        onClick={() => {
-                          setUndoStack((prev) => [
-                            ...prev,
-                            {
-                              action: Action.EDIT,
-                              element: ObjectType.TYPE,
-                              component: "field_delete",
-                              tid: i,
-                              fid: j,
-                              data: f,
-                              message: `Delete field`,
-                            },
-                          ]);
-                          updateType(i, {
-                            fields: t.fields.filter((field, k) => k !== j),
-                          });
-                        }}
-                      ></Button>
+                      <Popover
+                        content={
+                          <div className="popover-theme w-[240px]">
+                            {(f.type === "ENUM" || f.type === "SET") && (
+                              <>
+                                <div className="font-semibold mb-1">
+                                  {f.type} values
+                                </div>
+                                <TagInput
+                                  separator={[",", ", ", " ,"]}
+                                  value={f.values}
+                                  validateStatus={
+                                    !f.values || f.values.length === 0
+                                      ? "error"
+                                      : "default"
+                                  }
+                                  className="my-2"
+                                  placeholder="Use ',' for batch input"
+                                  onChange={(v) =>
+                                    updateType(i, {
+                                      fields: t.fields.map((e, id) =>
+                                        id === j ? { ...f, values: v } : e
+                                      ),
+                                    })
+                                  }
+                                  onFocus={(e) =>
+                                    setEditField({ values: f.values })
+                                  }
+                                  onBlur={(e) => {
+                                    if (
+                                      JSON.stringify(editField.values) ===
+                                      JSON.stringify(f.values)
+                                    )
+                                      return;
+                                    setUndoStack((prev) => [
+                                      ...prev,
+                                      {
+                                        action: Action.EDIT,
+                                        element: ObjectType.TYPE,
+                                        component: "field",
+                                        tid: i,
+                                        fid: j,
+                                        undo: editField,
+                                        redo: { values: f.values },
+                                        message: `Edit type field values to "${JSON.stringify(
+                                          f.values
+                                        )}"`,
+                                      },
+                                    ]);
+                                    setRedoStack([]);
+                                  }}
+                                />
+                              </>
+                            )}
+                            {isSized(f.type) && (
+                              <>
+                                <div className="font-semibold">Size</div>
+                                <InputNumber
+                                  className="my-2 w-full"
+                                  placeholder="Set length"
+                                  value={f.size}
+                                  onChange={(value) =>
+                                    updateType(i, {
+                                      fields: t.fields.map((e, id) =>
+                                        id === j ? { ...f, size: value } : e
+                                      ),
+                                    })
+                                  }
+                                  onFocus={(e) =>
+                                    setEditField({ size: e.target.value })
+                                  }
+                                  onBlur={(e) => {
+                                    if (e.target.value === editField.size)
+                                      return;
+                                    setUndoStack((prev) => [
+                                      ...prev,
+                                      {
+                                        action: Action.EDIT,
+                                        element: ObjectType.TABLE,
+                                        component: "field",
+                                        tid: i,
+                                        fid: j,
+                                        undo: editField,
+                                        redo: { size: e.target.value },
+                                        message: `Edit type field size to ${e.target.value}`,
+                                      },
+                                    ]);
+                                    setRedoStack([]);
+                                  }}
+                                />
+                              </>
+                            )}
+                            {hasPrecision(f.type) && (
+                              <>
+                                <div className="font-semibold">Precision</div>
+                                <Input
+                                  className="my-2 w-full"
+                                  placeholder="Set precision: (size, d)"
+                                  validateStatus={
+                                    /^\(\d+,\s*\d+\)$|^$/.test(f.size)
+                                      ? "default"
+                                      : "error"
+                                  }
+                                  value={f.size}
+                                  onChange={(value) =>
+                                    updateType(i, {
+                                      fields: t.fields.map((e, id) =>
+                                        id === j ? { ...f, size: value } : e
+                                      ),
+                                    })
+                                  }
+                                  onFocus={(e) =>
+                                    setEditField({ size: e.target.value })
+                                  }
+                                  onBlur={(e) => {
+                                    if (e.target.value === editField.size)
+                                      return;
+                                    setUndoStack((prev) => [
+                                      ...prev,
+                                      {
+                                        action: Action.EDIT,
+                                        element: ObjectType.TABLE,
+                                        component: "field",
+                                        tid: i,
+                                        fid: j,
+                                        undo: editField,
+                                        redo: { size: e.target.value },
+                                        message: `Edit type field precision to ${e.target.value}`,
+                                      },
+                                    ]);
+                                    setRedoStack([]);
+                                  }}
+                                />
+                              </>
+                            )}
+                            <Button
+                              icon={<IconDeleteStroked />}
+                              block
+                              type="danger"
+                              onClick={() => {
+                                setUndoStack((prev) => [
+                                  ...prev,
+                                  {
+                                    action: Action.EDIT,
+                                    element: ObjectType.TYPE,
+                                    component: "field_delete",
+                                    tid: i,
+                                    fid: j,
+                                    data: f,
+                                    message: `Delete field`,
+                                  },
+                                ]);
+                                updateType(i, {
+                                  fields: t.fields.filter(
+                                    (field, k) => k !== j
+                                  ),
+                                });
+                              }}
+                            >
+                              Delete field
+                            </Button>
+                          </div>
+                        }
+                        showArrow
+                        trigger="click"
+                        position="right"
+                      >
+                        <Button icon={<IconMore />} type="tertiary"></Button>
+                      </Popover>
                     </Col>
                   </Row>
                 ))}
diff --git a/src/schemas/index.js b/src/schemas/index.js
index 59bd697..069dd66 100644
--- a/src/schemas/index.js
+++ b/src/schemas/index.js
@@ -85,6 +85,30 @@ const noteSchema = {
   required: ["id", "x", "y", "title", "content", "color", "height"],
 };
 
+const typeSchema = {
+  type: "object",
+  properties: {
+    name: { type: "string" },
+    fields: {
+      type: "array",
+      items: {
+        type: "object",
+        properties: {
+          name: { type: "string" },
+          type: { type: "string" },
+          values: {
+            type: "array",
+            items: { type: "string" },
+          },
+        },
+        required: ["name", "type"],
+      },
+    },
+    comment: { type: "string" },
+  },
+  required: ["name", "fields", "comment"],
+};
+
 const jsonSchema = {
   type: "object",
   properties: {
@@ -153,4 +177,11 @@ const ddbSchema = {
   },
 };
 
-export { jsonSchema, ddbSchema, tableSchema, noteSchema, areaSchema };
+export {
+  jsonSchema,
+  ddbSchema,
+  tableSchema,
+  noteSchema,
+  areaSchema,
+  typeSchema,
+};