Fix field type not updating when enum name is changed (#193 part2)

drawdb-io · Jul 31, 2024 · 844b241 · 844b241
1 parent 34d9045
commit 844b241
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
@@ -308,6 +308,13 @@ export default function ControlPanel({
         }
       } else if (a.element === ObjectType.ENUM) {
         updateEnum(a.id, a.undo);
+        if (a.updatedFields) {
+          if (a.undo.name) {
+            a.updatedFields.forEach((x) =>
+              updateField(x.tid, x.fid, { type: a.undo.name.toUpperCase() }),
+            );
+          }
+        }
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
@@ -477,6 +484,13 @@ export default function ControlPanel({
         }
       } else if (a.element === ObjectType.ENUM) {
         updateEnum(a.id, a.redo);
+        if (a.updatedFields) {
+          if (a.redo.name) {
+            a.updatedFields.forEach((x) =>
+              updateField(x.tid, x.fid, { type: a.redo.name.toUpperCase() }),
+            );
+          }
+        }
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {

diff --git a/src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx b/src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx
@@ -1,13 +1,14 @@
 import { useState } from "react";
 import { Button, Input, TagInput } from "@douyinfe/semi-ui";
 import { IconDeleteStroked } from "@douyinfe/semi-icons";
-import { useEnums, useUndoRedo } from "../../../hooks";
+import { useDiagram, useEnums, useUndoRedo } from "../../../hooks";
 import { Action, ObjectType } from "../../../data/constants";
 import { useTranslation } from "react-i18next";
 
 export default function EnumDetails({ data, i }) {
   const { t } = useTranslation();
   const { deleteEnum, updateEnum } = useEnums();
+  const { tables, updateField } = useDiagram();
   const { setUndoStack, setRedoStack } = useUndoRedo();
   const [editField, setEditField] = useState({});
 
@@ -19,10 +20,29 @@ export default function EnumDetails({ data, i }) {
           value={data.name}
           placeholder={t("name")}
           validateStatus={data.name.trim() === "" ? "error" : "default"}
-          onChange={(value) => updateEnum(i, { name: value })}
+          onChange={(value) => {
+            updateEnum(i, { name: value });
+            tables.forEach((table, i) => {
+              table.fields.forEach((field, j) => {
+                if (field.type.toLowerCase() === data.name.toLowerCase()) {
+                  updateField(i, j, { type: value.toUpperCase() });
+                }
+              });
+            });
+          }}
           onFocus={(e) => setEditField({ name: e.target.value })}
           onBlur={(e) => {
             if (e.target.value === editField.name) return;
+
+            const updatedFields = tables.reduce((acc, table) => {
+              table.fields.forEach((field, i) => {
+                if (field.type.toLowerCase() === data.name.toLowerCase()) {
+                  acc.push({ tid: table.id, fid: i });
+                }
+              });
+              return acc;
+            }, []);
+
             setUndoStack((prev) => [
               ...prev,
               {
@@ -31,6 +51,7 @@ export default function EnumDetails({ data, i }) {
                 id: i,
                 undo: editField,
                 redo: { name: e.target.value },
+                updatedFields,
                 message: t("edit_enum", {
                   enumName: e.target.value,
                   extra: "[name]",

diff --git a/src/components/EditorSidePanel/TypesTab/TypeInfo.jsx b/src/components/EditorSidePanel/TypesTab/TypeInfo.jsx
@@ -53,8 +53,10 @@ export default function TypeInfo({ index, data }) {
               if (e.target.value === editField.name) return;
 
               const updatedFields = tables.reduce((acc, table) => {
-                table.fields.forEach((_, i) => {
-                  acc.push({ tid: table.id, fid: i });
+                table.fields.forEach((field, i) => {
+                  if (field.type.toLowerCase() === data.name.toLowerCase()) {
+                    acc.push({ tid: table.id, fid: i });
+                  }
                 });
                 return acc;
               }, []);