From c0050200488312a70f62d29c92a0b62e5cdaf056 Mon Sep 17 00:00:00 2001
From: 1ilit <lilitmousheghyan@gmail.com>
Date: Fri, 5 Jul 2024 22:28:44 +0300
Subject: [PATCH] Add option to declare an array

---
 .../TablesTab/FieldDetails.jsx                | 43 ++++++++++++++++++-
 src/context/DiagramContext.jsx                |  2 +-
 src/data/databases.js                         |  1 +
 src/data/datatypes.js                         |  9 ----
 src/i18n/locales/en.js                        |  1 +
 src/utils/exportSQL/postgres.js               |  2 +-
 6 files changed, 45 insertions(+), 13 deletions(-)

diff --git a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
index cce6471..f8d99c0 100644
--- a/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
+++ b/src/components/EditorSidePanel/TablesTab/FieldDetails.jsx
@@ -12,6 +12,7 @@ import { IconDeleteStroked } from "@douyinfe/semi-icons";
 import { useDiagram, useUndoRedo } from "../../../hooks";
 import { useTranslation } from "react-i18next";
 import { dbToTypes } from "../../../data/datatypes";
+import { databases } from "../../../data/databases";
 
 export default function FieldDetails({ data, tid, index }) {
   const { t } = useTranslation();
@@ -98,7 +99,7 @@ export default function FieldDetails({ data, tid, index }) {
           <div className="font-semibold">{t("size")}</div>
           <InputNumber
             className="my-2 w-full"
-            placeholder="Set length"
+            placeholder={t("size")}
             value={data.size}
             onChange={(value) => updateField(tid, index, { size: value })}
             onFocus={(e) => setEditField({ size: e.target.value })}
@@ -230,7 +231,9 @@ export default function FieldDetails({ data, tid, index }) {
         <Checkbox
           value="increment"
           checked={data.increment}
-          disabled={!dbToTypes[database][data.type].canIncrement}
+          disabled={
+            !dbToTypes[database][data.type].canIncrement || data.isArray
+          }
           onChange={(checkedValues) => {
             setUndoStack((prev) => [
               ...prev,
@@ -260,6 +263,42 @@ export default function FieldDetails({ data, tid, index }) {
           }}
         />
       </div>
+      {databases[database].hasArrays && (
+        <div className="flex justify-between items-center my-3">
+          <div className="font-medium">{t("declare_array")}</div>
+          <Checkbox
+            value="isArray"
+            checked={data.isArray}
+            onChange={(checkedValues) => {
+              setUndoStack((prev) => [
+                ...prev,
+                {
+                  action: Action.EDIT,
+                  element: ObjectType.TABLE,
+                  component: "field",
+                  tid: tid,
+                  fid: index,
+                  undo: {
+                    [checkedValues.target.value]: !checkedValues.target.checked,
+                  },
+                  redo: {
+                    [checkedValues.target.value]: checkedValues.target.checked,
+                  },
+                  message: t("edit_table", {
+                    tableName: tables[tid].name,
+                    extra: "[field]",
+                  }),
+                },
+              ]);
+              setRedoStack([]);
+              updateField(tid, index, {
+                isArray: checkedValues.target.checked,
+                increment: data.isArray ? data.increment : false,
+              });
+            }}
+          />
+        </div>
+      )}
       <div className="font-semibold">{t("comment")}</div>
       <TextArea
         className="my-2"
diff --git a/src/context/DiagramContext.jsx b/src/context/DiagramContext.jsx
index e316a97..9797c54 100644
--- a/src/context/DiagramContext.jsx
+++ b/src/context/DiagramContext.jsx
@@ -81,7 +81,7 @@ export default function DiagramContextProvider({ children }) {
           action: Action.DELETE,
           element: ObjectType.TABLE,
           data: { table: tables[id], relationship: rels },
-          message: t("delete_table", { tableName: tables[id] }),
+          message: t("delete_table", { tableName: tables[id].name }),
         },
       ]);
       setRedoStack([]);
diff --git a/src/data/databases.js b/src/data/databases.js
index 04ddeef..1645c9b 100644
--- a/src/data/databases.js
+++ b/src/data/databases.js
@@ -19,6 +19,7 @@ export const databases = {
     image: postgresImage,
     hasTypes: true,
     hasEnums: true,
+    hasArrays: true,
   },
   [DB.SQLITE]: {
     name: "SQLite",
diff --git a/src/data/datatypes.js b/src/data/datatypes.js
index f4b0147..f920e8e 100644
--- a/src/data/datatypes.js
+++ b/src/data/datatypes.js
@@ -1087,15 +1087,6 @@ const postgresTypesBase = {
     hasQuotes: true,
     noDefault: true,
   },
-  ARRAY: {
-    type: "ARRAY",
-    checkDefault: (field) => true,
-    hasCheck: false,
-    isSized: false,
-    hasPrecision: false,
-    hasQuotes: false,
-    noDefault: true,
-  },
 };
 
 export const postgresTypes = new Proxy(postgresTypesBase, {
diff --git a/src/i18n/locales/en.js b/src/i18n/locales/en.js
index 660212b..2a438a4 100644
--- a/src/i18n/locales/en.js
+++ b/src/i18n/locales/en.js
@@ -225,6 +225,7 @@ const en = {
     duplicate_enums: "Duplicate enums with the name '{{enumName}}'",
     no_enums: "No enums",
     no_enums_text: "Define enums here",
+    declare_array: "Declare array",
   },
 };
 
diff --git a/src/utils/exportSQL/postgres.js b/src/utils/exportSQL/postgres.js
index d8b138a..f1201dd 100644
--- a/src/utils/exportSQL/postgres.js
+++ b/src/utils/exportSQL/postgres.js
@@ -30,7 +30,7 @@ export function toPostgres(diagram) {
             (field) =>
               `${field.comment === "" ? "" : `\t-- ${field.comment}\n`}\t"${
                 field.name
-              }" ${field.type}${field.notNull ? " NOT NULL" : ""}${field.unique ? " UNIQUE" : ""}${
+              }" ${field.type}${field.isArray ? " ARRAY" : ""}${field.notNull ? " NOT NULL" : ""}${field.unique ? " UNIQUE" : ""}${
                 field.default.trim() !== ""
                   ? ` DEFAULT ${parseDefault(field, diagram.database)}`
                   : ""