dennii/dbgate
1
0
Fork 0
mirror of https://github.com/DeNNiiInc/dbgate.git synced 2026-04-30 15:03:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

resizable widgets in grid

Browse Source
This commit is contained in:
Jan Prochazka
2020-11-05 12:33:31 +01:00
parent 7888cf6714
commit f5e243a77f
7 changed files with 18 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/web/src/datagrid/ColumnManager.js
View File

@@ -89,17 +89,14 @@ function ColumnManagerRow(props) {
export default function ColumnManager(props) { export default function ColumnManager(props) {
const { display } = props; const { display } = props;
const [columnFilter, setColumnFilter] = React.useState(''); const [columnFilter, setColumnFilter] = React.useState('');
const inputRef = React.useRef(null);
return ( return (
<> <>
<WidgetTitle inputRef={inputRef}>Columns</WidgetTitle>
<SearchBoxWrapper> <SearchBoxWrapper>
<SearchInput <SearchInput
placeholder="Search columns" placeholder="Search columns"
filter={columnFilter} filter={columnFilter}
setFilter={setColumnFilter} setFilter={setColumnFilter}
inputRef={inputRef}
/> />
<InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton> <InlineButton onClick={() => display.hideAllColumns()}>Hide</InlineButton>
<InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton> <InlineButton onClick={() => display.showAllColumns()}>Show</InlineButton>

14
packages/web/src/datagrid/DataGrid.js
View File

@@ -15,6 +15,7 @@ import {
} from './ManagerStyles'; } from './ManagerStyles';
import ReferenceManager from './ReferenceManager'; import ReferenceManager from './ReferenceManager';
import { HorizontalSplitter } from '../widgets/Splitter'; import { HorizontalSplitter } from '../widgets/Splitter';
import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
const MainContainer = styled.div` const MainContainer = styled.div`
position: absolute; position: absolute;
@@ -43,21 +44,20 @@ const DataGridContainer = styled.div`
export default function DataGrid(props) { export default function DataGrid(props) {
const { GridCore } = props; const { GridCore } = props;
const Container1 = props.showReferences ? ManagerOuterContainer_60 : ManagerOuterContainerFull;
const [managerSize, setManagerSize] = React.useState(0); const [managerSize, setManagerSize] = React.useState(0);
return ( return (
<HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}> <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
<LeftContainer> <LeftContainer>
<ManagerMainContainer> <WidgetColumnBar>
<Container1> <WidgetColumnBarItem title="Columns" name="columns" height="60%">
<ColumnManager {...props} managerSize={managerSize} /> <ColumnManager {...props} managerSize={managerSize} />
</Container1> </WidgetColumnBarItem>
{props.showReferences && ( {props.showReferences && (
<ManagerOuterContainer_40> <WidgetColumnBarItem title="References" name="references">
<ReferenceManager {...props} managerSize={managerSize} /> <ReferenceManager {...props} managerSize={managerSize} />
</ManagerOuterContainer_40> </WidgetColumnBarItem>
)} )}
</ManagerMainContainer> </WidgetColumnBar>
</LeftContainer> </LeftContainer>
<DataGridContainer> <DataGridContainer>

4
packages/web/src/datagrid/ReferenceManager.js
View File

@@ -50,13 +50,11 @@ export default function ReferenceManager(props) {
const { baseTable } = display || {}; const { baseTable } = display || {};
const { foreignKeys } = baseTable || {}; const { foreignKeys } = baseTable || {};
const { dependencies } = baseTable || {}; const { dependencies } = baseTable || {};
const inputRef = React.useRef(null);
return ( return (
<> <>
<WidgetTitle inputRef={inputRef}>References</WidgetTitle>
<SearchBoxWrapper> <SearchBoxWrapper>
<SearchInput placeholder="Search references" filter={filter} setFilter={setFilter} inputRef={inputRef} /> <SearchInput placeholder="Search references" filter={filter} setFilter={setFilter} />
</SearchBoxWrapper> </SearchBoxWrapper>
<ManagerInnerContainer style={{ maxWidth: props.managerSize }}> <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
{foreignKeys && foreignKeys.length > 0 && ( {foreignKeys && foreignKeys.length > 0 && (

1
packages/web/src/freetable/FreeTableColumnEditor.js
View File

@@ -134,7 +134,6 @@ export default function FreeTableColumnEditor(props) {
const model = modelState.value; const model = modelState.value;
return ( return (
<> <>
<WidgetTitle>Columns</WidgetTitle>
<ManagerInnerContainer style={{ maxWidth: props.managerSize }}> <ManagerInnerContainer style={{ maxWidth: props.managerSize }}>
{model.structure.columns.map((column, index) => {model.structure.columns.map((column, index) =>
index == editingColumn ? ( index == editingColumn ? (

13
packages/web/src/freetable/FreeTableGrid.js
View File

@@ -9,6 +9,7 @@ import FreeTableColumnEditor from './FreeTableColumnEditor';
import FreeTableGridCore from './FreeTableGridCore'; import FreeTableGridCore from './FreeTableGridCore';
import MacroDetail from './MacroDetail'; import MacroDetail from './MacroDetail';
import MacroManager from './MacroManager'; import MacroManager from './MacroManager';
import WidgetColumnBar, { WidgetColumnBarItem } from '../widgets/WidgetColumnBar';
const LeftContainer = styled.div` const LeftContainer = styled.div`
background-color: white; background-color: white;
@@ -50,19 +51,19 @@ export default function FreeTableGrid(props) {
return ( return (
<HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}> <HorizontalSplitter initialValue="300px" size={managerSize} setSize={setManagerSize}>
<LeftContainer> <LeftContainer>
<ManagerMainContainer> <WidgetColumnBar>
<ManagerOuterContainer_40> <WidgetColumnBarItem title="Columns" name="columns" height="40%">
<FreeTableColumnEditor {...props} /> <FreeTableColumnEditor {...props} />
</ManagerOuterContainer_40> </WidgetColumnBarItem>
<ManagerOuterContainer_60> <WidgetColumnBarItem title="Macros" name="macros">
<MacroManager <MacroManager
{...props} {...props}
managerSize={managerSize} managerSize={managerSize}
selectedMacro={selectedMacro} selectedMacro={selectedMacro}
setSelectedMacro={setSelectedMacro} setSelectedMacro={setSelectedMacro}
/> />
</ManagerOuterContainer_60> </WidgetColumnBarItem>
</ManagerMainContainer> </WidgetColumnBar>
</LeftContainer> </LeftContainer>
<DataGridContainer> <DataGridContainer>

4
packages/web/src/freetable/MacroManager.js
View File

@@ -26,15 +26,13 @@ const SearchBoxWrapper = styled.div`
// } // }
export default function MacroManager({ managerSize, selectedMacro, setSelectedMacro }) { export default function MacroManager({ managerSize, selectedMacro, setSelectedMacro }) {
const inputRef = React.useRef(null);
const [filter, setFilter] = React.useState(''); const [filter, setFilter] = React.useState('');
return ( return (
<> <>
<WidgetTitle inputRef={inputRef}>Macros</WidgetTitle>
<ManagerInnerContainer style={{ maxWidth: managerSize }}> <ManagerInnerContainer style={{ maxWidth: managerSize }}>
<SearchBoxWrapper> <SearchBoxWrapper>
<SearchInput placeholder="Search macros" filter={filter} setFilter={setFilter} inputRef={inputRef} /> <SearchInput placeholder="Search macros" filter={filter} setFilter={setFilter} />
</SearchBoxWrapper> </SearchBoxWrapper>
<AppObjectList <AppObjectList
list={_.sortBy(macros, 'title')} list={_.sortBy(macros, 'title')}

4
packages/web/src/widgets/WidgetColumnBar.js
View File

@@ -42,7 +42,7 @@ export default function WidgetColumnBar({ children }) {
const childArray = _.isArray(children) ? children : [children]; const childArray = _.isArray(children) ? children : [children];
const [refNode, dimensions] = useDimensions(); const [refNode, dimensions] = useDimensions();
const [collapsedWidgets, setCollapsedWidgets] = React.useState(() => const [collapsedWidgets, setCollapsedWidgets] = React.useState(() =>
childArray.filter((x) => x.props.collapsed).map((x) => x.props.key) childArray.filter((x) => x && x.props.collapsed).map((x) => x.props.key)
); );
const toggleCollapsed = (name) => { const toggleCollapsed = (name) => {
if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name)); if (collapsedWidgets.includes(name)) setCollapsedWidgets(collapsedWidgets.filter((x) => x != name));
@@ -62,7 +62,7 @@ export default function WidgetColumnBar({ children }) {
widget={widget} widget={widget}
key={widget.props.name} key={widget.props.name}
initialSize={widget.props.height} initialSize={widget.props.height}
splitterVisible={!!childArray.slice(index + 1).find((x) => !collapsedWidgets.includes(x.props.name))} splitterVisible={!!childArray.slice(index + 1).find((x) => x && !collapsedWidgets.includes(x.props.name))}
/> />
</> </>
); );