Add option to declare an array

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"

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([]);

src/data/databases.js

@@ -19,6 +19,7 @@ export const databases = {
     image: postgresImage,
     hasTypes: true,
     hasEnums: true,
+    hasArrays: true,
   },
   [DB.SQLITE]: {
     name: "SQLite",

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, {

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",
   },
 };
 

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)}`
                   : ""