From 398d9f15df0c17aa9e052fcf8c88109babd56968 Mon Sep 17 00:00:00 2001 From: "SPRINX0\\prochazka" Date: Mon, 25 Nov 2024 11:00:41 +0100 Subject: [PATCH 1/5] focus connection or database WIP --- .../web/src/appobj/ConnectionAppObject.svelte | 9 +- packages/web/src/stores.ts | 7 + .../src/widgets/AppObjectListHandler.svelte | 12 +- .../web/src/widgets/ConnectionList.svelte | 123 ++++++++++++------ packages/web/src/widgets/SqlObjectList.svelte | 2 +- 5 files changed, 103 insertions(+), 50 deletions(-) diff --git a/packages/web/src/appobj/ConnectionAppObject.svelte b/packages/web/src/appobj/ConnectionAppObject.svelte index e0b0c08bf..dd9255277 100644 --- a/packages/web/src/appobj/ConnectionAppObject.svelte +++ b/packages/web/src/appobj/ConnectionAppObject.svelte @@ -83,6 +83,7 @@ currentDatabase, expandedConnections, extensions, + focusedConnectionOrDatabase, getCurrentConfig, getCurrentDatabase, getCurrentSettings, @@ -135,7 +136,7 @@ }); }; - const handleClick = async () => { + const handleDoubleClick = async () => { const config = getCurrentConfig(); if (config.runAsPortal) { await tick(); @@ -158,6 +159,10 @@ } }; + const handleClick = async (e) => { + focusedConnectionOrDatabase.set({ conid: data?._id }); + }; + const handleSqlRestore = () => { showModal(ImportDatabaseDumpModal, { connection: data, @@ -328,6 +333,7 @@ {extInfo} colorMark={passProps?.connectionColorFactory && passProps?.connectionColorFactory({ conid: data._id })} menu={getContextMenu} + on:dblclick={handleDoubleClick} on:click={handleClick} on:click on:expand @@ -337,4 +343,5 @@ .find(x => x.isNewQuery) .onClick(); }} + isChoosed={data._id == $focusedConnectionOrDatabase?.conid && !$focusedConnectionOrDatabase?.database} /> diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts index 76dd67dc1..ef04ec619 100644 --- a/packages/web/src/stores.ts +++ b/packages/web/src/stores.ts @@ -158,6 +158,7 @@ export const appliedCurrentSchema = writable(null); export const loadingSchemaLists = writable({}); // dict [`${conid}::${database}`]: true export const selectedDatabaseObjectAppObject = writable(null); +export const focusedConnectionOrDatabase = writable<{ conid: string; database?: string }>(null); export const currentThemeDefinition = derived([currentTheme, extensions], ([$currentTheme, $extensions]) => $extensions.themes.find(x => x.themeClassName == $currentTheme) @@ -339,3 +340,9 @@ openedModals.subscribe(value => { openedModalsValue = value; }); export const getOpenedModals = () => openedModalsValue; + +let focusedConnectionOrDatabaseValue = null; +focusedConnectionOrDatabase.subscribe(value => { + focusedConnectionOrDatabaseValue = value; +}); +export const getFocusedConnectionOrDatabase = () => focusedConnectionOrDatabaseValue; \ No newline at end of file diff --git a/packages/web/src/widgets/AppObjectListHandler.svelte b/packages/web/src/widgets/AppObjectListHandler.svelte index 9fdb57a36..0f64ac685 100644 --- a/packages/web/src/widgets/AppObjectListHandler.svelte +++ b/packages/web/src/widgets/AppObjectListHandler.svelte @@ -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?.(); } } diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte index 03160390b..93149811d 100644 --- a/packages/web/src/widgets/ConnectionList.svelte +++ b/packages/web/src/widgets/ConnectionList.svelte @@ -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 @@ - + { + domListHandler?.focusFirst(); + }} + /> {#if $commandsCustomized['new.connection']?.enabled} runCommand('new.connection')} title="Add new connection"> @@ -127,6 +151,7 @@ { var data = e.dataTransfer.getData('app_object_drag_data'); if (data) { @@ -134,43 +159,57 @@ } }} > - (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))); + 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)} -
- {/if} - (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(); }} - /> + > + $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)} +
+ {/if} + $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))); + }} + /> + {#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)} runCommand('new.connection')} fillHorizontal >Add new connection databaseObjectAppObject.handleObjectClick(data, options)} onScrollTop={() => { domContainer?.scrollTop(); }} From a37b74f693b392fc4cbb20b9b2e4eac1d36dc213 Mon Sep 17 00:00:00 2001 From: "SPRINX0\\prochazka" Date: Mon, 25 Nov 2024 13:46:16 +0100 Subject: [PATCH 2/5] focusable databases WIP --- .../web/src/appobj/DatabaseAppObject.svelte | 11 ++- .../web/src/appobj/SubDatabaseList.svelte | 4 +- .../src/widgets/AppObjectListHandler.svelte | 34 ++++---- .../web/src/widgets/ConnectionList.svelte | 80 +++++++++++++++++-- .../web/src/widgets/DatabaseWidget.svelte | 7 +- packages/web/src/widgets/SqlObjectList.svelte | 4 + 6 files changed, 111 insertions(+), 29 deletions(-) diff --git a/packages/web/src/appobj/DatabaseAppObject.svelte b/packages/web/src/appobj/DatabaseAppObject.svelte index 4e1cb7339..b962e0f77 100644 --- a/packages/web/src/appobj/DatabaseAppObject.svelte +++ b/packages/web/src/appobj/DatabaseAppObject.svelte @@ -446,6 +446,7 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify( currentArchive, currentDatabase, extensions, + focusedConnectionOrDatabase, getCurrentDatabase, getExtensions, getOpenedTabs, @@ -512,7 +513,13 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify( passProps?.connectionColorFactory({ conid: data?.connection?._id, database: data.name }, null, null, false)} isBold={$currentDatabase?.connection?._id == data?.connection?._id && extractDbNameFromComposite($currentDatabase?.name) == data.name} - on:click={() => switchCurrentDatabase(data)} + on:dblclick={() => { + switchCurrentDatabase(data); + passProps?.onFocusSqlObjectList?.(); + }} + on:click={() => { + $focusedConnectionOrDatabase = { conid: data.connection?._id, database: data.name }; + }} on:dragstart on:dragenter on:dragend @@ -532,4 +539,6 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify( list.filter(x => x?.name != data?.name || x?.connection?._id != data?.connection?._id) ) : null} + isChoosed={data.connection?._id == $focusedConnectionOrDatabase?.conid && + data.name == $focusedConnectionOrDatabase?.database} /> diff --git a/packages/web/src/appobj/SubDatabaseList.svelte b/packages/web/src/appobj/SubDatabaseList.svelte index b48b646a2..6d8abaec0 100644 --- a/packages/web/src/appobj/SubDatabaseList.svelte +++ b/packages/web/src/appobj/SubDatabaseList.svelte @@ -15,13 +15,11 @@ $: databases = useDatabaseList({ conid: isExpandedOnlyBySearch ? null : data._id }); $: dbList = isExpandedOnlyBySearch ? getLocalStorage(`database_list_${data._id}`) || [] : $databases || []; - - $: connectionLabel = getConnectionLabel(data); filterName(filter, x.name, connectionLabel)), + dbList.filter(x => filterName(filter, x.name, data.displayName, data.server)), x => x.sortOrder ?? x.name ).map(db => ({ ...db, connection: data }))} module={databaseAppObject} diff --git a/packages/web/src/widgets/AppObjectListHandler.svelte b/packages/web/src/widgets/AppObjectListHandler.svelte index 0f64ac685..4e89c6eee 100644 --- a/packages/web/src/widgets/AppObjectListHandler.svelte +++ b/packages/web/src/widgets/AppObjectListHandler.svelte @@ -15,9 +15,11 @@ let domDiv = null; function handleKeyDown(ev) { + const listInstance = _.isFunction(list) ? list() : list; + function selectByDiff(diff) { const selected = getSelectedObject(); - const index = _.findIndex(list, x => selectedObjectMatcher(x, selected)); + const index = _.findIndex(listInstance, x => selectedObjectMatcher(x, selected)); if (index == 0 && diff < 0) { onFocusFilterBox?.(); @@ -26,16 +28,16 @@ if (index >= 0) { let newIndex = index + diff; - if (newIndex >= list.length) { - newIndex = list.length - 1; + if (newIndex >= listInstance.length) { + newIndex = listInstance.length - 1; } if (newIndex < 0) { newIndex = 0; } - if (list[newIndex]) { - selectedObjectStore.set(list[newIndex]); - handleObjectClick?.(list[newIndex], { tabPreviewMode: true }); + if (listInstance[newIndex]) { + selectedObjectStore.set(listInstance[newIndex]); + handleObjectClick?.(listInstance[newIndex], { tabPreviewMode: true }); } if (newIndex == 0) { @@ -64,25 +66,27 @@ ev.preventDefault(); } if (ev.keyCode == keycodes.home) { - if (list[0]) { - selectedObjectStore.set(list[0]); - handleObjectClick?.(list[0], { tabPreviewMode: true }); + if (listInstance[0]) { + selectedObjectStore.set(listInstance[0]); + handleObjectClick?.(listInstance[0], { tabPreviewMode: true }); onScrollTop?.(); } } if (ev.keyCode == keycodes.end) { - if (list[list.length - 1]) { - selectedObjectStore.set(list[list.length - 1]); - handleObjectClick?.(list[list.length - 1], { tabPreviewMode: true }); + if (listInstance[listInstance.length - 1]) { + selectedObjectStore.set(listInstance[listInstance.length - 1]); + handleObjectClick?.(listInstance[listInstance.length - 1], { tabPreviewMode: true }); } } } export function focusFirst() { + const listInstance = _.isFunction(list) ? list() : list; + domDiv?.focus(); - if (list[0]) { - selectedObjectStore.set(list[0]); - handleObjectClick?.(list[0], { tabPreviewMode: true }); + if (listInstance[0]) { + selectedObjectStore.set(listInstance[0]); + handleObjectClick?.(listInstance[0], { tabPreviewMode: true }); onScrollTop?.(); } } diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte index 93149811d..43dfa1ed9 100644 --- a/packages/web/src/widgets/ConnectionList.svelte +++ b/packages/web/src/widgets/ConnectionList.svelte @@ -1,4 +1,10 @@ {#if $status && $status.name == 'error'} From dfdb86de6f932c9cc2db6439a3b5d5b7102d2f1f Mon Sep 17 00:00:00 2001 From: "SPRINX0\\prochazka" Date: Mon, 25 Nov 2024 15:52:26 +0100 Subject: [PATCH 3/5] db widget UX --- .../web/src/appobj/AppObjectListItem.svelte | 2 +- .../web/src/appobj/ConnectionAppObject.svelte | 25 ++++++++++++++-- .../web/src/appobj/DatabaseAppObject.svelte | 3 +- packages/web/src/elements/SearchInput.svelte | 6 +++- packages/web/src/stores.ts | 8 ++++- .../src/widgets/AppObjectListHandler.svelte | 30 ++++++++++++++++--- .../web/src/widgets/ConnectionList.svelte | 15 ++++------ packages/web/src/widgets/SqlObjectList.svelte | 4 +-- 8 files changed, 70 insertions(+), 23 deletions(-) diff --git a/packages/web/src/appobj/AppObjectListItem.svelte b/packages/web/src/appobj/AppObjectListItem.svelte index b3524adaa..2b61b232b 100644 --- a/packages/web/src/appobj/AppObjectListItem.svelte +++ b/packages/web/src/appobj/AppObjectListItem.svelte @@ -50,7 +50,7 @@ x.name)); }; export function openConnection(connection) { + if (connection.singleDatabase) { + if (getOpenedSingleDatabaseConnections().includes(connection._id)) { + return; + } + } else { + if (getOpenedConnections().includes(connection._id)) { + return; + } + } + const config = getCurrentConfig(); if (connection.singleDatabase) { switchCurrentDatabase({ connection, name: connection.defaultDatabase }); @@ -88,6 +98,7 @@ getCurrentDatabase, getCurrentSettings, getOpenedConnections, + getOpenedSingleDatabaseConnections, getOpenedTabs, openedConnections, openedSingleDatabaseConnections, @@ -159,8 +170,17 @@ } }; - const handleClick = async (e) => { + const handleClick = async e => { focusedConnectionOrDatabase.set({ conid: data?._id }); + openNewTab({ + title: getConnectionLabel(data), + icon: 'img connection', + tabComponent: 'ConnectionTab', + tabPreviewMode: true, + props: { + conid: data._id, + }, + }); }; const handleSqlRestore = () => { @@ -333,9 +353,8 @@ {extInfo} colorMark={passProps?.connectionColorFactory && passProps?.connectionColorFactory({ conid: data._id })} menu={getContextMenu} - on:dblclick={handleDoubleClick} on:click={handleClick} - on:click + on:dblclick on:expand on:dblclick={handleConnect} on:middleclick={() => { diff --git a/packages/web/src/appobj/DatabaseAppObject.svelte b/packages/web/src/appobj/DatabaseAppObject.svelte index b962e0f77..654fbe0df 100644 --- a/packages/web/src/appobj/DatabaseAppObject.svelte +++ b/packages/web/src/appobj/DatabaseAppObject.svelte @@ -515,9 +515,10 @@ await dbgateApi.dropAllDbObjects(${JSON.stringify( extractDbNameFromComposite($currentDatabase?.name) == data.name} on:dblclick={() => { switchCurrentDatabase(data); - passProps?.onFocusSqlObjectList?.(); + // passProps?.onFocusSqlObjectList?.(); }} on:click={() => { + // switchCurrentDatabase(data); $focusedConnectionOrDatabase = { conid: data.connection?._id, database: data.name }; }} on:dragstart diff --git a/packages/web/src/elements/SearchInput.svelte b/packages/web/src/elements/SearchInput.svelte index 4db40765f..d3efcd775 100644 --- a/packages/web/src/elements/SearchInput.svelte +++ b/packages/web/src/elements/SearchInput.svelte @@ -23,8 +23,12 @@ const debouncedSet = _.debounce(x => (value = x), 500); - export function focus() { + export function focus(text) { domInput.focus(); + if (text) { + domInput.value = text; + value = text; + } } diff --git a/packages/web/src/stores.ts b/packages/web/src/stores.ts index ef04ec619..92b751723 100644 --- a/packages/web/src/stores.ts +++ b/packages/web/src/stores.ts @@ -345,4 +345,10 @@ let focusedConnectionOrDatabaseValue = null; focusedConnectionOrDatabase.subscribe(value => { focusedConnectionOrDatabaseValue = value; }); -export const getFocusedConnectionOrDatabase = () => focusedConnectionOrDatabaseValue; \ No newline at end of file +export const getFocusedConnectionOrDatabase = () => focusedConnectionOrDatabaseValue; + +let openedSingleDatabaseConnectionsValue = []; +openedSingleDatabaseConnections.subscribe(value => { + openedSingleDatabaseConnectionsValue = value; +}); +export const getOpenedSingleDatabaseConnections = () => openedSingleDatabaseConnectionsValue; diff --git a/packages/web/src/widgets/AppObjectListHandler.svelte b/packages/web/src/widgets/AppObjectListHandler.svelte index 4e89c6eee..57c3f5d85 100644 --- a/packages/web/src/widgets/AppObjectListHandler.svelte +++ b/packages/web/src/widgets/AppObjectListHandler.svelte @@ -16,7 +16,7 @@ function handleKeyDown(ev) { const listInstance = _.isFunction(list) ? list() : list; - + function selectByDiff(diff) { const selected = getSelectedObject(); const index = _.findIndex(listInstance, x => selectedObjectMatcher(x, selected)); @@ -78,6 +78,20 @@ handleObjectClick?.(listInstance[listInstance.length - 1], { tabPreviewMode: true }); } } + + if ( + !ev.ctrlKey && + !ev.altKey && + !ev.metaKey && + ((ev.keyCode >= keycodes.a && ev.keyCode <= keycodes.z) || + (ev.keyCode >= keycodes.n0 && ev.keyCode <= keycodes.n9) || + (ev.keyCode >= keycodes.numPad0 && ev.keyCode <= keycodes.numPad9) || + ev.keyCode == keycodes.dash) + ) { + const text = ev.key; + onFocusFilterBox?.(text); + ev.preventDefault(); + } } export function focusFirst() { @@ -90,6 +104,16 @@ onScrollTop?.(); } } + + function handleFocus() { + isListFocused = true; + const listInstance = _.isFunction(list) ? list() : list; + const selected = getSelectedObject(); + const index = _.findIndex(listInstance, x => selectedObjectMatcher(x, selected)); + if (index < 0) { + focusFirst(); + } + }
{ - isListFocused = true; - }} + on:focus={handleFocus} on:blur={() => { isListFocused = false; }} diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte index 43dfa1ed9..a9fab2af8 100644 --- a/packages/web/src/widgets/ConnectionList.svelte +++ b/packages/web/src/widgets/ConnectionList.svelte @@ -1,10 +1,4 @@ - + diff --git a/packages/web/src/widgets/ConnectionList.svelte b/packages/web/src/widgets/ConnectionList.svelte index a9fab2af8..1e860b2cb 100644 --- a/packages/web/src/widgets/ConnectionList.svelte +++ b/packages/web/src/widgets/ConnectionList.svelte @@ -97,10 +97,7 @@ res.push({ conid: con._id, database: db.name, - dbobj: { - connection: con, - name: db.name, - }, + connection: con, }); } } @@ -202,7 +199,7 @@ list={getFocusFlatList} selectedObjectStore={focusedConnectionOrDatabase} getSelectedObject={getFocusedConnectionOrDatabase} - selectedObjectMatcher={(o1, o2) => o1.conid == o2.conid && o1.database == o2.database} + selectedObjectMatcher={(o1, o2) => o1?.conid == o2?.conid && o1?.database == o2?.database} onScrollTop={() => { domContainer?.scrollTop(); }} @@ -212,7 +209,7 @@ handleObjectClick={(data, options) => { if (data.database) { if (options.focusTab) { - switchCurrentDatabase(data.dbobj); + switchCurrentDatabase({ connection: data.connection, name: data.database }); // console.log('FOCUSING DB', passProps); // passProps?.onFocusSqlObjectList?.(); } diff --git a/packages/web/src/widgets/SqlObjectList.svelte b/packages/web/src/widgets/SqlObjectList.svelte index ad608e44f..8956eeb5c 100644 --- a/packages/web/src/widgets/SqlObjectList.svelte +++ b/packages/web/src/widgets/SqlObjectList.svelte @@ -31,7 +31,7 @@ import { chevronExpandIcon } from '../icons/expandIcons'; import ErrorInfo from '../elements/ErrorInfo.svelte'; import LoadingInfo from '../elements/LoadingInfo.svelte'; - import { getObjectTypeFieldLabel } from '../utility/common'; + import { getObjectTypeFieldLabel, switchCurrentDatabase } from '../utility/common'; import DropDownButton from '../buttons/DropDownButton.svelte'; import FontIcon from '../icons/FontIcon.svelte'; import CloseSearchButton from '../buttons/CloseSearchButton.svelte'; @@ -39,6 +39,7 @@ import { currentDatabase, extensions, + focusedConnectionOrDatabase, getSelectedDatabaseObjectAppObject, selectedDatabaseObjectAppObject, } from '../stores'; @@ -50,6 +51,8 @@ import { appliedCurrentSchema } from '../stores'; import AppObjectListHandler from './AppObjectListHandler.svelte'; import { matchDatabaseObjectAppObject } from '../appobj/appObjectTools'; + import FormStyledButton from '../buttons/FormStyledButton.svelte'; + import clickOutside from '../utility/clickOutside'; export let conid; export let database; @@ -129,6 +132,11 @@ export function focus() { domListHandler?.focusFirst(); } + + $: differentFocusedDb = + $focusedConnectionOrDatabase && + $focusedConnectionOrDatabase?.database && + ($focusedConnectionOrDatabase.conid != conid || $focusedConnectionOrDatabase?.database != database); {#if $status && $status.name == 'error'} @@ -189,7 +197,25 @@ negativeMarginTop /> - + {#if differentFocusedDb} +
+
Current database:
+
+ {database} +
+ + switchCurrentDatabase({ + connection: $focusedConnectionOrDatabase?.connection, + name: $focusedConnectionOrDatabase?.database, + })} + /> +
+ {/if} + + {#if ($status && ($status.name == 'pending' || $status.name == 'checkStructure' || $status.name == 'loadStructure') && $objects) || !$objects} {:else} @@ -228,3 +254,12 @@ {/if} {/if} + + diff --git a/packages/web/src/widgets/WidgetsInnerContainer.svelte b/packages/web/src/widgets/WidgetsInnerContainer.svelte index 76f7f2895..262c1856c 100644 --- a/packages/web/src/widgets/WidgetsInnerContainer.svelte +++ b/packages/web/src/widgets/WidgetsInnerContainer.svelte @@ -1,12 +1,14 @@ -
+
From c241f5c5628dd94f4e12fdee9d0e9c595f02e3c9 Mon Sep 17 00:00:00 2001 From: "SPRINX0\\prochazka" Date: Tue, 26 Nov 2024 09:04:13 +0100 Subject: [PATCH 5/5] focused DB UX --- packages/web/src/utility/changeCurrentDbByTab.ts | 11 +++++++++++ .../web/src/widgets/AppObjectListHandler.svelte | 16 +++++++++++++++- packages/web/src/widgets/ConnectionList.svelte | 9 +++++++++ packages/web/src/widgets/SqlObjectList.svelte | 11 +++++++++++ 4 files changed, 46 insertions(+), 1 deletion(-) diff --git a/packages/web/src/utility/changeCurrentDbByTab.ts b/packages/web/src/utility/changeCurrentDbByTab.ts index b3b29ee15..17f08086b 100644 --- a/packages/web/src/utility/changeCurrentDbByTab.ts +++ b/packages/web/src/utility/changeCurrentDbByTab.ts @@ -1,6 +1,7 @@ import _ from 'lodash'; import { currentDatabase, + focusedConnectionOrDatabase, getActiveTab, getCurrentDatabase, getLockedDatabaseMode, @@ -78,6 +79,16 @@ export async function handleAfterTabClick() { } currentDatabase.subscribe(currentDb => { + if (currentDb) { + focusedConnectionOrDatabase.set({ + conid: currentDb.connection?._id, + database: currentDb.name, + connection: currentDb.connection, + }); + } else { + focusedConnectionOrDatabase.set(null); + } + if (!getLockedDatabaseMode()) return; if (!currentDb && !getAppLoaded()) return; openedTabs.update(tabs => { diff --git a/packages/web/src/widgets/AppObjectListHandler.svelte b/packages/web/src/widgets/AppObjectListHandler.svelte index 00a3e28a9..0e5463df9 100644 --- a/packages/web/src/widgets/AppObjectListHandler.svelte +++ b/packages/web/src/widgets/AppObjectListHandler.svelte @@ -1,6 +1,7 @@