Undo and redo enum editing

src/components/EditorHeader/ControlPanel.jsx

@@ -101,7 +101,7 @@ export default function ControlPanel({
     deleteRelationship,
     database,
   } = useTables();
-  const { enums, setEnums } = useEnums();
+  const { enums, setEnums, deleteEnum, addEnum, updateEnum } = useEnums();
   const { types, addType, deleteType, updateType, setTypes } = useTypes();
   const { notes, setNotes, updateNote, addNote, deleteNote } = useNotes();
   const { areas, setAreas, updateArea, addArea, deleteArea } = useAreas();
@@ -129,6 +129,8 @@ export default function ControlPanel({
         deleteRelationship(a.data.id, false);
       } else if (a.element === ObjectType.TYPE) {
         deleteType(types.length - 1, false);
+      } else if (a.element === ObjectType.ENUM) {
+        deleteEnum(enums.length - 1, false);
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.MOVE) {
@@ -163,6 +165,8 @@ export default function ControlPanel({
         addArea(a.data, false);
       } else if (a.element === ObjectType.TYPE) {
         addType({ id: a.id, ...a.data }, false);
+      } else if (a.element === ObjectType.ENUM) {
+        addEnum({ id: a.id, ...a.data }, false);
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.EDIT) {
@@ -295,6 +299,8 @@ export default function ControlPanel({
         } else if (a.component === "self") {
           updateType(a.tid, a.undo);
         }
+      } else if (a.element === ObjectType.ENUM) {
+        updateEnum(a.id, a.undo);
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
@@ -321,6 +327,8 @@ export default function ControlPanel({
         addRelationship(a.data, false);
       } else if (a.element === ObjectType.TYPE) {
         addType(null, false);
+      } else if (a.element === ObjectType.ENUM) {
+        addEnum(null, false);
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.MOVE) {
@@ -354,6 +362,8 @@ export default function ControlPanel({
         deleteArea(a.data.id, false);
       } else if (a.element === ObjectType.TYPE) {
         deleteType(a.id, false);
+      } else if (a.element === ObjectType.ENUM) {
+        deleteEnum(a.id, false);
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.EDIT) {
@@ -451,6 +461,8 @@ export default function ControlPanel({
         } else if (a.component === "self") {
           updateType(a.tid, a.redo);
         }
+      } else if (a.element === ObjectType.ENUM) {
+        updateEnum(a.id, a.redo);
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
@@ -982,7 +994,8 @@ export default function ControlPanel({
                   notes: notes,
                   subjectAreas: areas,
                   ...(databases[database].hasTypes && { types: types }),
-                  ...(databases[database].hasEnums && { enums: enums }),                },
+                  ...(databases[database].hasEnums && { enums: enums }),
+                },
                 null,
                 2,
               );

src/components/EditorSidePanel/EnumsTab/EnumDetails.jsx

@@ -12,16 +12,13 @@ export default function EnumDetails({ data, i }) {
   const [editField, setEditField] = useState({});
 
   return (
-    <div>
+    <>
-      <div
+      <div className="flex justify-center items-center gap-2">
-        className="flex justify-center items-center gap-2"
-        id={`scroll_enum_${data.id}`}
-      >
         <div className="font-semibold">{t("Name")}: </div>
         <Input
           value={data.name}
           placeholder={t("name")}
-          onChange={(value) => updateEnum(data.id, { name: value })}
+          onChange={(value) => updateEnum(i, { name: value })}
           onFocus={(e) => setEditField({ name: e.target.value })}
           onBlur={(e) => {
             if (e.target.value === editField.name) return;
@@ -30,7 +27,7 @@ export default function EnumDetails({ data, i }) {
               {
                 action: Action.EDIT,
                 element: ObjectType.ENUM,
-                aid: i,
+                id: i,
                 undo: editField,
                 redo: { name: e.target.value },
                 message: t("edit_enum", {
@@ -58,9 +55,8 @@ export default function EnumDetails({ data, i }) {
             ...prev,
             {
               action: Action.EDIT,
-              element: ObjectType.TABLE,
+              element: ObjectType.ENUM,
-              component: "field",
+              id: i,
-              eid: i,
               undo: editField,
               redo: { values: data.values },
               message: t("edit_enum", {
@@ -80,6 +76,6 @@ export default function EnumDetails({ data, i }) {
       >
         {t("delete")}
       </Button>
-    </div>
+    </>
   );
 }

src/components/EditorSidePanel/EnumsTab/EnumsTab.jsx

@@ -19,10 +19,11 @@ export default function EnumsTab() {
           </Button>
         </div>
       </div>
-      <Collapse>
+      <Collapse accordion>
         {enums.map((e, i) => (
           <Collapse.Panel
-            key={e.name + i}
+            key={`enum_${i}`}
+            id={`scroll_enum_${i}`}
             header={
               <div className="overflow-hidden text-ellipsis whitespace-nowrap">
                 {e.name}

src/context/EnumsContext.jsx

@@ -57,7 +57,7 @@ export default function EnumsContextProvider({ children }) {
       ]);
       setRedoStack([]);
     }
-    setEnums((prev) => prev.filter((e, i) => i !== id));
+    setEnums((prev) => prev.filter((_, i) => i !== id));
   };
 
   const updateEnum = (id, values) => {

src/i18n/locales/en.js

@@ -218,7 +218,7 @@ const en = {
       "Generic diagrams can be exported to any SQL flavor but support few data types.",
     enums: "Enums",
     add_enum: "Add enum",
-    edit_enum: "Edit enum",
+    edit_enum: "{{extra}} Edit enum {{enumName}}",
     delete_enum: "Delete enum",
   },
 };