connections UX

This commit is contained in:
SPRINX0\prochazka
2024-11-28 14:59:19 +01:00
parent 2283e91532
commit 48ec2bdac8
5 changed files with 106 additions and 92 deletions

View File

@@ -35,7 +35,7 @@
import DropDownButton from '../buttons/DropDownButton.svelte';
import FontIcon from '../icons/FontIcon.svelte';
import CloseSearchButton from '../buttons/CloseSearchButton.svelte';
import { findEngineDriver } from 'dbgate-tools';
import { findEngineDriver, getConnectionLabel } from 'dbgate-tools';
import {
currentDatabase,
extensions,
@@ -53,6 +53,7 @@
import { matchDatabaseObjectAppObject } from '../appobj/appObjectTools';
import FormStyledButton from '../buttons/FormStyledButton.svelte';
import clickOutside from '../utility/clickOutside';
import { openConnection } from '../appobj/ConnectionAppObject.svelte';
export let conid;
export let database;
@@ -135,8 +136,8 @@
$: differentFocusedDb =
$focusedConnectionOrDatabase &&
$focusedConnectionOrDatabase?.database &&
($focusedConnectionOrDatabase.conid != conid || $focusedConnectionOrDatabase?.database != database);
($focusedConnectionOrDatabase.conid != conid ||
($focusedConnectionOrDatabase?.database && $focusedConnectionOrDatabase?.database != database));
</script>
{#if $status && $status.name == 'error'}
@@ -199,30 +200,52 @@
{#if differentFocusedDb}
<div class="no-focused-info">
<div class="m-1">Current database:</div>
<div class="m-1 ml-3 mb-3">
<b>{database}</b>
</div>
<FormStyledButton
value={`Switch to ${$focusedConnectionOrDatabase?.database}`}
skipWidth
on:click={() =>
switchCurrentDatabase({
connection: $focusedConnectionOrDatabase?.connection,
name: $focusedConnectionOrDatabase?.database,
})}
/>
<FormStyledButton
value={`Show ${database}`}
skipWidth
on:click={() => {
$focusedConnectionOrDatabase = {
conid,
database,
connection: $connection,
};
}}
/>
{#if $focusedConnectionOrDatabase?.database}
<div class="m-1">Current database:</div>
<div class="m-1 ml-3 mb-3">
<b>{database}</b>
</div>
<FormStyledButton
value={`Switch to ${$focusedConnectionOrDatabase?.database}`}
skipWidth
on:click={() =>
switchCurrentDatabase({
connection: $focusedConnectionOrDatabase?.connection,
name: $focusedConnectionOrDatabase?.database,
})}
/>
<FormStyledButton
value={`Show ${database}`}
skipWidth
on:click={() => {
$focusedConnectionOrDatabase = {
conid,
database,
connection: $connection,
};
}}
/>
{:else}
<div class="m-1">Current connection:</div>
<div class="m-1 ml-3 mb-3">
<b>{getConnectionLabel($connection)}</b>
</div>
<FormStyledButton
value={`Connect to ${getConnectionLabel($focusedConnectionOrDatabase?.connection)}`}
skipWidth
on:click={() => openConnection($focusedConnectionOrDatabase?.connection)}
/>
<FormStyledButton
value={`Show ${getConnectionLabel($connection)}`}
skipWidth
on:click={() => {
$focusedConnectionOrDatabase = {
conid,
connection: $connection,
};
}}
/>
{/if}
</div>
{/if}