free table infrastructure

packages/web/src/datagrid/Grider.ts

@@ -7,10 +7,6 @@ export default abstract class Grider {
   abstract getRowData(index): any;
   abstract get rowCount(): number;
 
-  getRowsSample() {
-    return [this.getRowData(0)];
-  }
-
   getRowStatus(index): GriderRowStatus {
     const res: GriderRowStatus = {
       status: 'regular',

packages/web/src/datagrid/RowsArrayGrider.ts

@@ -17,7 +17,4 @@ export default class RowsArrayGrider extends Grider {
   static factoryDeps({ sourceRows }) {
     return [sourceRows];
   }
-  getRowsSample() {
-    return this.rows;
-  }
 }

packages/web/src/freetable/FreeTableGrid.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+
+import { ManagerMainContainer, ManagerOuterContainerFull } from '../datagrid/ManagerStyles';
+import { HorizontalSplitter } from '../widgets/Splitter';
+import FreeTableGridCore from './FreeTableGridCore';
+
+const LeftContainer = styled.div`
+  background-color: white;
+  display: flex;
+  flex: 1;
+`;
+
+const DataGridContainer = styled.div`
+  position: relative;
+  flex-grow: 1;
+`;
+
+export default function FreeTableGrid(props) {
+  const [managerSize, setManagerSize] = React.useState(0);
+  return (
+    <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
+      <LeftContainer>
+        <ManagerMainContainer>
+          <ManagerOuterContainerFull>
+            COLUMNS
+            {/* <ColumnManager {...props} managerSize={managerSize} /> */}
+          </ManagerOuterContainerFull>
+        </ManagerMainContainer>
+      </LeftContainer>
+
+      <DataGridContainer>
+        <FreeTableGridCore {...props} />
+      </DataGridContainer>
+    </HorizontalSplitter>
+  );
+}

packages/web/src/freetable/FreeTableGridCore.js

@@ -0,0 +1,17 @@
+import { createGridCache, FreeTableGridDisplay } from '@dbgate/datalib';
+import React from 'react';
+import DataGridCore from '../datagrid/DataGridCore';
+import FreeTableGrider from './FreeTableGrider';
+
+export default function FreeTableGridCore(props) {
+  const { modelState, dispatchModel, config, setConfig } = props;
+  const grider = React.useMemo(() => FreeTableGrider.factory(props), FreeTableGrider.factoryDeps(props));
+  const [cache, setCache] = React.useState(createGridCache());
+  const display = React.useMemo(() => new FreeTableGridDisplay(modelState.value, config, setConfig, cache, setCache), [
+    modelState.value,
+    config,
+    cache,
+  ]);
+
+  return <DataGridCore {...props} grider={grider} display={display} />;
+}

packages/web/src/freetable/FreeTableGrider.ts

@@ -0,0 +1,25 @@
+import { FreeTableModel } from '@dbgate/datalib';
+import Grider, { GriderRowStatus } from '../datagrid/Grider';
+
+export default class FreeTableGrider extends Grider {
+  public model: FreeTableModel;
+  public rows: any[];
+  constructor(public modelState, public dispatchModel) {
+    super();
+    this.model = modelState && modelState.value;
+    this.rows = this.model.rows;
+  }
+  getRowData(index: any) {
+    return this.rows[index];
+  }
+  get rowCount() {
+    return this.rows.length;
+  }
+
+  static factory({ modelState, dispatchModel }): FreeTableGrider {
+    return new FreeTableGrider(modelState, dispatchModel);
+  }
+  static factoryDeps({ modelState, dispatchModel }) {
+    return [modelState, dispatchModel];
+  }
+}

packages/web/src/freetable/useNewFreeTable.js

@@ -0,0 +1,15 @@
+import _ from 'lodash';
+import { useSetOpenedTabs, useCurrentDatabase } from '../utility/globalState';
+import { openNewTab } from '../utility/common';
+
+export default function useNewFreeTable() {
+  const setOpenedTabs = useSetOpenedTabs();
+
+  return ({ title = undefined, ...props } = {}) =>
+    openNewTab(setOpenedTabs, {
+      title: title || 'Table',
+      icon: 'freetable.svg',
+      tabComponent: 'FreeTableTab',
+      props: {},
+    });
+}

packages/web/src/icons.js

@@ -57,6 +57,7 @@ export function ExpandIcon({
 }
 
 export const TableIcon = (props) => getIconImage('table2.svg', props);
+export const FreeTableIcon = (props) => getIconImage('freetable.svg', props);
 export const ViewIcon = (props) => getIconImage('view2.svg', props);
 export const ArchiveTableIcon = (props) => getIconImage('archtable.svg', props);
 export const DatabaseIcon = (props) => getIconImage('database.svg', props);

packages/web/src/tabs/FreeTableTab.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import { createGridCache, createChangeSet, createGridConfig, createFreeTableModel } from '@dbgate/datalib';
+import useUndoReducer from '../utility/useUndoReducer';
+import usePropsCompare from '../utility/usePropsCompare';
+import { useUpdateDatabaseForTab } from '../utility/globalState';
+import TableDataGrid from '../datagrid/TableDataGrid';
+import useGridConfig from '../utility/useGridConfig';
+import FreeTableGrid from '../freetable/FreeTableGrid';
+
+export default function FreeDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef, tabid }) {
+  const [config, setConfig] = useGridConfig(tabid);
+  const [modelState, dispatchModel] = useUndoReducer(createFreeTableModel());
+
+  return (
+    <FreeTableGrid
+      conid={conid}
+      config={config}
+      setConfig={setConfig}
+      modelState={modelState}
+      dispatchModel={dispatchModel}
+      tabVisible={tabVisible}
+      // toolbarPortalRef={toolbarPortalRef}
+    />
+  );
+}

packages/web/src/tabs/index.js

@@ -5,6 +5,7 @@ import QueryTab from './QueryTab';
 import ShellTab from './ShellTab';
 import InfoPageTab from './InfoPageTab';
 import ArchiveFileTab from './ArchiveFileTab';
+import FreeTableTab from './FreeTableTab';
 
 export default {
   TableDataTab,
@@ -14,4 +15,5 @@ export default {
   InfoPageTab,
   ShellTab,
   ArchiveFileTab,
+  FreeTableTab,
 };

packages/web/src/widgets/Toolbar.js

@@ -7,6 +7,7 @@ import useNewQuery from '../query/useNewQuery';
 import { useConfig } from '../utility/metadataLoaders';
 import { useSetOpenedTabs, useOpenedTabs } from '../utility/globalState';
 import { openNewTab } from '../utility/common';
+import useNewFreeTable from '../freetable/useNewFreeTable';
 
 const ToolbarContainer = styled.div`
   display: flex;
@@ -16,6 +17,7 @@ const ToolbarContainer = styled.div`
 export default function ToolBar({ toolbarPortalRef }) {
   const modalState = useModalState();
   const newQuery = useNewQuery();
+  const newFreeTable = useNewFreeTable();
   const config = useConfig();
   const toolbar = config.toolbar || [];
   const setOpenedTabs = useSetOpenedTabs();
@@ -74,6 +76,9 @@ export default function ToolBar({ toolbarPortalRef }) {
       <ToolbarButton onClick={newQuery} icon="fas fa-file-alt">
         New Query
       </ToolbarButton>
+      <ToolbarButton onClick={newFreeTable} icon="fas fa-table">
+        Free table editor
+      </ToolbarButton>
       <ToolbarContainer ref={toolbarPortalRef}></ToolbarContainer>
     </ToolbarContainer>
   );