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

TableDataTab

Browse Source
This commit is contained in:
Jan Prochazka
2020-01-25 13:50:48 +01:00
parent c189886c15
commit 8646221b41
16 changed files with 159 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
web/src/Screen.js
View File

@@ -4,6 +4,7 @@ import React from 'react';
import theme from './theme';
import styled from 'styled-components';
import TabsPanel from './TabsPanel';
import TabContent from './TabContent';
import WidgetIconPanel from './widgets/WidgetIconPanel';
import { useCurrentWidget } from './utility/globalState';
import WidgetContainer from './widgets/WidgetContainer';
@@ -55,7 +56,7 @@ const StausBar = styled.div`
background-color: ${theme.statusBar.background};
`;
export default function Screen({ children = undefined }) {
export default function Screen() {
const currentWidget = useCurrentWidget();
const leftPanelWidth = currentWidget ? theme.leftPanel.width : 0;
return (
@@ -71,7 +72,7 @@ export default function Screen({ children = undefined }) {
<TabsPanelContainer leftPanelWidth={leftPanelWidth}>
<TabsPanel></TabsPanel>
</TabsPanelContainer>
<BodyDiv leftPanelWidth={leftPanelWidth}>{children}</BodyDiv>
<BodyDiv leftPanelWidth={leftPanelWidth}><TabContent/></BodyDiv>
<StausBar></StausBar>
</>
);

18
web/src/TabContent.js Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react';
import styled from 'styled-components';
import theme from './theme';
import tabs from './tabs';
import { useOpenedTabs } from './utility/globalState';
export default function TabContent() {
const files = useOpenedTabs();
const selectedTab = files.find(x => x.selected);
if (!selectedTab) return null;
const TabComponent = tabs[selectedTab.tabComponent];
if (TabComponent) return <TabComponent {...selectedTab.props} />;
return null;
}

18
web/src/TabsPanel.js
View File

@@ -2,8 +2,8 @@ import React from 'react';
import styled from 'styled-components';
import theme from './theme';
import { TableIcon } from './icons';
import { useOpenedTabs, useSetOpenedTabs } from './utility/globalState';
import { getIconImage } from './icons';
// const files = [
// { name: 'app.js' },
@@ -31,7 +31,7 @@ const FileNameWrapper = styled.span`
`;
export default function TabsPanel() {
const files = useOpenedTabs();
const tabs = useOpenedTabs();
const setOpenedTabs = useSetOpenedTabs();
const handleTabClick = id => {
@@ -49,15 +49,15 @@ export default function TabsPanel() {
};
return (
<>
{files.map(file => (
{tabs.map(tab => (
<FileTabItem
{...file}
key={file.id}
onClick={() => handleTabClick(file.id)}
onMouseUp={e => handleMouseUp(e, file.id)}
{...tab}
key={tab.id}
onClick={() => handleTabClick(tab.id)}
onMouseUp={e => handleMouseUp(e, tab.id)}
>
<TableIcon />
<FileNameWrapper>{file.name}</FileNameWrapper>
{getIconImage(tab.icon)}
<FileNameWrapper>{tab.title}</FileNameWrapper>
</FileTabItem>
))}
</>

14
web/src/appobj/tableAppObject.js
View File

@@ -27,7 +27,19 @@ export default function tableAppObject({ pureName, schemaName }, { setOpenedTabs
const Icon = TableIcon;
const onClick = ({ schemaName, pureName }) => {
const id = uuidv1();
setOpenedTabs(files => [...files, { id, name: pureName }]);
setOpenedTabs(files => [
...files,
{
id,
title: pureName,
icon: 'table2.svg',
tabComponent: 'TableDataTab',
props: {
schemaName,
pureName,
},
},
]);
};
return { title, key, Icon, Menu, onClick };

128
web/src/icons.js
View File

@@ -1,113 +1,97 @@
import React from "react";
import _ from "lodash";
import React from 'react';
import _ from 'lodash';
function getIconImage(src, { size = 16, style = {}, className, title }) {
if (src.endsWith(".svg")) {
src = "/icons/" + src;
export function getIconImage(src, props) {
const { size = 16, style = {}, className, title } = props || {};
if (!src) return null;
if (src.endsWith('.svg')) {
src = '/icons/' + src;
}
// if (props.alignToLine) {
// style["position"] = "relative";
// style["top"] = "-2px";
// style["marginRight"] = "4px";
// }
return (
<img
width={size}
height={size}
src={src}
style={style}
className={className}
title={title}
/>
);
return <img width={size} height={size} src={src} style={style} className={className} title={title} />;
}
export function getFontIcon(fontIconSpec, props = {}) {
let iconClass = fontIconSpec;
if (!iconClass) return null;
var parts = iconClass.split(" ");
var parts = iconClass.split(' ');
var name = parts[0];
parts = parts.slice(1);
var className = props.className || "";
var className = props.className || '';
// if (_.startsWith(name, 'bs-')) className += ` glyphicon glyphicon-${name.substr(3)}`;
if (_.startsWith(name, "fa-")) className += ` fas fa-${name.substr(3)}`;
if (_.startsWith(name, 'fa-')) className += ` fas fa-${name.substr(3)}`;
if (_.includes(parts, "spin")) className += " fa-spin";
if (_.includes(parts, 'spin')) className += ' fa-spin';
var style = props.style || {};
var last = parts[parts.length - 1];
if (last && last != "spin") {
style["color"] = last;
if (last && last != 'spin') {
style['color'] = last;
}
return <i className={className} style={style} title={props.title} />;
}
export const TableIcon = props => getIconImage("table2.svg", props);
export const ViewIcon = props => getIconImage("view2.svg", props);
export const DatabaseIcon = props => getIconImage("database.svg", props);
export const ServerIcon = props => getIconImage("server.svg", props);
export const TableIcon = props => getIconImage('table2.svg', props);
export const ViewIcon = props => getIconImage('view2.svg', props);
export const DatabaseIcon = props => getIconImage('database.svg', props);
export const ServerIcon = props => getIconImage('server.svg', props);
export const MicrosoftIcon = props => getIconImage("microsoft.svg", props);
export const MySqlIcon = props => getIconImage("mysql.svg", props);
export const PostgreSqlIcon = props => getIconImage("postgresql.svg", props);
export const SqliteIcon = props => getIconImage("sqlite.svg", props);
export const MicrosoftIcon = props => getIconImage('microsoft.svg', props);
export const MySqlIcon = props => getIconImage('mysql.svg', props);
export const PostgreSqlIcon = props => getIconImage('postgresql.svg', props);
export const SqliteIcon = props => getIconImage('sqlite.svg', props);
export const ProcedureIcon = props => getIconImage("procedure2.svg", props);
export const FunctionIcon = props => getIconImage("function.svg", props);
export const TriggerIcon = props => getIconImage("trigger.svg", props);
export const ProcedureIcon = props => getIconImage('procedure2.svg', props);
export const FunctionIcon = props => getIconImage('function.svg', props);
export const TriggerIcon = props => getIconImage('trigger.svg', props);
export const HomeIcon = props => getIconImage("home.svg", props);
export const PrimaryKeyIcon = props => getIconImage("primarykey.svg", props);
export const ForeignKeyIcon = props => getIconImage("foreignkey.svg", props);
export const ComplexKeyIcon = props => getIconImage("complexkey.svg", props);
export const VariableIcon = props => getIconImage("variable.svg", props);
export const UniqueIcon = props => getIconImage("unique.svg", props);
export const IndexIcon = props => getIconImage("index.svg", props);
export const HomeIcon = props => getIconImage('home.svg', props);
export const PrimaryKeyIcon = props => getIconImage('primarykey.svg', props);
export const ForeignKeyIcon = props => getIconImage('foreignkey.svg', props);
export const ComplexKeyIcon = props => getIconImage('complexkey.svg', props);
export const VariableIcon = props => getIconImage('variable.svg', props);
export const UniqueIcon = props => getIconImage('unique.svg', props);
export const IndexIcon = props => getIconImage('index.svg', props);
export const StartIcon = props => getIconImage("start.svg", props);
export const DownCircleIcon = props => getIconImage("down_circle.svg", props);
export const StartIcon = props => getIconImage('start.svg', props);
export const DownCircleIcon = props => getIconImage('down_circle.svg', props);
export const ColumnIcon = props => getIconImage("column.svg", props);
export const ColumnIcon = props => getIconImage('column.svg', props);
export const SqlIcon = props => getIconImage("sql.svg", props);
export const ExcelIcon = props => getIconImage("excel.svg", props);
export const DiagramIcon = props => getIconImage("diagram.svg", props);
export const QueryDesignIcon = props => getIconImage("querydesign.svg", props);
export const LocalDbIcon = props => getIconImage("localdb.svg", props);
export const CsvIcon = props => getIconImage("csv.svg", props);
export const ChangeSetIcon = props => getIconImage("changeset.svg", props);
export const BinaryFileIcon = props => getIconImage("binaryfile.svg", props);
export const SqlIcon = props => getIconImage('sql.svg', props);
export const ExcelIcon = props => getIconImage('excel.svg', props);
export const DiagramIcon = props => getIconImage('diagram.svg', props);
export const QueryDesignIcon = props => getIconImage('querydesign.svg', props);
export const LocalDbIcon = props => getIconImage('localdb.svg', props);
export const CsvIcon = props => getIconImage('csv.svg', props);
export const ChangeSetIcon = props => getIconImage('changeset.svg', props);
export const BinaryFileIcon = props => getIconImage('binaryfile.svg', props);
export const ReferenceIcon = props => getIconImage("reference.svg", props);
export const LinkIcon = props => getIconImage("link.svg", props);
export const ReferenceIcon = props => getIconImage('reference.svg', props);
export const LinkIcon = props => getIconImage('link.svg', props);
export const SequenceIcon = props => getIconImage("sequence.svg", props);
export const CheckIcon = props => getIconImage("check.svg", props);
export const SequenceIcon = props => getIconImage('sequence.svg', props);
export const CheckIcon = props => getIconImage('check.svg', props);
export const LinkedServerIcon = props =>
getIconImage("linkedserver.svg", props);
export const LinkedServerIcon = props => getIconImage('linkedserver.svg', props);
export const EmptyIcon = props =>
getIconImage(
"data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=",
props
);
export const EmptyIcon = props => getIconImage('data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=', props);
export const TimesRedIcon = props => getFontIcon("fa-times red", props);
export const TimesGreenCircleIcon = props =>
getFontIcon("fa-times-circle green", props);
export const GrayFilterIcon = props =>
getFontIcon("fa-filter lightgray", props);
export const ExclamationTriangleIcon = props =>
getFontIcon("fa-exclamation-triangle", props);
export const HourGlassIcon = props => getFontIcon("fa-hourglass", props);
export const InfoBlueCircleIcon = props =>
getFontIcon("fa-info-circle blue", props);
export const TimesRedIcon = props => getFontIcon('fa-times red', props);
export const TimesGreenCircleIcon = props => getFontIcon('fa-times-circle green', props);
export const GrayFilterIcon = props => getFontIcon('fa-filter lightgray', props);
export const ExclamationTriangleIcon = props => getFontIcon('fa-exclamation-triangle', props);
export const HourGlassIcon = props => getFontIcon('fa-hourglass', props);
export const InfoBlueCircleIcon = props => getFontIcon('fa-info-circle blue', props);
export const SpinnerIcon = props => getFontIcon("fa-spinner spin", props);
export const SpinnerIcon = props => getFontIcon('fa-spinner spin', props);
export const FontIcon = ({ name }) => <i className={`fas ${name}`}></i>;

5
web/src/tabs/TableDataTab.js Normal file
View File

@@ -0,0 +1,5 @@
import React from 'react';
export default function TableDataTab({ schemaName, pureName }) {
return <div>{pureName}</div>;
}

5
web/src/tabs/index.js Normal file
View File

@@ -0,0 +1,5 @@
import TableDataTab from './TableDataTab';
export default {
TableDataTab,
};

2
web/src/widgets/DatabaseWidget.js
View File

@@ -63,7 +63,7 @@ function SqlObjectList({ id, database }) {
const { tables } = objects || {};
return (
<>
<AppObjectList list={tables} makeAppObj={tableAppObject} />
<AppObjectList list={(tables || []).map(x => ({ ...x, id, database }))} makeAppObj={tableAppObject} />
</>
);
}