create table - changed workflow

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -56,27 +56,7 @@
     };
 
     const handleNewTable = () => {
-      const tooltip = `${getConnectionLabel(connection)}\n${name}`;
-      openNewTab(
-        {
-          title: 'Table #',
-          tooltip,
-          icon: 'img table-structure',
-          tabComponent: 'TableStructureTab',
-          props: {
-            conid: connection._id,
-            database: name,
-          },
-        },
-        {
-          editor: {
-            columns: [],
-          },
-        },
-        {
-          forceNewTab: true,
-        }
-      );
+      newTable(connection, name);
     };
 
     const handleDropDatabase = () => {
@@ -410,6 +390,7 @@
   import NewCollectionModal from '../modals/NewCollectionModal.svelte';
   import hasPermission from '../utility/hasPermission';
   import { openImportExportTab } from '../utility/importExportTools';
+  import newTable from '../tableeditor/newTable';
 
   export let data;
   export let passProps;

packages/web/src/commands/stdCommands.ts

@@ -44,6 +44,7 @@ import NewCollectionModal from '../modals/NewCollectionModal.svelte';
 import ConfirmModal from '../modals/ConfirmModal.svelte';
 import localforage from 'localforage';
 import { openImportExportTab } from '../utility/importExportTools';
+import newTable from '../tableeditor/newTable';
 
 // function themeCommand(theme: ThemeDefinition) {
 //   return {
@@ -253,26 +254,7 @@ registerCommand({
     const $currentDatabase = get(currentDatabase);
     const connection = _.get($currentDatabase, 'connection') || {};
     const database = _.get($currentDatabase, 'name');
-
-    openNewTab(
-      {
-        title: 'Table #',
-        icon: 'img table-structure',
-        tabComponent: 'TableStructureTab',
-        props: {
-          conid: connection._id,
-          database,
-        },
-      },
-      {
-        editor: {
-          columns: [],
-        },
-      },
-      {
-        forceNewTab: true,
-      }
-    );
+    newTable(connection, database);
   },
 });
 

packages/web/src/elements/ObjectFieldsEditor.svelte

@@ -5,11 +5,16 @@
   import { writable } from 'svelte/store';
   import FormProviderCore from '../forms/FormProviderCore.svelte';
   import createRef from '../utility/createRef';
+  import FormSchemaSelect from '../impexp/FormSchemaSelect.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import FormSelectField from '../forms/FormSelectField.svelte';
 
   export let title;
   export let fieldDefinitions;
   export let values;
   export let onChangeValues;
+  export let pureNameTitle = null;
+  export let schemaList = null;
 
   let collapsed = false;
 
@@ -32,6 +37,16 @@
   </div>
   {#if !collapsed}
     <FormProviderCore values={valuesStore}>
+      {#if schemaList?.length > 0}
+        <FormSelectField
+          name="schemaName"
+          label="Schema"
+          options={schemaList.map(x => ({ label: x.schemaName, value: x.schemaName }))}
+        />
+      {/if}
+      {#if pureNameTitle}
+        <FormTextField name="pureName" label={pureNameTitle} />
+      {/if}
       <FormArgumentList args={fieldDefinitions} />
     </FormProviderCore>
   {/if}

packages/web/src/tableeditor/TableEditor.svelte

@@ -91,6 +91,7 @@
   export let dbInfo;
   export let driver;
   export let resetCounter;
+  export let isCreateTable;
 
   $: isWritable = !!setTableInfo;
 
@@ -165,15 +166,14 @@
 </script>
 
 <div class="wrapper">
-  {#if tableFormOptions}
+  {#if tableInfo && (tableFormOptions || isCreateTable)}
     {#key resetCounter}
       <ObjectFieldsEditor
         title="Table properties"
-        fieldDefinitions={tableFormOptions}
-        values={_.pick(
-          tableInfo,
-          tableFormOptions.map(x => x.name)
-        )}
+        fieldDefinitions={tableFormOptions ?? []}
+        pureNameTitle="Table name"
+        schemaList={dbInfo?.schemas?.length >= 0 ? dbInfo?.schemas : null}
+        values={_.pick(tableInfo, ['schemaName', 'pureName', ...(tableFormOptions ?? []).map(x => x.name)])}
         onChangeValues={vals => {
           if (!_.isEmpty(vals)) {
             setTableInfo(tbl => ({ ...tbl, ...vals }));

packages/web/src/tableeditor/newTable.ts

@@ -0,0 +1,48 @@
+import _ from 'lodash';
+import openNewTab from '../utility/openNewTab';
+import { findEngineDriver, getConnectionLabel } from 'dbgate-tools';
+import { getExtensions } from '../stores';
+
+export default function newTable(connection, database) {
+  const tooltip = `${getConnectionLabel(connection)}\n${database}`;
+  const driver = findEngineDriver(connection, getExtensions());
+  openNewTab(
+    {
+      title: 'Table #',
+      tooltip,
+      icon: 'img table-structure',
+      tabComponent: 'TableStructureTab',
+      props: {
+        conid: connection._id,
+        database,
+      },
+    },
+    {
+      editor: {
+        current: {
+          pureName: 'new_table',
+          schemaName: driver?.dialect?.defaultSchemaName,
+          columns: [
+            {
+              columnName: 'id',
+              dataType: 'int',
+              isNullable: false,
+              isPrimaryKey: true,
+              isAutoIncrement: true,
+            },
+          ],
+          primaryKey: {
+            columns: [
+              {
+                columnName: 'id',
+              },
+            ],
+          },
+        },
+      },
+    },
+    {
+      forceNewTab: true,
+    }
+  );
+}

packages/web/src/tabs/TableStructureTab.svelte

@@ -22,7 +22,7 @@
     toolbar: true,
     isRelatedToTab: true,
     icon: 'icon close',
-    testEnabled: () => getCurrentEditor()?.canSave(),
+    testEnabled: () => getCurrentEditor()?.canResetChanges(),
     onClick: () => getCurrentEditor().reset(),
   });
 </script>
@@ -90,30 +90,11 @@
     return objectTypeField == 'tables' && !!$editorValue && !$connection?.isReadOnly;
   }
 
-  export function save() {
-    if ($editorValue.base) {
-      doSave(null);
-    } else {
-      showModal(InputTextModal, {
-        header: 'Set table name',
-        value: savedName || 'newTable',
-        label: 'Table name',
-        onConfirm: name => {
-          savedName = name;
-          setEditorData(tbl => ({
-            base: tbl.base,
-            current: {
-              ...tbl.current,
-              pureName: name,
-            },
-          }));
-          doSave(name);
-        },
-      });
-    }
+  export function canResetChanges() {
+    return canSave() && !!$editorValue.base;
   }
 
-  function doSave(createTableName) {
+  export function save() {
     const { sql, recreates } = getAlterTableScript(
       $editorValue.base,
       extendTableInfo(fillConstraintNames($editorValue.current, driver.dialect)),
@@ -127,29 +108,18 @@
       sql,
       recreates,
       onConfirm: () => {
-        handleConfirmSql(sql, createTableName);
+        handleConfirmSql(sql);
       },
       engine: driver.engine,
     });
   }
 
-  async function handleConfirmSql(sql, createTableName) {
+  async function handleConfirmSql(sql) {
     const resp = await apiCall('database-connections/run-script', { conid, database, sql, useTransaction: true });
     const { errorMessage } = resp || {};
     if (errorMessage) {
       showModal(ErrorMessageModal, { title: 'Error when saving', message: errorMessage });
     } else {
-      if (createTableName) {
-        changeTab(tabid, tab => ({
-          ...tab,
-          title: createTableName,
-          props: {
-            ...tab.props,
-            pureName: createTableName,
-          },
-        }));
-      }
-
       await apiCall('database-connections/sync-model', { conid, database });
       showSnackbarSuccess('Saved to database');
       clearEditorData();
@@ -175,6 +145,7 @@
     dbInfo={$dbInfo}
     {driver}
     {resetCounter}
+    isCreateTable={objectTypeField == 'tables' && !$editorValue?.base}
     setTableInfo={objectTypeField == 'tables' && !$connection?.isReadOnly && hasPermission(`dbops/model/edit`)
       ? tableInfoUpdater =>
           setEditorData(tbl =>
@@ -191,7 +162,10 @@
       : null}
   />
   <svelte:fragment slot="toolstrip">
-    <ToolStripCommandButton command="tableStructure.save" />
+    <ToolStripCommandButton
+      command="tableStructure.save"
+      buttonLabel={$editorValue?.base ? 'Alter table' : 'Create table'}
+    />
     <ToolStripCommandButton command="tableStructure.reset" />
     <ToolStripCommandButton command="tableEditor.addColumn" />
     <ToolStripCommandButton command="tableEditor.addIndex" hideDisabled />

packages/web/src/utility/openNewTab.ts

@@ -15,7 +15,7 @@ function findFreeNumber(numbers: number[]) {
   // return res;
 }
 
-export default async function openNewTab(newTab, initialData = undefined, options = undefined) {
+export default async function openNewTab(newTab, initialData: any = undefined, options: any = undefined) {
   const oldTabs = getOpenedTabs();
   const activeTab = getActiveTab();