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

Refactor DbKeyDetailTab to use ToolStrip for action buttons and improve layout structure

Browse Source
This commit is contained in:
Stela Augustinova
2025-12-10 12:34:28 +01:00
parent 4772c0e110
commit f30b96b360
1 changed files with 60 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

108
packages/web/src/tabs/DbKeyDetailTab.svelte
View File

@@ -36,6 +36,8 @@
import SelectField from '../forms/SelectField.svelte'; import SelectField from '../forms/SelectField.svelte';
import DbKeyValueDetail from '../dbkeyvalue/DbKeyValueDetail.svelte'; import DbKeyValueDetail from '../dbkeyvalue/DbKeyValueDetail.svelte';
import { _t } from '../translations'; import { _t } from '../translations';
import ToolStripContainer from '../buttons/ToolStripContainer.svelte';
import ToolStripButton from '../buttons/ToolStripButton.svelte';
export let tabid; export let tabid;
export let conid; export let conid;
@@ -124,59 +126,69 @@
{#await apiCall('database-connections/load-key-info', { conid, database, key, refreshToken })} {#await apiCall('database-connections/load-key-info', { conid, database, key, refreshToken })}
<LoadingInfo message="Loading key details" wrapper /> <LoadingInfo message="Loading key details" wrapper />
{:then keyInfo} {:then keyInfo}
<div class="container"> <ToolStripContainer>
<div class="top-panel"> <div class="container">
<div class="type"> <div class="top-panel">
<FontIcon icon={getIconForRedisType(keyInfo.type)} padRight /> <div class="type">
{keyInfo.keyType?.label || keyInfo.type} <FontIcon icon={getIconForRedisType(keyInfo.type)} padRight />
{keyInfo.keyType?.label || keyInfo.type}
</div>
<div class="key-name">
<TextField value={key} readOnly />
</div>
<FormStyledButton value={`TTL:${keyInfo.ttl}`} on:click={() => handleChangeTtl(keyInfo)} />
</div> </div>
<div class="key-name">
<TextField value={key} readOnly />
</div>
<FormStyledButton value={`TTL:${keyInfo.ttl}`} on:click={() => handleChangeTtl(keyInfo)} />
{#if keyInfo.type == 'string'}
<FormStyledButton
value={_t('common.save', { defaultMessage: 'Save' })}
on:click={saveString}
disabled={!editedValue}
/>
{/if}
{#if keyInfo.keyType?.addMethod && keyInfo.keyType?.showItemList}
<FormStyledButton value="Add item" on:click={() => addItem(keyInfo)} />
{/if}
<FormStyledButton value={_t('common.refresh', { defaultMessage: 'Refresh' })} on:click={refresh} />
</div>
<div class="content"> <div class="content">
{#if keyInfo.keyType?.dbKeyFields && keyInfo.keyType?.showItemList} {#if keyInfo.keyType?.dbKeyFields && keyInfo.keyType?.showItemList}
<VerticalSplitter> <VerticalSplitter>
<svelte:fragment slot="1"> <svelte:fragment slot="1">
<DbKeyTableControl <DbKeyTableControl
{conid} {conid}
{database} {database}
{keyInfo} {keyInfo}
onChangeSelected={row => { onChangeSelected={row => {
currentRow = row; currentRow = row;
}}
/>
</svelte:fragment>
<svelte:fragment slot="2">
<DbKeyItemDetail
dbKeyFields={keyInfo.type === 'hash'
? keyInfo.keyType.dbKeyFields.filter(f => f.name === 'value')
: keyInfo.keyType.dbKeyFields}
item={currentRow}
/>
</svelte:fragment>
</VerticalSplitter>
{:else}
<div class="value-holder">
<DbKeyValueDetail
columnTitle="Value"
value={editedValue || keyInfo.value}
onChangeValue={value => {
editedValue = value;
}} }}
/> />
</svelte:fragment> </div>
<svelte:fragment slot="2"> {/if}
<DbKeyItemDetail dbKeyFields={keyInfo.keyType.dbKeyFields} item={currentRow} /> </div>
</svelte:fragment>
</VerticalSplitter>
{:else}
<div class="value-holder">
<DbKeyValueDetail
columnTitle="Value"
value={editedValue || keyInfo.value}
onChangeValue={value => {
editedValue = value;
}}
/>
</div>
{/if}
</div> </div>
</div>
<svelte:fragment slot="toolstrip">
{#if keyInfo.type == 'string'}
<ToolStripButton
icon="icon save"
on:click={saveString}
disabled={!editedValue}
>{_t('common.save', { defaultMessage: 'Save' })}</ToolStripButton>
{/if}
{#if keyInfo.keyType?.addMethod && keyInfo.keyType?.showItemList}
<ToolStripButton icon="icon add" on:click={() => addItem(keyInfo)}>Add item</ToolStripButton>
{/if}
<ToolStripButton icon="icon refresh" on:click={refresh}>{_t('common.refresh', { defaultMessage: 'Refresh' })}</ToolStripButton>
</svelte:fragment>
</ToolStripContainer>
{/await} {/await}
<style> <style>