browse view data

packages/web/src/appobj/viewAppObject.js

@@ -6,58 +6,54 @@ import getConnectionInfo from '../utility/getConnectionInfo';
 import fullDisplayName from '../utility/fullDisplayName';
 import { filterName } from '@dbgate/datalib';
 
-// async function openTableDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
-//   const connection = await getConnectionInfo(conid);
-//   const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
-//     schemaName,
-//     pureName,
-//   })}`;
+async function openViewDetail(setOpenedTabs, tabComponent, { schemaName, pureName, conid, database }) {
+  const connection = await getConnectionInfo(conid);
+  const tooltip = `${connection.displayName || connection.server}\n${database}\n${fullDisplayName({
+    schemaName,
+    pureName,
+  })}`;
 
-//   openNewTab(setOpenedTabs, {
-//     title: pureName,
-//     tooltip,
-//     icon: 'table2.svg',
-//     tabComponent,
-//     props: {
-//       schemaName,
-//       pureName,
-//       conid,
-//       database,
-//     },
-//   });
-// }
+  openNewTab(setOpenedTabs, {
+    title: pureName,
+    tooltip,
+    icon: 'view2.svg',
+    tabComponent,
+    props: {
+      schemaName,
+      pureName,
+      conid,
+      database,
+    },
+  });
+}
 
-// function Menu({ data, makeAppObj, setOpenedTabs }) {
-//   const handleOpenData = () => {
-//     openTableDetail(setOpenedTabs, 'TableDataTab', data);
-//   };
-//   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>
-//     </>
-//   );
-// }
+function Menu({ data, makeAppObj, setOpenedTabs }) {
+  const handleOpenData = () => {
+    openViewDetail(setOpenedTabs, 'TableDataTab', data);
+  };
+  const handleOpenCreateScript = () => {
+    openViewDetail(setOpenedTabs, 'TableCreateScriptTab', data);
+  };
+  return (
+    <>
+      <DropDownMenuItem onClick={handleOpenData}>Open data</DropDownMenuItem>
+      <DropDownMenuItem onClick={handleOpenCreateScript}>Create SQL</DropDownMenuItem>
+    </>
+  );
+}
 
 const viewAppObject = () => ({ conid, database, pureName, schemaName }, { setOpenedTabs }) => {
   const title = schemaName ? `${schemaName}.${pureName}` : pureName;
   const key = title;
   const Icon = ViewIcon;
-  // const onClick = ({ schemaName, pureName }) => {
-  //   openTableDetail(setOpenedTabs, 'TableDataTab', {
-  //     schemaName,
-  //     pureName,
-  //     conid,
-  //     database,
-  //   });
-  // };
+  const onClick = ({ schemaName, pureName }) => {
+    openViewDetail(setOpenedTabs, 'ViewDataTab', {
+      schemaName,
+      pureName,
+      conid,
+      database,
+    });
+  };
   const matcher = (filter) => filterName(filter, pureName);
   const groupTitle = 'Views';
 
@@ -65,7 +61,8 @@ const viewAppObject = () => ({ conid, database, pureName, schemaName }, { setOpe
     title,
     key,
     Icon,
-    // Menu, onClick,
+    Menu,
+    onClick,
     matcher,
     groupTitle,
   };

packages/web/src/tabs/ViewDataTab.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import useFetch from '../utility/useFetch';
+import styled from 'styled-components';
+import theme from '../theme';
+import DataGrid from '../datagrid/DataGrid';
+import { ViewGridDisplay, createGridConfig, createGridCache, createChangeSet } from '@dbgate/datalib';
+import useTableInfo from '../utility/useTableInfo';
+import useConnectionInfo from '../utility/useConnectionInfo';
+import engines from '@dbgate/engines';
+import getTableInfo from '../utility/getTableInfo';
+import useUndoReducer from '../utility/useUndoReducer';
+import usePropsCompare from '../utility/usePropsCompare';
+import { useUpdateDatabaseForTab } from '../utility/globalState';
+import useViewInfo from '../utility/useViewInfo';
+
+export default function ViewDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
+  const viewInfo = useViewInfo({ conid, database, schemaName, pureName });
+  const [config, setConfig] = React.useState(createGridConfig());
+  const [cache, setCache] = React.useState(createGridCache());
+  const [changeSetState, dispatchChangeSet] = useUndoReducer(createChangeSet());
+
+  useUpdateDatabaseForTab(tabVisible, conid, database);
+  const connection = useConnectionInfo(conid);
+
+  // usePropsCompare({ tableInfo, connection, config, cache });
+
+  const display = React.useMemo(
+    () =>
+    viewInfo && connection
+        ? new ViewGridDisplay(viewInfo, engines(connection), config, setConfig, cache, setCache,
+          )
+        : null,
+    [viewInfo, connection, config, cache]
+  );
+
+  if (!display) return null;
+
+  return (
+    <DataGrid
+      // key={`${conid}, ${database}, ${schemaName}, ${pureName}`}
+      conid={conid}
+      database={database}
+      display={display}
+      tabVisible={tabVisible}
+      changeSetState={changeSetState}
+      dispatchChangeSet={dispatchChangeSet}
+      toolbarPortalRef={toolbarPortalRef}
+    />
+  );
+}

packages/web/src/tabs/index.js

@@ -1,10 +1,12 @@
 import TableDataTab from './TableDataTab';
+import ViewDataTab from './ViewDataTab';
 import TableStructureTab from './TableStructureTab';
 import TableCreateScriptTab from './TableCreateScriptTab';
 import QueryTab from './QueryTab';
 
 export default {
   TableDataTab,
+  ViewDataTab,
   TableStructureTab,
   TableCreateScriptTab,
   QueryTab,

packages/web/src/utility/getTableInfo.js

@@ -3,7 +3,7 @@ import axios from './axios';
 export default async function getTableInfo({ conid, database, schemaName, pureName }) {
   const resp = await axios.request({
     method: 'get',
-    url: 'tables/table-info',
+    url: 'metadata/table-info',
     params: { conid, database, schemaName, pureName },
   });
   /** @type {import('@dbgate/types').TableInfo} */

packages/web/src/utility/useTableInfo.js

@@ -3,7 +3,7 @@ import useFetch from './useFetch';
 export default function useTableInfo({ conid, database, schemaName, pureName }) {
   /** @type {import('@dbgate/types').TableInfo} */
   const tableInfo = useFetch({
-    url: 'tables/table-info',
+    url: 'metadata/table-info',
     params: { conid, database, schemaName, pureName },
     reloadTrigger: `database-structure-changed-${conid}-${database}`,
   });

packages/web/src/utility/useViewInfo.js

@@ -0,0 +1,11 @@
+import useFetch from './useFetch';
+
+export default function useViewInfo({ conid, database, schemaName, pureName }) {
+  /** @type {import('@dbgate/types').ViewInfo} */
+  const viewInfo = useFetch({
+    url: 'metadata/view-info',
+    params: { conid, database, schemaName, pureName },
+    reloadTrigger: `database-structure-changed-${conid}-${database}`,
+  });
+  return viewInfo;
+}

packages/web/src/widgets/DatabaseWidget.js

@@ -95,7 +95,7 @@ function ConnectionList() {
 
 function SqlObjectList({ conid, database }) {
   const objects = useFetch({
-    url: `database-connections/list-objects?conid=${conid}&database=${database}`,
+    url: `metadata/list-objects?conid=${conid}&database=${database}`,
     reloadTrigger: `database-structure-changed-${conid}-${database}`,
   });