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 + )} +
{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