mirrors/dbgate
1
0
Fork 0
mirror of https://github.com/dbgate/dbgate synced 2024-11-07 20:26:23 +00:00
Code Issues Actions 4 Packages Projects Releases Wiki Activity

opened tabs widget

Browse Source
This commit is contained in:
Jan Prochazka 2020-04-13 13:49:00 +02:00
parent 0e395f14ad
commit abb3f6e09c
6 changed files with 112 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
packages/web/src/appobj/openedTabAppObject.js Normal file
View File

@ -0,0 +1,22 @@
import React from 'react';
import _ from 'lodash';
import { getIconImage } from '../icons';
const openedTabAppObject = () => ({ tabid, props, selected, icon, title }, { setOpenedTabs }) => {
const key = tabid;
const Icon = (props) => getIconImage(icon, props);
const isBold = !!selected;
const onClick = () => {
setOpenedTabs((files) =>
files.map((x) => ({
...x,
selected: x.tabid == tabid,
}))
);
};
return { title, key, Icon, isBold, onClick };
};
export default openedTabAppObject;

39
packages/web/src/widgets/DatabaseWidget.js
View File

@ -1,49 +1,14 @@
import React from 'react';
import styled from 'styled-components';
import _ from 'lodash';
import { AppObjectList } from '../appobj/AppObjectList';
import connectionAppObject from '../appobj/connectionAppObject';
import databaseAppObject from '../appobj/databaseAppObject';
import { useSetCurrentDatabase, useCurrentDatabase } from '../utility/globalState';
import theme from '../theme';
import InlineButton from './InlineButton';
import databaseObjectAppObject from '../appobj/databaseObjectAppObject';
import { useSqlObjectList, useDatabaseList, useConnectionList } from '../utility/metadataLoaders';
const SearchBoxWrapper = styled.div`
display: flex;
margin-bottom: 5px;
`;
const MainContainer = styled.div`
position: relative;
display: flex;
flex-flow: column wrap;
flex: 1;
flex-direction: column;
user-select: none;
`;
const OuterContainer = styled.div`
flex: 1 1 0;
overflow: hidden;
width: ${theme.leftPanel.width}px;
position: relative;
flex-direction: column;
display: flex;
`;
const InnerContainer = styled.div`
flex: 1 1;
overflow: scroll;
width: ${theme.leftPanel.width}px;
`;
const Input = styled.input`
flex: 1;
min-width: 90px;
`;
import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
function SubDatabaseList({ data }) {
const setDb = useSetCurrentDatabase();
@ -70,6 +35,7 @@ function ConnectionList() {
const [filter, setFilter] = React.useState('');
return (
<>
<WidgetTitle>Connections</WidgetTitle>
<SearchBoxWrapper>
<Input type="text" placeholder="Search connection" value={filter} onChange={(e) => setFilter(e.target.value)} />
<InlineButton>Refresh</InlineButton>
@ -98,6 +64,7 @@ function SqlObjectList({ conid, database }) {
);
return (
<>
<WidgetTitle>Tables, views, functions</WidgetTitle>
<SearchBoxWrapper>
<Input
type="text"

33
packages/web/src/widgets/FilesWidget.js Normal file
View File

@ -0,0 +1,33 @@
import React from 'react';
import styled from 'styled-components';
import _ from 'lodash';
import { AppObjectList } from '../appobj/AppObjectList';
import { useOpenedTabs } from '../utility/globalState';
import openedTabAppObject from '../appobj/openedTabAppObject';
import { SearchBoxWrapper, InnerContainer, Input, MainContainer, OuterContainer, WidgetTitle } from './WidgetStyles';
function OpenedTabsList() {
const tabs = useOpenedTabs();
console.log('TABS', tabs);
return (
<>
<WidgetTitle>Opened tabs</WidgetTitle>
<InnerContainer>
<AppObjectList list={tabs} makeAppObj={openedTabAppObject()} />
</InnerContainer>
</>
);
}
export default function FilesWidget() {
return (
<MainContainer>
<OuterContainer>
<OpenedTabsList />
</OuterContainer>
<OuterContainer></OuterContainer>
</MainContainer>
);
}

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

@ -1,9 +1,11 @@
import React from 'react';
import { useCurrentWidget } from '../utility/globalState';
import DatabaseWidget from './DatabaseWidget';
import FilesWidget from './FilesWidget';
export default function WidgetContainer() {
const currentWidget = useCurrentWidget();
if (currentWidget === 'database') return <DatabaseWidget />;
if (currentWidget === 'file') return <FilesWidget />;
return null;
}

16
packages/web/src/widgets/WidgetIconPanel.js
View File

@ -24,18 +24,18 @@ export default function WidgetIconPanel() {
icon: 'fa-database',
name: 'database',
},
{
icon: 'fa-table',
name: 'table',
},
// {
// icon: 'fa-table',
// name: 'table',
// },
{
icon: 'fa-file-alt',
name: 'file',
},
{
icon: 'fa-cog',
name: 'settings',
},
// {
// icon: 'fa-cog',
// name: 'settings',
// },
// {
// icon: 'fa-check',
// name: 'settings',

44
packages/web/src/widgets/WidgetStyles.js Normal file
View File

@ -0,0 +1,44 @@
import styled from 'styled-components';
import theme from '../theme';
export const SearchBoxWrapper = styled.div`
display: flex;
margin-bottom: 5px;
`;
export const MainContainer = styled.div`
position: relative;
display: flex;
flex-flow: column wrap;
flex: 1;
flex-direction: column;
user-select: none;
`;
export const OuterContainer = styled.div`
flex: 1 1 0;
overflow: hidden;
width: ${theme.leftPanel.width}px;
position: relative;
flex-direction: column;
display: flex;
`;
export const InnerContainer = styled.div`
flex: 1 1;
overflow: scroll;
width: ${theme.leftPanel.width}px;
`;
export const Input = styled.input`
flex: 1;
min-width: 90px;
`;
export const WidgetTitle = styled.div`
padding: 5px;
font-weight: bold;
text-transform: uppercase;
background-color: gray;
// background-color: #CEC;
`;