Undo redo parsing for references

src/components/control_panel.jsx

@@ -195,19 +195,11 @@ export default function ControlPanel(props) {
         } else if (a.component === "comment") {
           updateTable(a.tid, a.undo, false);
         } else if (a.component === "index_add") {
-          setTables((prev) =>
+          updateTable(a.tid, {
-            prev.map((table, i) => {
+            indices: tables[a.tid].indices
-              if (table.id === a.tid) {
-                return {
-                  ...table,
-                  indices: table.indices
               .filter((e) => e.id !== tables[a.tid].indices.length - 1)
               .map((t, i) => ({ ...t, id: i })),
-                };
+          });
-              }
-              return table;
-            })
-          );
         } else if (a.component === "index") {
           updateTable(a.tid, {
             indices: tables[a.tid].indices.map((index) =>
@@ -236,6 +228,10 @@ export default function ControlPanel(props) {
         } else if (a.component === "self") {
           updateTable(a.tid, a.undo);
         }
+      } else if (a.element === ObjectType.RELATIONSHIP) {
+        setRelationships((prev) =>
+          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.undo } : e))
+        );
       }
       setRedoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
@@ -365,6 +361,10 @@ export default function ControlPanel(props) {
         } else if (a.component === "self") {
           updateTable(a.tid, a.redo);
         }
+      } else if (a.element === ObjectType.RELATIONSHIP) {
+        setRelationships((prev) =>
+          prev.map((e, idx) => (idx === a.rid ? { ...e, ...a.redo } : e))
+        );
       }
       setUndoStack((prev) => [...prev, a]);
     } else if (a.action === Action.PAN) {
@@ -1105,7 +1105,7 @@ export default function ControlPanel(props) {
               !exportData.data),
         }}
         cancelText="Cancel"
-        width={540}
+        width={600}
       >
         {visible === MODAL.IMPORT ? (
           <div>

src/components/reference_overview.jsx

@@ -3,9 +3,9 @@ import {
   AutoComplete,
   Collapse,
   Empty,
-  Form,
   Row,
   Col,
+  Select,
   Button,
   Checkbox,
   Popover,
@@ -22,8 +22,8 @@ import {
   IllustrationNoContent,
   IllustrationNoContentDark,
 } from "@douyinfe/semi-illustrations";
-import { Cardinality, Constraint } from "../data/data";
+import { Cardinality, Constraint, Action, ObjectType } from "../data/data";
-import { TableContext } from "../pages/editor";
+import { TableContext, UndoRedoContext } from "../pages/editor";
 
 export default function ReferenceOverview(props) {
   const columns = [
@@ -38,6 +38,7 @@ export default function ReferenceOverview(props) {
   ];
   const { tables, relationships, setRelationships, deleteRelationship } =
     useContext(TableContext);
+  const { setUndoStack, setRedoStack } = useContext(UndoRedoContext);
   const [refActiveIndex, setRefActiveIndex] = useState("");
   const [value, setValue] = useState("");
   const [filteredResult, setFilteredResult] = useState(
@@ -99,48 +100,35 @@ export default function ReferenceOverview(props) {
           relationships.map((r, i) => (
             <div id={`scroll_ref_${r.id}`} key={i}>
               <Collapse.Panel header={<div>{r.name}</div>} itemKey={`${i}`}>
-                <Form
+                <div className="flex justify-between items-center mb-3">
-                  onChange={(value) =>
-                    setRelationships((prev) =>
-                      prev.map((e, idx) =>
-                        idx === i ? { ...e, ...value.values } : e
-                      )
-                    )
-                  }
-                >
-                  <div className="flex justify-between items-center my-1">
                   <div className="me-3">
-                      <strong>Primary: </strong>
+                    <span className="font-semibold">Primary: </span>
                     {tables[r.endTableId].name}
                   </div>
                   <div className="mx-1">
-                      <strong>Foreign: </strong>
+                    <span className="font-semibold">Foreign: </span>
                     {tables[r.startTableId].name}
                   </div>
                   <div className="ms-1">
                     <Popover
                       content={
-                          <div className="p-2 w-[260px]">
+                        <div className="p-2">
                           <Table
                             columns={columns}
                             dataSource={[
                               {
                                 key: "1",
-                                  foreign: tables[r.startTableId].name,
+                                foreign: `${tables[r.startTableId].name}(${
-                                  primary: tables[r.endTableId].name,
+                                  tables[r.startTableId].fields[r.startFieldId]
-                                },
+                                    .name
-                                {
+                                })`,
-                                  key: "2",
+                                primary: `${tables[r.endTableId].name}(${
-                                  foreign:
+                                  tables[r.endTableId].fields[r.endFieldId].name
-                                    tables[r.startTableId].fields[
+                                })`,
-                                      r.startFieldId
-                                    ].name,
-                                  primary:
-                                    tables[r.endTableId].fields[r.endFieldId]
-                                      .name,
                               },
                             ]}
                             pagination={false}
+                            size="small"
                             bordered
                           />
                           <div className="mt-2">
@@ -158,51 +146,116 @@ export default function ReferenceOverview(props) {
                     </Popover>
                   </div>
                 </div>
-                  <Form.Input initValue={r.name} field="name" label="Name" />
+                <div className="font-semibold my-1">Cardinality</div>
-                  <Form.Select
+                <Select
                   optionList={Object.values(Cardinality).map((v) => ({
                     label: v,
                     value: v,
                   }))}
-                    field="cardinality"
+                  value={r.cardinality}
-                    label="Cardinality"
-                    initValue={r.cardinality}
                   className="w-full"
-                  ></Form.Select>
+                  onChange={(value) => {
-                  <Row gutter={6}>
+                    setUndoStack((prev) => [
+                      ...prev,
+                      {
+                        action: Action.EDIT,
+                        element: ObjectType.RELATIONSHIP,
+                        rid: i,
+                        undo: { cardinality: r.cardinality },
+                        redo: { cardinality: value },
+                      },
+                    ]);
+                    setRedoStack([]);
+                    setRelationships((prev) =>
+                      prev.map((e, idx) =>
+                        idx === i ? { ...e, cardinality: value } : e
+                      )
+                    );
+                  }}
+                ></Select>
+                <Row gutter={6} className="my-3">
                   <Col span={12}>
-                      <Form.Select
+                    <div className="font-semibold">On update: </div>
+                    <Select
                       optionList={Object.values(Constraint).map((v) => ({
                         label: v,
                         value: v,
                       }))}
-                        field="updateConstraint"
+                      value={r.updateConstraint}
-                        label="On update"
-                        initValue={r.updateConstraint}
                       className="w-full"
-                      ></Form.Select>
+                      onChange={(value) => {
+                        setUndoStack((prev) => [
+                          ...prev,
+                          {
+                            action: Action.EDIT,
+                            element: ObjectType.RELATIONSHIP,
+                            rid: i,
+                            undo: { updateConstraint: r.updateConstraint },
+                            redo: { updateConstraint: value },
+                          },
+                        ]);
+                        setRedoStack([]);
+                        setRelationships((prev) =>
+                          prev.map((e, idx) =>
+                            idx === i ? { ...e, updateConstraint: value } : e
+                          )
+                        );
+                      }}
+                    ></Select>
                   </Col>
                   <Col span={12}>
-                      <Form.Select
+                    <div className="font-semibold">On delete: </div>
+                    <Select
                       optionList={Object.values(Constraint).map((v) => ({
                         label: v,
                         value: v,
                       }))}
-                        field="deleteConstraint"
+                      value={r.deleteConstraint}
-                        label="On delete"
-                        initValue={r.deleteConstraint}
                       className="w-full"
-                      ></Form.Select>
+                      onChange={(value) => {
+                        setUndoStack((prev) => [
+                          ...prev,
+                          {
+                            action: Action.EDIT,
+                            element: ObjectType.RELATIONSHIP,
+                            rid: i,
+                            undo: { deleteConstraint: r.deleteConstraint },
+                            redo: { deleteConstraint: value },
+                          },
+                        ]);
+                        setRedoStack([]);
+                        setRelationships((prev) =>
+                          prev.map((e, idx) =>
+                            idx === i ? { ...e, deleteConstraint: value } : e
+                          )
+                        );
+                      }}
+                    ></Select>
                   </Col>
                 </Row>
                 <div className="flex justify-between items-center my-3">
-                    <label htmlFor="unique" className="font-medium text-black">
+                  <div className="font-semibold">Mandetory</div>
-                      Mandetory
-                    </label>
                   <Checkbox
                     value="mandetory"
                     checked={r.mandetory}
-                      onChange={(checkedValues) =>
+                    onChange={(checkedValues) => {
+                      setUndoStack((prev) => [
+                        ...prev,
+                        {
+                          action: Action.EDIT,
+                          element: ObjectType.RELATIONSHIP,
+                          rid: i,
+                          undo: {
+                            [checkedValues.target.value]:
+                              !checkedValues.target.checked,
+                          },
+                          redo: {
+                            [checkedValues.target.value]:
+                              checkedValues.target.checked,
+                          },
+                        },
+                      ]);
+                      setRedoStack([]);
                       setRelationships((prev) =>
                         prev.map((e, idx) =>
                           idx === i
@@ -213,12 +266,11 @@ export default function ReferenceOverview(props) {
                               }
                             : e
                         )
-                        )
+                      );
-                      }
+                    }}
                   ></Checkbox>
                 </div>
-                </Form>
+                <Row gutter={6} className="mt-3">
-                <Row gutter={6} className="mt-1">
                   <Col span={12}>
                     <Button
                       icon={<IconRowsStroked />}

src/data/data.js

@@ -48,11 +48,10 @@ const Cardinality = {
   ONE_TO_ONE: "One to one",
   ONE_TO_MANY: "One to many",
   MANY_TO_ONE: "Many to one",
-  MANY_TO_MANY: "Many to many",
 };
 
 const Constraint = {
-  none: "None",
+  none: "No action",
   restrict: "Restrict",
   cascade: "Cascade",
   setNull: "Set null",

src/utils/index.js

@@ -48,7 +48,7 @@ function dataURItoBlob(dataUrl) {
 }
 
 function jsonToSQL(obj) {
-  return obj.tables
+  return `${obj.tables
     .map(
       (table) =>
         `${
@@ -86,7 +86,7 @@ function jsonToSQL(obj) {
             : ""
         }\n);\n${
           table.indices.length > 0
-            ? `${table.indices.map(
+            ? `\n${table.indices.map(
                 (i) =>
                   `\nCREATE ${i.unique ? "UNIQUE " : ""}INDEX \`${
                     i.name
@@ -97,7 +97,18 @@ function jsonToSQL(obj) {
             : ""
         }`
     )
-    .join("\n\n");
+    .join("\n")}\n${obj.references
+    .map(
+      (r) =>
+        `ALTER TABLE \`${
+          obj.tables[r.startTableId].name
+        }\`\nADD FOREIGN KEY(\`${
+          obj.tables[r.startTableId].fields[r.startFieldId].name
+        }\`) REFERENCES \`${obj.tables[r.endTableId].name}\`(\`${
+          obj.tables[r.endTableId].fields[r.endFieldId].name
+        }\`)\nON UPDATE ${r.updateConstraint.toUpperCase()} ON DELETE ${r.deleteConstraint.toUpperCase()};`
+    )
+    .join("\n")}`;
 }
 
 export {