engines in create script tab

packages/engines/default/SqlDumper.js

@@ -130,7 +130,7 @@ class SqlDumper {
       if (column.isPersisted) this.put(" ^persisted");
       return;
     }
-    this.put("%k", column.dataType);
+    if (column.dataType) this.put("%k", column.dataType);
     if (column.autoIncrement) {
       this.autoIncrement();
     }
@@ -180,7 +180,7 @@ class SqlDumper {
   createTable(table) {
     this.put("^create ^table %f ( &>&n", table);
     this.putCollection(",&n", table.columns, col => {
-      this.put("%i", col.columnName);
+      this.put("%i ", col.columnName);
       this.columnDefinition(col);
     });
     if (table.primaryKey) {

packages/engines/mssql/MsSqlDumper.js

@@ -1,5 +1,9 @@
-const SqlDumper = require('../default/SqlDumper');
+const SqlDumper = require("../default/SqlDumper");
 
-class MsSqlDumper extends SqlDumper {}
+class MsSqlDumper extends SqlDumper {
+  autoIncrement() {
+    this.put(" ^identity");
+  }
+}
 
 module.exports = MsSqlDumper;

packages/web/src/sqleditor/SqlEditor.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import AceEditor from 'react-ace';
+import useDimensions from '../utility/useDimensions';
+import engines from '@dbgate/engines';
+import useTableInfo from '../utility/useTableInfo';
+import useConnectionInfo from '../utility/useConnectionInfo';
+
+const Wrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+const engineToMode = {
+  mssql: 'sqlserver',
+  mysql: 'mysql',
+  postgre: 'pgsql',
+};
+
+export default function SqlEditor({ value, engine }) {
+  const [containerRef, { height, width }] = useDimensions();
+
+  return (
+    <Wrapper ref={containerRef}>
+      <AceEditor
+        mode={engineToMode[engine] || 'sql'}
+        theme="github"
+        // onChange={onChange}
+        name="UNIQUE_ID_OF_DIV"
+        editorProps={{ $blockScrolling: true }}
+        value={value}
+        readOnly
+        fontSize="11pt"
+        width={`${width}px`}
+        height={`${height}px`}
+      />
+    </Wrapper>
+  );
+}

packages/web/src/tabs/TableCreateScriptTab.js

@@ -1,45 +1,18 @@
 import React from 'react';
-import useFetch from '../utility/useFetch';
-import styled from 'styled-components';
-import theme from '../theme';
-import AceEditor from 'react-ace';
-import useDimensions from '../utility/useDimensions';
 import engines from '@dbgate/engines';
 import useTableInfo from '../utility/useTableInfo';
-
+import useConnectionInfo from '../utility/useConnectionInfo';
-const Wrapper = styled.div`
+import SqlEditor from '../sqleditor/SqlEditor';
-  position: absolute;
-  left: 0;
-  top: 0;
-  right: 0;
-  bottom: 0;
-`;
 
 export default function TableCreateScriptTab({ conid, database, schemaName, pureName }) {
-  const [containerRef, { height, width }] = useDimensions();
-
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
+  const connnection = useConnectionInfo(conid);
+  if (!connnection || !tableInfo) return null;
+  // console.log(tableInfo);
 
-  console.log(tableInfo);
+  const driver = engines(connnection.engine);
-
-  const driver = engines('mssql');
   const dumper = driver.createDumper();
   if (tableInfo) dumper.createTable(tableInfo);
 
-  return (
+  return <SqlEditor engine={connnection && connnection.engine} value={dumper.s} />;
-    <Wrapper ref={containerRef}>
-      <AceEditor
-        mode="sql"
-        theme="github"
-        // onChange={onChange}
-        name="UNIQUE_ID_OF_DIV"
-        editorProps={{ $blockScrolling: true }}
-        value={dumper.s}
-        readOnly
-        fontSize="11pt"
-        width={`${width}px`}
-        height={`${height}px`}
-      />
-    </Wrapper>
-  );
 }

packages/web/src/utility/useConnectionInfo.js

@@ -0,0 +1,10 @@
+import useFetch from './useFetch';
+
+export default function useConnectionInfo(conid) {
+  /** @type {import('@dbgate/types').StoredConnection} */
+  const connection = useFetch({
+    params: { conid },
+    url: 'connections/get',
+  });
+  return connection;
+}