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

query result shown

Browse Source
This commit is contained in:
Jan Prochazka
2020-04-10 10:47:54 +02:00
parent 3bc6f60f75
commit 8be7c0aa6b
11 changed files with 121 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/web/src/TabContent.js
View File

@@ -10,6 +10,7 @@ const TabContainer = styled.div`
top: 0;
right: 0;
bottom: 0;
display: flex;
visibility: ${props =>
// @ts-ignore
props.tabVisible ? 'visible' : 'hidden'};

13
packages/web/src/datagrid/ColumnHeaderControl.js
View File

@@ -12,7 +12,8 @@ const HeaderDiv = styled.div`
const LabelDiv = styled.div`
flex: 1;
min-width: 10px;
padding-left: 2px;
// padding-left: 2px;
padding: 2px;
margin: auto;
`;
@@ -36,10 +37,12 @@ export default function ColumnHeaderControl({ column, setSort, order }) {
</IconWrapper>
)}
</LabelDiv>
<DropDownButton>
<DropDownMenuItem onClick={() => setSort('ASC')}>Sort ascending</DropDownMenuItem>
<DropDownMenuItem onClick={() => setSort('DESC')}>Sort descending</DropDownMenuItem>
</DropDownButton>
{setSort && (
<DropDownButton>
<DropDownMenuItem onClick={() => setSort('ASC')}>Sort ascending</DropDownMenuItem>
<DropDownMenuItem onClick={() => setSort('DESC')}>Sort descending</DropDownMenuItem>
</DropDownButton>
)}
</HeaderDiv>
);
}

60
packages/web/src/datagrid/DataGridCore.js
View File

@@ -90,6 +90,7 @@ const TableHeaderCell = styled.td`
// border-collapse: collapse;
text-align: left;
padding: 0;
// padding: 2px;
margin: 0;
background-color: #f6f7f9;
overflow: hidden;
@@ -112,12 +113,10 @@ const FocusField = styled.input`
async function loadDataPage(props, offset, limit) {
const { display, conid, database, jslid } = props;
console.log('LOAD PAGE', jslid);
if (jslid) {
const response = await axios.request({
url: 'jsldata/get-rows',
method: 'post',
method: 'get',
params: {
jslid,
offset,
@@ -256,6 +255,7 @@ export default function DataGridCore(props) {
const [inplaceEditorState, dispatchInsplaceEditor] = React.useReducer((state, action) => {
switch (action.type) {
case 'show':
if (!display.editable) return {};
return {
cell: action.cell,
text: action.text,
@@ -914,39 +914,41 @@ export default function DataGridCore(props) {
>
<ColumnHeaderControl
column={col}
setSort={(order) => display.setSort(col.uniqueName, order)}
setSort={display.sortable ? (order) => display.setSort(col.uniqueName, order) : null}
order={display.getSortOrder(col.uniqueName)}
/>
</TableHeaderCell>
))}
</TableHeaderRow>
<TableHeaderRow>
<TableHeaderCell
style={{ width: hederColwidthPx, minWidth: hederColwidthPx, maxWidth: hederColwidthPx }}
data-row="filter"
data-col="header"
>
{filterCount > 0 && (
<InlineButton onClick={handleClearFilters} square>
<i className="fas fa-times" />
</InlineButton>
)}
</TableHeaderCell>
{visibleRealColumns.map((col) => (
<TableFilterCell
key={col.uniqueName}
style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
{display.filterable && (
<TableHeaderRow>
<TableHeaderCell
style={{ width: hederColwidthPx, minWidth: hederColwidthPx, maxWidth: hederColwidthPx }}
data-row="filter"
data-col={col.colIndex}
data-col="header"
>
<DataFilterControl
filterType={getFilterType(col.commonType ? col.commonType.typeCode : null)}
filter={display.getFilter(col.uniqueName)}
setFilter={(value) => display.setFilter(col.uniqueName, value)}
/>
</TableFilterCell>
))}
</TableHeaderRow>
{filterCount > 0 && (
<InlineButton onClick={handleClearFilters} square>
<i className="fas fa-times" />
</InlineButton>
)}
</TableHeaderCell>
{visibleRealColumns.map((col) => (
<TableFilterCell
key={col.uniqueName}
style={{ width: col.widthPx, minWidth: col.widthPx, maxWidth: col.widthPx }}
data-row="filter"
data-col={col.colIndex}
>
<DataFilterControl
filterType={getFilterType(col.commonType ? col.commonType.typeCode : null)}
filter={display.getFilter(col.uniqueName)}
setFilter={(value) => display.setFilter(col.uniqueName, value)}
/>
</TableFilterCell>
))}
</TableHeaderRow>
)}
</TableHead>
<TableBody ref={tableBodyRef}>
{loadedAndInsertedRows

9
packages/web/src/query/MessagesView.js
View File

@@ -1,8 +1,13 @@
import React from 'react';
import styled from 'styled-components';
const StyledTable = styled.table`
flex: 1;
`;
export default function MessagesView({ items }) {
return (
<table>
<StyledTable>
<tr>
<th>Number</th>
<th>Message</th>
@@ -19,6 +24,6 @@ export default function MessagesView({ items }) {
<td>{row.line}</td>
</tr>
))}
</table>
</StyledTable>
);
}

42
packages/web/src/tabs/QueryTab.js
View File

@@ -13,17 +13,18 @@ import SessionMessagesView from '../query/SessionMessagesView';
import { TabPage, TabControl } from '../widgets/TabControl';
import getResultTabs from '../sqleditor/ResultTabs';
import ResultTabs from '../sqleditor/ResultTabs';
import { VerticalSplitter } from '../widgets/Splitter';
const MainContainer = styled.div``;
// const MainContainer = styled.div``;
const EditorContainer = styled.div`
height: 600px;
position: relative;
`;
// const EditorContainer = styled.div`
// height: 600px;
// position: relative;
// `;
const MessagesContainer = styled.div`
height: 200px;
`;
// const MessagesContainer = styled.div`
// height: 200px;
// `;
export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPortalRef }) {
const localStorageKey = `sql_${tabid}`;
@@ -73,8 +74,8 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
const handleKeyDown = (e) => {};
return (
<MainContainer>
<EditorContainer>
<>
<VerticalSplitter>
<SqlEditor
value={queryText}
onChange={handleChange}
@@ -82,22 +83,19 @@ export default function QueryTab({ tabid, conid, database, tabVisible, toolbarPo
engine={connection && connection.engine}
onKeyDown={handleKeyDown}
/>
{toolbarPortalRef &&
toolbarPortalRef.current &&
tabVisible &&
ReactDOM.createPortal(
<QueryToolbar isDatabaseDefined={conid && database} execute={handleExecute} />,
toolbarPortalRef.current
)}
</EditorContainer>
<MessagesContainer>
<ResultTabs sessionId={sessionId}>
<TabPage label="Messages">
<SessionMessagesView sessionId={sessionId} />
</TabPage>
</ResultTabs>
</MessagesContainer>
</MainContainer>
</VerticalSplitter>
{toolbarPortalRef &&
toolbarPortalRef.current &&
tabVisible &&
ReactDOM.createPortal(
<QueryToolbar isDatabaseDefined={conid && database} execute={handleExecute} />,
toolbarPortalRef.current
)}
</>
);
}

30
packages/web/src/widgets/Splitter.js Normal file
View File

@@ -0,0 +1,30 @@
import _ from 'lodash';
import React from 'react';
import styled from 'styled-components';
const MainContainer = styled.div`
flex: 1;
display: flex;
flex-direction: column;
`;
const ChildContainer = styled.div`
flex: 1;
// flex: 0 0 50%;
// flex-basis: 100px;
// flex-grow: 1;
display: flex;
position: relative;
`;
export function VerticalSplitter({ children }) {
if (!_.isArray(children) || children.length !== 2) {
throw new Error('Splitter must have exactly 2 children');
}
return (
<MainContainer>
<ChildContainer>{children[0]}</ChildContainer>
<ChildContainer>{children[1]}</ChildContainer>
</MainContainer>
);
}

2
packages/web/src/widgets/TabControl.js
View File

@@ -24,6 +24,7 @@ const TabNameWrapper = styled.span`
const TabContainer = styled.div`
position: relative;
display: flex;
flex-grow: 1;
`;
@@ -36,6 +37,7 @@ const TabsContainer = styled.div`
const MainContainer = styled.div`
display: flex;
flex: 1;
flex-direction: column;
`;