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

focus connection or database WIP

Browse Source
This commit is contained in:
SPRINX0\prochazka
2024-11-25 11:00:41 +01:00
parent ab7c2d7a31
commit 398d9f15df
5 changed files with 103 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/web/src/widgets/AppObjectListHandler.svelte
View File

@@ -6,7 +6,7 @@
export let selectedObjectStore;
export let getSelectedObject;
export let selectedObjectMatcher;
export let module;
export let handleObjectClick;
export let onScrollTop = null;
export let onFocusFilterBox = null;
@@ -35,7 +35,7 @@
if (list[newIndex]) {
selectedObjectStore.set(list[newIndex]);
module.handleObjectClick(list[newIndex], { tabPreviewMode: true });
handleObjectClick?.(list[newIndex], { tabPreviewMode: true });
}
if (newIndex == 0) {
@@ -52,7 +52,7 @@
ev.preventDefault();
}
if (ev.keyCode == keycodes.enter) {
module.handleObjectClick(getSelectedObject(), { tabPreviewMode: false, focusTab: true });
handleObjectClick?.(getSelectedObject(), { tabPreviewMode: false, focusTab: true });
ev.preventDefault();
}
if (ev.keyCode == keycodes.pageDown) {
@@ -66,14 +66,14 @@
if (ev.keyCode == keycodes.home) {
if (list[0]) {
selectedObjectStore.set(list[0]);
module.handleObjectClick(list[0], { tabPreviewMode: true });
handleObjectClick?.(list[0], { tabPreviewMode: true });
onScrollTop?.();
}
}
if (ev.keyCode == keycodes.end) {
if (list[list.length - 1]) {
selectedObjectStore.set(list[list.length - 1]);
module.handleObjectClick(list[list.length - 1], { tabPreviewMode: true });
handleObjectClick?.(list[list.length - 1], { tabPreviewMode: true });
}
}
}
@@ -82,7 +82,7 @@
domDiv?.focus();
if (list[0]) {
selectedObjectStore.set(list[0]);
module.handleObjectClick(list[0], { tabPreviewMode: true });
handleObjectClick?.(list[0], { tabPreviewMode: true });
onScrollTop?.();
}
}

123
packages/web/src/widgets/ConnectionList.svelte
View File

@@ -16,6 +16,8 @@
openedTabs,
emptyConnectionGroupNames,
collapsedConnectionGroupNames,
focusedConnectionOrDatabase,
getFocusedConnectionOrDatabase,
} from '../stores';
import runCommand from '../commands/runCommand';
import { getConnectionLabel } from 'dbgate-tools';
@@ -29,11 +31,15 @@
import { showModal } from '../modals/modalTools';
import InputTextModal from '../modals/InputTextModal.svelte';
import ConfirmModal from '../modals/ConfirmModal.svelte';
import AppObjectListHandler from './AppObjectListHandler.svelte';
const connections = useConnectionList();
const serverStatus = useServerStatus();
let filter = '';
let domListHandler;
let domContainer = null;
let domFilter = null;
$: connectionsWithStatus =
$connections && $serverStatus
@@ -47,12 +53,23 @@
x => !x.unsaved || $openedConnections.includes(x._id) || $openedSingleDatabaseConnections.includes(x._id)
);
$: connectionsWithParent = connectionsWithStatusFiltered
? connectionsWithStatusFiltered?.filter(x => x.parent !== undefined && x.parent !== null && x.parent.length !== 0)
: [];
$: connectionsWithoutParent = connectionsWithStatusFiltered
? connectionsWithStatusFiltered?.filter(x => x.parent === undefined || x.parent === null || x.parent.length === 0)
: [];
$: connectionsWithParent = _.sortBy(
connectionsWithStatusFiltered
? connectionsWithStatusFiltered?.filter(x => x.parent !== undefined && x.parent !== null && x.parent.length !== 0)
: [],
connection => (getConnectionLabel(connection) || '').toUpperCase()
);
$: connectionsWithoutParent = _.sortBy(
connectionsWithStatusFiltered
? connectionsWithStatusFiltered?.filter(x => x.parent === undefined || x.parent === null || x.parent.length === 0)
: [],
connection => (getConnectionLabel(connection) || '').toUpperCase()
);
$: focusFlatList = [
...connectionsWithParent.map(x => ({ conid: x._id })),
...connectionsWithoutParent.map(x => ({ conid: x._id })),
];
const handleRefreshConnections = () => {
for (const conid of $openedConnections) {
@@ -112,7 +129,14 @@
</script>
<SearchBoxWrapper>
<SearchInput placeholder="Search connection or database" bind:value={filter} />
<SearchInput
placeholder="Search connection or database"
bind:value={filter}
bind:this={domFilter}
onFocusFilteredList={() => {
domListHandler?.focusFirst();
}}
/>
<CloseSearchButton bind:filter />
{#if $commandsCustomized['new.connection']?.enabled}
<InlineButton on:click={() => runCommand('new.connection')} title="Add new connection">
@@ -127,6 +151,7 @@
</InlineButton>
</SearchBoxWrapper>
<WidgetsInnerContainer
bind:this={domContainer}
on:drop={e => {
var data = e.dataTransfer.getData('app_object_drag_data');
if (data) {
@@ -134,43 +159,57 @@
}
}}
>
<AppObjectList
list={_.sortBy(connectionsWithParent, connection => (getConnectionLabel(connection) || '').toUpperCase())}
module={connectionAppObject}
subItemsComponent={SubDatabaseList}
expandOnClick
isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
{filter}
passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
setIsExpanded={(data, value) => {
expandedConnections.update(old => (value ? [...old, data._id] : old.filter(x => x != data._id)));
<AppObjectListHandler
bind:this={domListHandler}
list={focusFlatList}
selectedObjectStore={focusedConnectionOrDatabase}
getSelectedObject={getFocusedConnectionOrDatabase}
selectedObjectMatcher={(o1, o2) => o1.conid == o2.conid && o1.database == o2.database}
onScrollTop={() => {
domContainer?.scrollTop();
}}
groupIconFunc={chevronExpandIcon}
groupFunc={data => data.parent}
expandIconFunc={plusExpandIcon}
onDropOnGroup={handleDropOnGroup}
emptyGroupNames={$emptyConnectionGroupNames}
sortGroups
groupContextMenu={createGroupContextMenu}
collapsedGroupNames={collapsedConnectionGroupNames}
/>
{#if (connectionsWithParent?.length > 0 && connectionsWithoutParent?.length > 0) || ($emptyConnectionGroupNames.length > 0 && connectionsWithoutParent?.length > 0)}
<div class="br" />
{/if}
<AppObjectList
list={_.sortBy(connectionsWithoutParent, connection => (getConnectionLabel(connection) || '').toUpperCase())}
module={connectionAppObject}
subItemsComponent={SubDatabaseList}
expandOnClick
isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
{filter}
passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
setIsExpanded={(data, value) => {
expandedConnections.update(old => (value ? [...old, data._id] : old.filter(x => x != data._id)));
onFocusFilterBox={() => {
domFilter?.focus();
}}
/>
>
<AppObjectList
list={connectionsWithParent}
module={connectionAppObject}
subItemsComponent={SubDatabaseList}
expandOnClick
isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
{filter}
passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
setIsExpanded={(data, value) => {
expandedConnections.update(old => (value ? [...old, data._id] : old.filter(x => x != data._id)));
}}
groupIconFunc={chevronExpandIcon}
groupFunc={data => data.parent}
expandIconFunc={plusExpandIcon}
onDropOnGroup={handleDropOnGroup}
emptyGroupNames={$emptyConnectionGroupNames}
sortGroups
groupContextMenu={createGroupContextMenu}
collapsedGroupNames={collapsedConnectionGroupNames}
/>
{#if (connectionsWithParent?.length > 0 && connectionsWithoutParent?.length > 0) || ($emptyConnectionGroupNames.length > 0 && connectionsWithoutParent?.length > 0)}
<div class="br" />
{/if}
<AppObjectList
list={connectionsWithoutParent}
module={connectionAppObject}
subItemsComponent={SubDatabaseList}
expandOnClick
isExpandable={data => $openedConnections.includes(data._id) && !data.singleDatabase}
{filter}
passProps={{ connectionColorFactory: $connectionColorFactory, showPinnedInsteadOfUnpin: true }}
getIsExpanded={data => $expandedConnections.includes(data._id) && !data.singleDatabase}
setIsExpanded={(data, value) => {
expandedConnections.update(old => (value ? [...old, data._id] : old.filter(x => x != data._id)));
}}
/>
</AppObjectListHandler>
{#if $connections && !$connections.find(x => !x.unsaved) && $openedConnections.length == 0 && $commandsCustomized['new.connection']?.enabled && !$openedTabs.find(x => !x.closedTime && x.tabComponent == 'ConnectionTab' && !x.props?.conid)}
<LargeButton icon="icon new-connection" on:click={() => runCommand('new.connection')} fillHorizontal
>Add new connection</LargeButton

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

@@ -195,7 +195,7 @@
selectedObjectStore={selectedDatabaseObjectAppObject}
getSelectedObject={getSelectedDatabaseObjectAppObject}
selectedObjectMatcher={matchDatabaseObjectAppObject}
module={databaseObjectAppObject}
handleObjectClick={(data, options) => databaseObjectAppObject.handleObjectClick(data, options)}
onScrollTop={() => {
domContainer?.scrollTop();
}}