support app queries

packages/web/src/appobj/DatabaseObjectAppObject.svelte

@@ -10,6 +10,7 @@
     matviews: 'img view',
     procedures: 'img procedure',
     functions: 'img function',
+    queries: 'img query-data',
   };
 
   const defaultTabs = {
@@ -17,6 +18,7 @@
     collections: 'CollectionDataTab',
     views: 'ViewDataTab',
     matviews: 'ViewDataTab',
+    queries: 'QueryDataTab',
   };
 
   const menus = {
@@ -231,6 +233,13 @@
         },
       },
     ],
+    queries: [
+      {
+        label: 'Open data',
+        tab: 'QueryDataTab',
+        forceNewTab: true,
+      },
+    ],
     procedures: [
       {
         label: 'Drop procedure',

packages/web/src/datagrid/JslDataGrid.svelte

@@ -1,22 +1,42 @@
 <script lang="ts">
   import { createGridCache, createGridConfig, JslGridDisplay } from 'dbgate-datalib';
   import { writable } from 'svelte/store';
-  import { useApiCall } from '../utility/api';
+  import { apiOff, apiOn, useApiCall } from '../utility/api';
+  import useEffect from '../utility/useEffect';
 
   import DataGrid from './DataGrid.svelte';
   import JslDataGridCore from './JslDataGridCore.svelte';
 
   export let jslid;
-  export let supportsReload;
+  export let supportsReload = false;
+  export let listenInitializeFile = false;
 
   let loadedRows;
+  let infoCounter = 0;
 
-  $: info = useApiCall('jsldata/get-info', { jslid }, {});
+  $: info = useApiCall('jsldata/get-info', { jslid, infoCounter }, {});
 
   // $: columns = ($info && $info.columns) || [];
   const config = writable(createGridConfig());
   const cache = writable(createGridCache());
 
+  function handleInitializeFile() {
+    infoCounter += 1;
+  }
+
+  $: effect = useEffect(() => onJslId(jslid));
+  function onJslId(jslidVal) {
+    if (jslidVal && listenInitializeFile) {
+      apiOn(`session-initialize-file-${jslidVal}`, handleInitializeFile);
+      return () => {
+        apiOff(`session-initialize-file-${jslidVal}`, handleInitializeFile);
+      };
+    } else {
+      return () => {};
+    }
+  }
+  $: $effect;
+
   $: display = new JslGridDisplay(
     jslid,
     $info,

packages/web/src/datagrid/JslDataGridCore.svelte

@@ -81,6 +81,8 @@
       return () => {
         apiOff(`jsldata-stats-${jslidVal}`, handleJslDataStats);
       };
+    } else {
+      return () => {};
     }
   }
   $: $effect;

packages/web/src/icons/FontIcon.svelte

@@ -155,6 +155,7 @@
     'img sqlite-database': 'mdi mdi-database color-icon-blue',
     'img table': 'mdi mdi-table color-icon-blue',
     'img collection': 'mdi mdi-table color-icon-red',
+    'img query-data': 'mdi mdi-table color-icon-yellow',
     'img view': 'mdi mdi-table color-icon-magenta',
     'img procedure': 'mdi mdi-cog color-icon-blue',
     'img function': 'mdi mdi-function-variant',

packages/web/src/tabs/QueryDataTab.svelte

@@ -0,0 +1,43 @@
+<script lang="ts" context="module">
+  export const matchingProps = ['conid', 'database', 'pureName', 'sql'];
+</script>
+
+<script lang="ts">
+  import ToolStripCommandButton from '../buttons/ToolStripCommandButton.svelte';
+
+  import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
+  import ToolStripExportButton, { createQuickExportHandlerRef } from '../buttons/ToolStripExportButton.svelte';
+
+  import JslDataGrid from '../datagrid/JslDataGrid.svelte';
+  import LoadingInfo from '../elements/LoadingInfo.svelte';
+  import { apiCall } from '../utility/api';
+
+  export let sql = undefined;
+  export let pureName = undefined;
+  export let schemaName = undefined;
+  export let conid;
+  export let database;
+
+  let jslid;
+
+  async function loadData(conid, database, sql) {
+    const resp = await apiCall('sessions/execute-reader', { conid, database, sql, appFolder: schemaName, queryName: pureName });
+    jslid = resp.jslid;
+  }
+
+  const quickExportHandlerRef = createQuickExportHandlerRef();
+
+  $: loadData(conid, database, sql);
+</script>
+
+<ToolStripContainer>
+  {#if jslid}
+    <JslDataGrid {jslid} listenInitializeFile />
+  {:else}
+    <LoadingInfo message="Loading data..." />
+  {/if}
+  <svelte:fragment slot="toolstrip">
+    <ToolStripCommandButton command="dataGrid.refresh" />
+    <ToolStripExportButton command="jslTableGrid.export" {quickExportHandlerRef} />
+  </svelte:fragment>
+</ToolStripContainer>

packages/web/src/tabs/QueryTab.svelte

@@ -140,7 +140,7 @@
   }
 
   export function hasConnection() {
-    return !!conid && (!$connection.isReadOnly || driver.readOnlySessions);
+    return !!conid && (!$connection?.isReadOnly || driver?.readOnlySessions);
   }
 
   async function executeCore(sql) {

packages/web/src/tabs/index.js

@@ -22,6 +22,7 @@ import * as JsonTab from './JsonTab.svelte';
 import * as ChangelogTab from './ChangelogTab.svelte';
 import * as DiagramTab from './DiagramTab.svelte';
 import * as DbKeyDetailTab from './DbKeyDetailTab.svelte';
+import * as QueryDataTab from './QueryDataTab.svelte';
 
 export default {
   TableDataTab,
@@ -48,4 +49,5 @@ export default {
   ChangelogTab,
   DiagramTab,
   DbKeyDetailTab,
+  QueryDataTab,
 };

packages/web/src/widgets/AppFilesList.svelte

@@ -79,12 +79,16 @@
         text: 'New SQL command',
         onClick: () => handleNewSqlFile('command.sql', 'Create new SQL command', COMMAND_TEMPLATE),
       },
+      {
+        text: 'New SQL query',
+        onClick: () => handleNewSqlFile('query.sql', 'Create new SQL query', QUERY_TEMPLATE),
+      },
       {
         text: 'New virtual references file',
         onClick: () => handleNewConfigFile('virtual-references.config.json', []),
       },
       {
-        text: 'New disctionary descriptions file',
+        text: 'New dictionary descriptions file',
         onClick: () => handleNewConfigFile('dictionary-descriptions.config.json', []),
       },
 

packages/web/src/widgets/SqlObjectList.svelte

@@ -16,7 +16,7 @@
   import InlineButton from '../buttons/InlineButton.svelte';
   import SearchInput from '../elements/SearchInput.svelte';
   import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
-  import { useConnectionInfo, useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
+  import { useConnectionInfo, useDatabaseInfo, useDatabaseStatus, useUsedApps } from '../utility/metadataLoaders';
   import SearchBoxWrapper from '../elements/SearchBoxWrapper.svelte';
   import AppObjectList from '../appobj/AppObjectList.svelte';
   import _ from 'lodash';
@@ -30,10 +30,11 @@
   import FontIcon from '../icons/FontIcon.svelte';
   import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
   import { findEngineDriver } from 'dbgate-tools';
-  import { extensions } from '../stores';
+  import { currentDatabase, extensions } from '../stores';
   import newQuery from '../query/newQuery';
   import runCommand from '../commands/runCommand';
   import { apiCall } from '../utility/api';
+  import { filterAppsForDatabase } from '../utility/appTools';
 
   export let conid;
   export let database;
@@ -46,16 +47,28 @@
   $: connection = useConnectionInfo({ conid });
   $: driver = findEngineDriver($connection, $extensions);
 
+  $: apps = useUsedApps();
+
+  $: dbApps = filterAppsForDatabase($currentDatabase.connection, $currentDatabase.name, $apps || []);
+
   // $: console.log('OBJECTS', $objects);
 
-  $: objectList = _.flatten(
-    ['tables', 'collections', 'views', 'matviews', 'procedures', 'functions'].map(objectTypeField =>
+  $: objectList = _.flatten([
+    ...['tables', 'collections', 'views', 'matviews', 'procedures', 'functions'].map(objectTypeField =>
       _.sortBy(
         (($objects || {})[objectTypeField] || []).map(obj => ({ ...obj, objectTypeField })),
         ['schemaName', 'pureName']
       )
-    )
-  );
+    ),
+    ...dbApps.map(app =>
+      app.queries.map(query => ({
+        objectTypeField: 'queries',
+        pureName: query.name,
+        schemaName: app.name,
+        sql: query.sql
+      }))
+    ),
+  ]);
 
   // let generateIndex = 0;
   // setInterval(() => (generateIndex += 1), 2000);
@@ -69,7 +82,7 @@
     const res = [];
     if (driver?.databaseEngineTypes?.includes('document')) {
       res.push({ command: 'new.collection' });
-    } 
+    }
     if (driver?.databaseEngineTypes?.includes('sql')) {
       res.push({ command: 'new.table' });
     }