show SQL create script

api/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "dbgate",
+  "name": "dbgate-api",
   "version": "0.1.0",
   "private": true,
   "dependencies": {

web/package.json

@@ -1,11 +1,12 @@
 {
-  "name": "dbgate",
+  "name": "dbgate-web",
   "version": "0.1.0",
   "private": true,
   "dependencies": {
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "ace-builds": "^1.4.8",
     "axios": "^0.19.0",
     "cross-env": "^6.0.3",
     "eslint": "^6.8.0",
@@ -13,6 +14,7 @@
     "formik": "^2.1.0",
     "json-stable-stringify": "^1.0.1",
     "react": "^16.12.0",
+    "react-ace": "^8.0.0",
     "react-dom": "^16.12.0",
     "react-modal": "^3.11.1",
     "react-scripts": "3.3.0",
@@ -43,9 +45,9 @@
   },
   "devDependencies": {
     "@fortawesome/fontawesome-free": "^5.12.0",
+    "@types/dbgate": "file:../types",
     "@types/react": "^16.9.17",
     "@types/styled-components": "^4.4.2",
-    "@types/dbgate": "file:../lib",
     "typescript": "^3.7.4"
   }
 }

web/src/appobj/tableAppObject.js

@@ -28,10 +28,14 @@ function Menu({ data, makeAppObj, setOpenedTabs }) {
   const handleOpenStructure = () => {
     openTableDetail(setOpenedTabs, 'TableStructureTab', data);
   };
+  const handleOpenCreateScript = () => {
+    openTableDetail(setOpenedTabs, 'TableCreateScriptTab', data);
+  };
   return (
     <>
       <DropDownMenuItem onClick={handleOpenData}>Open data</DropDownMenuItem>
       <DropDownMenuItem onClick={handleOpenStructure}>Open structure</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleOpenCreateScript}>Create SQL</DropDownMenuItem>
     </>
   );
 }

web/src/index.js

@@ -5,6 +5,12 @@ import "@fortawesome/fontawesome-free/css/all.css";
 import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 
+import "ace-builds/src-noconflict/mode-sql";
+import "ace-builds/src-noconflict/mode-mysql";
+import "ace-builds/src-noconflict/mode-pgsql";
+import "ace-builds/src-noconflict/mode-sqlserver";
+import "ace-builds/src-noconflict/theme-github";
+
 ReactDOM.render(<App />, document.getElementById("root"));
 
 // If you want your app to work offline and load faster, you can change

web/src/tabs/TableCreateScriptTab.js

@@ -0,0 +1,42 @@
+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';
+
+const Wrapper = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+`;
+
+export default function TableCreateScriptTab({ conid, database, schemaName, pureName }) {
+  const sql = `SELECT * FROM MOJE`;
+  const [containerRef, { height, width }] = useDimensions();
+
+  /** @type {import('dbgate').TableInfo} */
+  const tableInfo = useFetch({
+    url: 'tables/table-info',
+    params: { conid, database, schemaName, pureName },
+  });
+
+  return (
+    <Wrapper ref={containerRef}>
+      <AceEditor
+        mode="sql"
+        theme="github"
+        // onChange={onChange}
+        name="UNIQUE_ID_OF_DIV"
+        editorProps={{ $blockScrolling: true }}
+        value={sql}
+        readOnly
+        fontSize="11pt"
+        width={`${width}px`}
+        height={`${height}px`}
+      />
+    </Wrapper>
+  );
+}

web/src/tabs/index.js

@@ -1,7 +1,9 @@
 import TableDataTab from './TableDataTab';
 import TableStructureTab from './TableStructureTab';
+import TableCreateScriptTab from './TableCreateScriptTab'
 
 export default {
   TableDataTab,
   TableStructureTab,
+  TableCreateScriptTab,
 };