column manager search box, hide all, show all

packages/datalib/src/GridConfig.ts

@@ -1,4 +1,3 @@
-
-export default interface GridConfig {
-    hiddenColumns: string[];
+export interface GridConfig {
+  hiddenColumns: string[];
 }

packages/datalib/src/GridDisplay.ts

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import GridConfig from './GridConfig';
+import { GridConfig } from './GridConfig';
 import { ForeignKeyInfo } from '@dbgate/types';
 
 export interface DisplayColumn {
@@ -14,7 +14,7 @@ export interface DisplayColumn {
   isChecked: boolean;
 }
 
-export default abstract class GridDisplay {
+export abstract class GridDisplay {
   constructor(public config: GridConfig, protected setConfig: (config: GridConfig) => void) {}
   abstract getPageQuery(offset: number, count: number): string;
   columns: DisplayColumn[];
@@ -32,6 +32,20 @@ export default abstract class GridDisplay {
     }
   }
 
+  showAllColumns() {
+    this.setConfig({
+      ...this.config,
+      hiddenColumns: [],
+    });
+  }
+
+  hideAllColumns() {
+    this.setConfig({
+      ...this.config,
+      hiddenColumns: this.columns.map(x => x.uniqueName),
+    });
+  }
+
   get hiddenColumnIndexes() {
     return (this.config.hiddenColumns || []).map(x => _.findIndex(this.columns, y => y.uniqueName == x));
   }

packages/datalib/src/TableGridDisplay.ts

@@ -1,9 +1,9 @@
-import GridDisplay from './GridDisplay';
+import { GridDisplay } from './GridDisplay';
 import { Select, treeToSql, dumpSqlSelect } from '@dbgate/sqltree';
 import { TableInfo, EngineDriver } from '@dbgate/types';
-import GridConfig from './GridConfig';
+import { GridConfig } from './GridConfig';
 
-export default class TableGridDisplay extends GridDisplay {
+export class TableGridDisplay extends GridDisplay {
   constructor(
     public table: TableInfo,
     public driver: EngineDriver,

packages/datalib/src/filterName.ts

@@ -0,0 +1,5 @@
+export function filterName(filter: string, name: string) {
+  if (!filter) return true;
+  if (!name) return false;
+  return name.toUpperCase().includes(filter.toUpperCase());
+}

packages/datalib/src/index.ts

@@ -1,2 +1,3 @@
-export { default as GridDisplay, DisplayColumn } from "./GridDisplay";
-export { default as TableGridDisplay } from "./TableGridDisplay";
+export * from "./GridDisplay";
+export * from "./TableGridDisplay";
+export * from "./filterName";

packages/web/src/datagrid/ColumnManager.js

@@ -1,6 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 import ColumnLabel from './ColumnLabel';
+import { filterName } from '@dbgate/datalib';
+
+const Wrapper = styled.div``;
 
 const Row = styled.div`
   margin-left: 5px;
@@ -11,21 +14,43 @@ const Row = styled.div`
   }
 `;
 
+const SearchBoxWrapper = styled.div`
+  display: flex;
+  margin-bottom: 5px;
+`;
+
+const Button = styled.button`
+  width: 50px;
+`;
+
+const Input = styled.input`
+  flex: 1;
+  width: 80px;
+`;
+
 /** @param props {import('./types').DataGridProps} */
 export default function ColumnManager(props) {
   const { display } = props;
+  const [columnFilter, setColumnFilter] = React.useState('');
   return (
-    <div>
-      {display.columns.map(item => (
-        <Row key={item.columnName}>
-          <input
-            type="checkbox"
-            checked={item.isChecked}
-            onChange={() => display.setColumnVisibility(item.uniqueName, !item.isChecked)}
-          ></input>
-          <ColumnLabel {...item} />
-        </Row>
-      ))}
-    </div>
+    <Wrapper>
+      <SearchBoxWrapper>
+        <Input type="text" placeholder="Search" value={columnFilter} onChange={e => setColumnFilter(e.target.value)} />
+        <Button onClick={() => display.hideAllColumns()}>Hide</Button>
+        <Button onClick={() => display.showAllColumns()}>Show</Button>
+      </SearchBoxWrapper>
+      {display.columns
+        .filter(col => filterName(columnFilter, col.columnName))
+        .map(col => (
+          <Row key={col.columnName}>
+            <input
+              type="checkbox"
+              checked={col.isChecked}
+              onChange={() => display.setColumnVisibility(col.uniqueName, !col.isChecked)}
+            ></input>
+            <ColumnLabel {...col} />
+          </Row>
+        ))}
+    </Wrapper>
   );
 }

packages/web/src/datagrid/DataGrid.js

@@ -14,7 +14,7 @@ const MainContainer = styled.div`
 
 const ColumnManagerContainer = styled.div`
   background-color: white;
-  padding-top: 5px;
+  overflow-y: scroll;
 `;
 
 const DataGridContainer = styled.div`