diff --git a/src/components/EditorHeader/ControlPanel.jsx b/src/components/EditorHeader/ControlPanel.jsx
index 593e69d6..d7c01668 100644
--- a/src/components/EditorHeader/ControlPanel.jsx
+++ b/src/components/EditorHeader/ControlPanel.jsx
@@ -73,6 +73,8 @@ import { jsonToMermaid } from "../../utils/exportAs/mermaid";
import { isRtl } from "../../i18n/utils/rtl";
import { jsonToDocumentation } from "../../utils/exportAs/documentation";
import { IdContext } from "../Workspace";
+import DatabasesSwitcher from "./DatabasesSwitcher";
+import { convertTableSchema } from "../../utils/typesMappings";
export default function ControlPanel({
diagramId,
@@ -80,6 +82,7 @@ export default function ControlPanel({
title,
setTitle,
lastSaved,
+ setLastSaved,
}) {
const [modal, setModal] = useState(MODAL.NONE);
const [sidesheet, setSidesheet] = useState(SIDESHEET.NONE);
@@ -107,6 +110,7 @@ export default function ControlPanel({
deleteRelationship,
database,
} = useDiagram();
+ const [prevDatabase, setPrevDatabase] = useState(database);
const { enums, setEnums, deleteEnum, addEnum, updateEnum } = useEnums();
const { types, addType, deleteType, updateType, setTypes } = useTypes();
const { notes, setNotes, updateNote, addNote, deleteNote } = useNotes();
@@ -923,8 +927,9 @@ export default function ControlPanel({
function: () => {
if (database === DB.GENERIC) return;
setModal(MODAL.CODE);
+ const newTables = tables.map(table => convertTableSchema(table, prevDatabase, database));
const src = exportSQL({
- tables: tables,
+ tables: newTables,
references: relationships,
types: types,
database: database,
@@ -1640,6 +1645,11 @@ export default function ControlPanel({
title={databases[database].name + " diagram"}
/>
)}
+
e.isPrimary && setShowEditName(true)}
diff --git a/src/components/EditorHeader/DatabasesSwitcher.jsx b/src/components/EditorHeader/DatabasesSwitcher.jsx
new file mode 100644
index 00000000..2f647ecf
--- /dev/null
+++ b/src/components/EditorHeader/DatabasesSwitcher.jsx
@@ -0,0 +1,77 @@
+import { Select } from "@douyinfe/semi-ui";
+import { databases } from "../../data/databases";
+import { DB, State } from "../../data/constants";
+import { useDiagram, useSaveState } from "../../hooks";
+import { db } from "../../data/db";
+
+const databasesWithoutGeneric = Object.keys(databases).filter(db => ![DB.GENERIC, DB.MARIADB, DB.MSSQL].includes(databases[db].label));
+
+export default function DatabasesSwitcher({ setLastSaved, diagramId, setPrevDatabase }) {
+ const { database, setDatabase } = useDiagram();
+ const { setSaveState } = useSaveState();
+
+ if (!databases[database] || database === DB.GENERIC) return null;
+
+ const renderOptionItem = renderProps => {
+ const {
+ disabled,
+ selected,
+ label,
+ value,
+ focused,
+ className,
+ style,
+ onMouseEnter,
+ onClick,
+ } = renderProps;
+ const optionCls = [
+ 'flex justify-start items-center pl-2 pt-3 cursor-pointer custom-option-render',
+ focused && 'custom-option-render-focused',
+ disabled && 'custom-option-render-disabled',
+ selected && 'custom-option-render-selected',
+ className,
+ ].filter(cls => cls).join(' ');
+
+ return (
+
onClick()} onMouseEnter={() => onMouseEnter()}>
+ {databases[value].image && (
+
![{databases[value].name {databases[value].name]({databases[value].image})
+ )}
+
{label}
+
+ );
+ };
+ const onChangeHandler = async (selectedDb) => {
+ await db.diagrams
+ .update(diagramId, {
+ database: selectedDb,
+ }).then(() => {
+ setSaveState(State.SAVED);
+ setLastSaved(new Date().toLocaleString());
+ setPrevDatabase(database);
+ setDatabase(selectedDb);
+ });
+ };
+
+ return