view data tab

packages/web/src/datagrid/ChangeSetGrider.ts

@@ -143,10 +143,10 @@ export default class ChangeSetGrider extends Grider {
     this.dispatchChangeSet({ type: 'redo' });
   }
   get canUndo() {
-    return this.changeSetState.canUndo;
+    return this.changeSetState?.canUndo;
   }
   get canRedo() {
-    return this.changeSetState.canRedo;
+    return this.changeSetState?.canRedo;
   }
   get containsChanges() {
     return changeSetContainsChanges(this.changeSet);

packages/web/src/datagrid/DataGrid.svelte

@@ -9,7 +9,7 @@
   export let gridCoreComponent;
 
   export let isDetailView = false;
-  export let showReferences = true;
+  export let showReferences = false;
 
   let managerSize;
 </script>
@@ -21,7 +21,13 @@
         <ColumnManager {...$$props} {managerSize} />
       </WidgetColumnBarItem>
 
-      <WidgetColumnBarItem title="References" name="references" height="30%" collapsed={isDetailView}>
+      <WidgetColumnBarItem
+        title="References"
+        name="references"
+        height="30%"
+        collapsed={isDetailView}
+        skip={!showReferences}
+      >
         <ReferenceManager {...$$props} {managerSize} />
       </WidgetColumnBarItem>
     </WidgetColumnBar>

packages/web/src/datagrid/TableDataGrid.svelte

@@ -112,6 +112,7 @@
       {...$$props}
       gridCoreComponent={SqlDataGridCore}
       {display}
+      showReferences
       onReferenceSourceChanged={reference ? handleReferenceSourceChanged : null}
       onReferenceClick={value => {
         if (value && value.referenceId && reference && reference.referenceId == value.referenceId) {

packages/web/src/tabs/ViewDataTab.svelte

@@ -0,0 +1,54 @@
+<script lang="ts" context="module">
+  export const matchingProps = ['conid', 'database', 'schemaName', 'pureName'];
+  export const allowAddToFavorites = props => true;
+</script>
+
+<script lang="ts">
+  import { createGridCache, ViewGridDisplay } from 'dbgate-datalib';
+  import { findEngineDriver } from 'dbgate-tools';
+  import { writable } from 'svelte/store';
+
+  import DataGrid from '../datagrid/DataGrid.svelte';
+  import SqlDataGridCore from '../datagrid/SqlDataGridCore.svelte';
+  import { extensions } from '../stores';
+  import { useConnectionInfo, useViewInfo } from '../utility/metadataLoaders';
+  import useGridConfig from '../utility/useGridConfig';
+
+  export let tabid;
+  export let conid;
+  export let database;
+  export let schemaName;
+  export let pureName;
+
+  $: connection = useConnectionInfo({ conid });
+  $: viewInfo = useViewInfo({ conid, database, schemaName, pureName });
+
+  const config = useGridConfig(tabid);
+  const cache = writable(createGridCache());
+
+  $: display =
+    $viewInfo && $connection
+      ? new ViewGridDisplay(
+          $viewInfo,
+          findEngineDriver($connection, $extensions),
+          //@ts-ignore
+          $config,
+          config.update,
+          $cache,
+          cache.update
+        )
+      : null;
+</script>
+
+{#if display}
+  <DataGrid
+    {...$$props}
+    {display}
+    config={$config}
+    setConfig={config.update}
+    cache={$cache}
+    setCache={cache.update}
+    focusOnVisible
+    gridCoreComponent={SqlDataGridCore}
+  />
+{/if}

packages/web/src/tabs/index.js

@@ -1,5 +1,5 @@
 import * as TableDataTab from './TableDataTab.svelte';
-// import ViewDataTab from './ViewDataTab';
+import * as ViewDataTab from './ViewDataTab.svelte';
 // import TableStructureTab from './TableStructureTab';
 import * as QueryTab from './QueryTab.svelte';
 import * as ShellTab from './ShellTab.svelte';
@@ -16,7 +16,7 @@ import * as MarkdownEditorTab from './MarkdownEditorTab.svelte';
 
 export default {
   TableDataTab,
-  //   ViewDataTab,
+  ViewDataTab,
   //   TableStructureTab,
   QueryTab,
   //   InfoPageTab,

packages/web/src/utility/metadataLoaders.ts

@@ -6,6 +6,7 @@ import { cacheClean } from './cache';
 import socket from './socket';
 import getAsArray from './getAsArray';
 import { DatabaseInfo } from 'dbgate-types';
+import { derived } from 'svelte/store';
 
 const databaseInfoLoader = ({ conid, database }) => ({
   url: 'database-connections/structure',
@@ -247,11 +248,14 @@ export async function getDbCore(args, objectTypeField = undefined) {
 }
 
 export function useDbCore(args, objectTypeField = undefined) {
-  const db = useDatabaseInfo(args);
+  const dbStore = useDatabaseInfo(args);
-  if (!db) return null;
+  if (!dbStore) return null;
-  return db[objectTypeField || args.objectTypeField].find(
+  return derived(dbStore, db => {
-    x => x.pureName == args.pureName && x.schemaName == args.schemaName
+    if (!db) return null;
-  );
+    return db[objectTypeField || args.objectTypeField].find(
+      x => x.pureName == args.pureName && x.schemaName == args.schemaName
+    );
+  });
 }
 
 /** @returns {Promise<import('dbgate-types').TableInfo>} */

packages/web/src/widgets/WidgetColumnBarItem.svelte

@@ -27,11 +27,12 @@
     {
       collapsed,
       height,
+      skip,
     },
     dynamicProps
   );
 
-  $: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height });
+  $: updateWidgetItemDefinition(widgetItemIndex, { collapsed: !visible, height, skip });
 
   $: setInitialSize(height, $widgetColumnBarHeight);