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

tabs panel

Browse Source
This commit is contained in:
Jan Prochazka
2021-02-21 11:35:50 +01:00
parent 71bea87a7a
commit 60c1090d6c
9 changed files with 232 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/web/src/Screen.svelte
View File

@@ -2,6 +2,7 @@
import WidgetContainer from './widgets/WidgetContainer.svelte';
import WidgetIconPanel from './widgets/WidgetIconPanel.svelte';
import { selectedWidget } from './stores';
import TabsPanel from './widgets/TabsPanel.svelte';
</script>
<div class="theme-light">
@@ -14,6 +15,9 @@
<WidgetContainer />
</div>
{/if}
<div class="tabs">
<TabsPanel />
</div>
</div>
<style>
@@ -42,4 +46,19 @@
background-color: var(--theme-bg-2);
display: flex;
}
.tabs {
display: flex;
position: fixed;
top: 0;
left: calc(var(--dim-widget-icon-size) + var(--dim-left-panel-width) + var(--dim-splitter-thickness));
height: var(--dim-tabs-panel-height);
right: 0;
background-color: var(--theme-bg-2);
border-top: 1px solid var(--theme-border);
overflow-x: auto;
}
.tabs::-webkit-scrollbar {
height: 7px;
}
</style>

40
packages/web/src/appobj/DatabaseObjectAppObject.svelte Normal file
View File

@@ -0,0 +1,40 @@
<script lang="ts">
import _ from 'lodash';
import AppObjectCore from './AppObjectCore.svelte';
import { currentDatabase, openedConnections } from '../stores';
import openNewTab from '../utility/openNewTab';
export let commonProps;
export let data;
const icons = {
tables: 'img table',
views: 'img view',
procedures: 'img procedure',
functions: 'img function',
};
function handleClick() {
const { schemaName, pureName, conid, database, objectTypeField } = data;
openNewTab({
title: data.pureName,
icon: 'icon table',
tabComponent: 'TableDataTab',
props: {
schemaName,
pureName,
conid,
database,
objectTypeField,
},
});
}
</script>
<AppObjectCore
{...commonProps}
{data}
title={data.schemaName ? `${data.schemaName}.${data.pureName}` : data.pureName}
icon={icons[data.objectTypeField]}
on:click={handleClick}
/>

1
packages/web/src/stores.ts
View File

@@ -3,5 +3,6 @@ import { writable } from 'svelte/store';
export const selectedWidget = writable('database');
export const openedConnections = writable([]);
export const currentDatabase = writable(null);
export const openedTabs = writable([]);
// export const leftPanelWidth = writable(300);

15
packages/web/src/utility/openNewTab.ts Normal file
View File

@@ -0,0 +1,15 @@
import uuidv1 from 'uuid/v1';
import { openedTabs } from '../stores';
export default async function openNewTab(newTab, initialData = undefined, options = undefined) {
console.log('OPENING NEW TAB', newTab);
const tabid = uuidv1();
openedTabs.update(tabs => [
...(tabs || []).map(x => ({ ...x, selected: false })),
{
tabid,
selected: true,
...newTab,
},
]);
}

4
packages/web/src/widgets/DatabaseWidget.svelte
View File

@@ -1,5 +1,6 @@
<script lang="ts">
import ConnectionList from './ConnectionList.svelte';
import SqlObjectListWrapper from './SqlObjectListWrapper.svelte';
import WidgetColumnBar from './WidgetColumnBar.svelte';
import WidgetColumnBarItem from './WidgetColumnBarItem.svelte';
@@ -10,7 +11,6 @@
<ConnectionList />
</WidgetColumnBarItem>
<WidgetColumnBarItem title="Tables, views, functions" name="dbObjects">
TABLES
<!-- <SqlObjectListWrapper /> -->
<SqlObjectListWrapper />
</WidgetColumnBarItem>
</WidgetColumnBar>

17
packages/web/src/widgets/SqlObjectList.svelte
View File

@@ -4,6 +4,10 @@
import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
import { useDatabaseInfo, useDatabaseStatus } from '../utility/metadataLoaders';
import SearchBoxWrapper from './SearchBoxWrapper.svelte';
import AppObjectList from '../appobj/AppObjectList.svelte';
import _ from 'lodash';
import DatabaseObjectAppObject from '../appobj/DatabaseObjectAppObject.svelte';
import { currentDatabase } from '../stores';
export let conid;
export let database;
@@ -11,11 +15,20 @@
$: objects = useDatabaseInfo({ conid, database });
$: status = useDatabaseStatus({ conid, database });
$: console.log('objects', $objects);
$: objectList = _.flatten(
['tables', 'views', 'procedures', 'functions'].map(objectTypeField =>
_.sortBy(
(($objects || {})[objectTypeField] || []).map(obj => ({ ...obj, objectTypeField })),
['schemaName', 'pureName']
)
)
);
</script>
<SearchBoxWrapper>
<SearchInput placeholder="Search connection" />
<InlineButton>Refresh</InlineButton>
</SearchBoxWrapper>
<WidgetsInnerContainer>CONNECTIONS</WidgetsInnerContainer>
<WidgetsInnerContainer>
<AppObjectList list={objectList.map(x => ({ ...x, conid, database }))} component={DatabaseObjectAppObject} />
</WidgetsInnerContainer>

15
packages/web/src/widgets/SqlObjectListWrapper.svelte Normal file
View File

@@ -0,0 +1,15 @@
<script lang="ts">
import _ from 'lodash';
import { currentDatabase } from '../stores';
import SqlObjectList from './SqlObjectList.svelte';
import WidgetsInnerContainer from './WidgetsInnerContainer.svelte';
$: conid = _.get($currentDatabase, 'connection._id');
$: database = _.get($currentDatabase, 'name');
</script>
{#if conid && database}
<SqlObjectList {conid} {database} />
{:else}
<WidgetsInnerContainer>Database not selected</WidgetsInnerContainer>
{/if}

123
packages/web/src/widgets/TabsPanel.svelte Normal file
View File

@@ -0,0 +1,123 @@
<script lang="ts" context="module">
function getTabDbName(tab) {
if (tab.props && tab.props.conid && tab.props.database) return tab.props.database;
if (tab.props && tab.props.archiveFolder) return tab.props.archiveFolder;
return '(no DB)';
}
function getTabDbKey(tab) {
if (tab.props && tab.props.conid && tab.props.database)
return `database://${tab.props.database}-${tab.props.conid}`;
if (tab.props && tab.props.archiveFolder) return `archive://${tab.props.archiveFolder}`;
return '_no';
}
function getDbIcon(key) {
if (key.startsWith('database://')) return 'icon database';
if (key.startsWith('archive://')) return 'icon archive';
return 'icon file';
}
</script>
<script lang="ts">
import _ from 'lodash';
import FontIcon from '../icons/FontIcon.svelte';
import { currentDatabase, openedTabs } from '../stores';
$: currentDbKey =
$currentDatabase && $currentDatabase.name && $currentDatabase.connection
? `database://${$currentDatabase.name}-${$currentDatabase.connection._id}`
: '_no';
$: tabsWithDb = $openedTabs
.filter(x => !x.closedTime)
.map(tab => ({
...tab,
tabDbName: getTabDbName(tab),
tabDbKey: getTabDbKey(tab),
}));
$: tabsByDb = _.groupBy(tabsWithDb, 'tabDbKey');
$: dbKeys = _.keys(tabsByDb).sort();
</script>
{#each dbKeys as dbKey}
<div class="db-wrapper">
<div class="db-name" class:selected={tabsByDb[dbKey][0].tabDbKey == currentDbKey}>
<FontIcon icon={getDbIcon(dbKey)} />
{tabsByDb[dbKey][0].tabDbName}
</div>
<div class="db-group">
{#each _.sortBy(tabsByDb[dbKey], ['title', 'tabid']) as tab}
<div class="file-tab-item" class:selected={tab.selected}>
<FontIcon icon={tab.busy ? 'icon loading' : tab.icon} />
<span class="file-name">
{tab.title}
</span>
<span class="close-button tabCloseButton">
<FontIcon icon="icon close" />
</span>
</div>
{/each}
</div>
</div>
{/each}
<style>
.db-group {
display: flex;
flex: 1;
align-content: stretch;
}
.db-wrapper {
display: flex;
flex-direction: column;
align-items: stretch;
}
.db-name {
text-align: center;
font-size: 8pt;
border-bottom: 1px solid var(--theme-border);
border-right: 1px solid var(--theme-border);
cursor: pointer;
user-select: none;
padding: 1px;
position: relative;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.db-name:hover {
background-color: var(--theme-bg-3);
}
.db-name.selected {
background-color: var(--theme-bg-1);
}
.file-tab-item {
border-right: 1px solid var(--theme-border);
padding-left: 15px;
padding-right: 15px;
flex-shrink: 1;
flex-grow: 1;
min-width: 10px;
display: flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.file-tab-item.selected {
background-color: var(--theme-bg-1);
}
.file-name {
margin-left: 5px;
}
.close-button {
margin-left: 5px;
color: var(--theme-font-3);
}
.close-button:hover {
color: var(--theme-font-1);
}
</style>