Merge branch 'master' into develop

packages/web/src/App.svelte

@@ -19,6 +19,7 @@
   import AppTitleProvider from './utility/AppTitleProvider.svelte';
   import getElectron from './utility/getElectron';
   import AppStartInfo from './widgets/AppStartInfo.svelte';
+  import SettingsListener from './utility/SettingsListener.svelte';
 
   let loadedApi = false;
   let loadedPlugins = false;
@@ -79,6 +80,7 @@
   <AppTitleProvider />
   {#if loadedPlugins}
     <OpenTabsOnStartup />
+    <SettingsListener />
     <Screen />
   {:else}
     <AppStartInfo

packages/web/src/appobj/DatabaseAppObject.svelte

@@ -229,6 +229,30 @@
       });
     };
 
+    const handleQueryDesigner = () => {
+      openNewTab({
+        title: 'Query #',
+        icon: 'img query-design',
+        tabComponent: 'QueryDesignTab',
+        props: {
+          conid: connection._id,
+          database: name,
+        },
+      });
+    };
+
+    const handleNewPerspective = () => {
+      openNewTab({
+        title: 'Perspective #',
+        icon: 'img perspective',
+        tabComponent: 'PerspectiveTab',
+        props: {
+          conid: connection._id,
+          database: name,
+        },
+      });
+    };
+
     async function handleConfirmSql(sql) {
       saveScriptToDatabase({ conid: connection._id, database: name }, sql, false);
     }
@@ -244,16 +268,21 @@
       { onClick: handleNewQuery, text: 'New query', isNewQuery: true },
       driver?.databaseEngineTypes?.includes('sql') && { onClick: handleNewTable, text: 'New table' },
       driver?.databaseEngineTypes?.includes('document') && { onClick: handleNewCollection, text: 'New collection' },
-      isSqlOrDoc &&
-        !connection.isReadOnly &&
-        !connection.singleDatabase && { onClick: handleDropDatabase, text: 'Drop database' },
+      driver?.databaseEngineTypes?.includes('sql') && { onClick: handleQueryDesigner, text: 'Design query' },
+      driver?.databaseEngineTypes?.includes('sql') && {
+        onClick: handleNewPerspective,
+        text: 'Design perspective query',
+      },
       { divider: true },
       isSqlOrDoc && !connection.isReadOnly && { onClick: handleImport, text: 'Import wizard' },
       isSqlOrDoc && { onClick: handleExport, text: 'Export wizard' },
       driver?.databaseEngineTypes?.includes('sql') && { onClick: handleSqlRestore, text: 'Restore/import SQL dump' },
       driver?.supportsDatabaseDump && { onClick: handleSqlDump, text: 'Backup/export SQL dump' },
+      isSqlOrDoc &&
+        !connection.isReadOnly &&
+        !connection.singleDatabase && { onClick: handleDropDatabase, text: 'Drop database' },
       { divider: true },
-      isSqlOrDoc && { onClick: handleShowDiagram, text: 'Show diagram' },
+      driver?.databaseEngineTypes?.includes('sql') && { onClick: handleShowDiagram, text: 'Show diagram' },
       isSqlOrDoc && { onClick: handleSqlGenerator, text: 'SQL Generator' },
       isSqlOrDoc && { onClick: handleOpenJsonModel, text: 'Open model as JSON' },
       isSqlOrDoc && { onClick: handleExportModel, text: 'Export DB model - experimental' },

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -52,7 +52,12 @@
         icon: 'img table-structure',
       },
       {
-        label: 'Open perspective',
+        label: 'Design query',
+        isQueryDesigner: true,
+        requiresWriteAccess: true,
+      },
+      {
+        label: 'Design perspective query',
         tab: 'PerspectiveTab',
         forceNewTab: true,
         icon: 'img perspective',
@@ -80,11 +85,6 @@
         isDuplicateTable: true,
         requiresWriteAccess: true,
       },
-      {
-        label: 'Query designer',
-        isQueryDesigner: true,
-        requiresWriteAccess: true,
-      },
       {
         label: 'Show diagram',
         isDiagram: true,
@@ -155,7 +155,11 @@
         icon: 'img view-structure',
       },
       {
-        label: 'Open perspective',
+        label: 'Design query',
+        isQueryDesigner: true,
+      },
+      {
+        label: 'Design perspective query',
         tab: 'PerspectiveTab',
         forceNewTab: true,
         icon: 'img perspective',
@@ -164,10 +168,6 @@
         label: 'Drop view',
         isDrop: true,
       },
-      {
-        label: 'Query designer',
-        isQueryDesigner: true,
-      },
       {
         divider: true,
       },

packages/web/src/commands/stdCommands.ts

@@ -127,6 +127,9 @@ registerCommand({
   name: 'Query design',
   menuName: 'New query design',
   onClick: () => newQueryDesign(),
+  testEnabled: () =>
+    getCurrentDatabase() &&
+    findEngineDriver(getCurrentDatabase()?.connection, getExtensions())?.databaseEngineTypes?.includes('sql'),
 });
 
 registerCommand({
@@ -144,6 +147,9 @@ registerCommand({
   icon: 'img diagram',
   name: 'ER Diagram',
   menuName: 'New ER diagram',
+  testEnabled: () =>
+    getCurrentDatabase() &&
+    findEngineDriver(getCurrentDatabase()?.connection, getExtensions())?.databaseEngineTypes?.includes('sql'),
   onClick: () => newDiagram(),
 });
 

packages/web/src/elements/Pager.svelte

@@ -22,7 +22,7 @@
 <div class="wrapper">
   <InlineButton
     on:click={() => {
-      skip -= limit;
+      skip = parseInt(skip) - parseInt(limit);
       if (skip < 0) skip = 0;
       dispatch('load');
     }}
@@ -35,7 +35,7 @@
   <TextField type="number" bind:value={limit} on:blur={() => dispatch('load')} on:keydown={handleKeyDown} />
   <InlineButton
     on:click={() => {
-      skip += limit;
+      skip = parseInt(skip) + parseInt(limit);
       dispatch('load');
     }}
   >

packages/web/src/modals/InsertJoinModal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { SqlDumper } from 'dbgate-tools';
   import FormStyledButton from '../buttons/FormStyledButton.svelte';
   import TableControl from '../elements/TableControl.svelte';
   import TextField from '../forms/TextField.svelte';
@@ -63,9 +64,11 @@
     const source = sources[sourceIndex];
     const target = targets[targetIndex];
     if (source && target) {
-      return `${JOIN_TYPES[joinIndex]} ${target.refTable}${alias ? ` ${alias}` : ''} ON ${target.columnMap
+      return `${SqlDumper.convertKeywordCase(JOIN_TYPES[joinIndex])} ${target.refTable}${
+        alias ? ` ${alias}` : ''
+      } ${SqlDumper.convertKeywordCase('ON')} ${target.columnMap
         .map(col => `${source.name}.${col.columnName} = ${alias || target.refTable}.${col.refColumnName}`)
-        .join(' AND ')}`;
+        .join(SqlDumper.convertKeywordCase(' AND '))}`;
     }
     return '';
   }

packages/web/src/perspectives/PerspectiveCell.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { getAsImageSrc, safeJsonParse } from 'dbgate-tools';
-  import { isArray } from 'lodash';
+  import _ from 'lodash';
 
   import CellValue from '../datagrid/CellValue.svelte';
   import JSONTree from '../jsontree/JSONTree.svelte';
@@ -12,7 +12,7 @@
   export let displayType;
 </script>
 
-<td rowspan={rowSpan} data-column={columnIndex} class:isEmpty={value===undefined}>
+<td rowspan={rowSpan} data-column={columnIndex} class:isEmpty={value === undefined}>
   {#if value !== undefined}
     {#if displayType == 'json'}
       <JSONTree value={safeJsonParse(value, value?.toString())} slicedKeyCount={1} disableContextMenu />
@@ -23,6 +23,8 @@
       {:else}
         <span class="null"> (no image)</span>
       {/if}
+    {:else if _.isArray(value) || _.isPlainObject(value)}
+      <JSONTree {value} slicedKeyCount={1} disableContextMenu />
     {:else}
       <CellValue {rowData} {value} />
     {/if}

packages/web/src/perspectives/PerspectiveTable.svelte

@@ -57,6 +57,7 @@
   let errorMessage;
   let rowCount;
   let isLoading = false;
+  let isLoadQueued = false;
   const lastVisibleRowIndexRef = createRef(0);
   const disableLoadNextRef = createRef(false);
 
@@ -121,6 +122,12 @@
   }
 
   async function loadData(node: PerspectiveTreeNode, counts) {
+    if (isLoading) {
+      isLoadQueued = true;
+      return;
+    } else {
+      isLoadQueued = false;
+    }
     // console.log('LOADING', node);
     if (!node) return;
     const rows = [];
@@ -147,6 +154,10 @@
     //     loadProps.push(child.getNodeLoadProps());
     //   }
     // }
+
+    if (isLoadQueued) {
+      loadData(root, $loadedCounts);
+    }
   }
 
   export function openJson() {

packages/web/src/query/codeCompletion.ts

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import { addCompleter, setCompleters } from 'ace-builds/src-noconflict/ext-language_tools';
 import { getDatabaseInfo } from '../utility/metadataLoaders';
 import analyseQuerySources from './analyseQuerySources';
+import { getStringSettingsValue } from '../settings/settingsTools';
 
 const COMMON_KEYWORDS = [
   'select',
@@ -78,13 +79,21 @@ export function mountCodeCompletion({ conid, database, editor, getText }) {
       const line = session.getLine(cursor.row).slice(0, cursor.column);
       const dbinfo = await getDatabaseInfo({ conid, database });
 
-      let list = COMMON_KEYWORDS.map(word => ({
-        name: word,
-        value: word,
-        caption: word,
-        meta: 'keyword',
-        score: 800,
-      }));
+      const convertUpper = getStringSettingsValue('sqlEditor.sqlCommandsCase', 'upperCase') == 'upperCase';
+
+      let list = COMMON_KEYWORDS.map(word => {
+        if (convertUpper) {
+          word = word.toUpperCase();
+        }
+
+        return {
+          name: word,
+          value: word,
+          caption: word,
+          meta: 'keyword',
+          score: 800,
+        };
+      });
 
       if (dbinfo) {
         const colMatch = line.match(/([a-zA-Z0-9_]+)\.([a-zA-Z0-9_]*)?$/);

packages/web/src/settings/SettingsModal.svelte

@@ -111,6 +111,19 @@ ORDER BY
             defaultValue="30"
             disabled={values['connection.autoRefresh'] === false}
           />
+
+          <div class="heading">SQL editor</div>
+          <FormSelectField
+            label="SQL commands case"
+            name="sqlEditor.sqlCommandsCase"
+            isNative
+            defaultValue="upperCase"
+            options={[
+              { value: 'upperCase', label: 'UPPER CASE' },
+              { value: 'lowerCase', label: 'lower case' },
+            ]}
+          />
+
         </svelte:fragment>
         <svelte:fragment slot="2">
           <div class="heading">Application theme</div>

packages/web/src/settings/settingsTools.ts

@@ -21,3 +21,10 @@ export function getBoolSettingsValue(name, defaultValue) {
   if (res == null) return defaultValue;
   return !!res;
 }
+
+export function getStringSettingsValue(name, defaultValue) {
+  const settings = getCurrentSettings();
+  const res = settings[name];
+  if (res == null) return defaultValue;
+  return res;
+}

packages/web/src/utility/SettingsListener.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import { SqlDumper } from 'dbgate-tools';
+  import { useSettings } from './metadataLoaders';
+
+  const settings = useSettings();
+
+  $: SqlDumper.keywordsCase = $settings?.['sqlEditor.sqlCommandsCase'] || 'upperCase';
+</script>