From 28712b205f680c7d1b598e1df50d2d58127d8d94 Mon Sep 17 00:00:00 2001
From: Stela Augustinova <augustinovast@gmail.com>
Date: Thu, 18 Dec 2025 09:15:56 +0100
Subject: [PATCH] Refactor DbKeyDetailTab to use DbKeyItemEdit component for
 editing key items

---
 .../web/src/dbkeyvalue/DbKeyItemEdit.svelte   | 57 +++++++++++++++++++
 packages/web/src/tabs/DbKeyDetailTab.svelte   |  4 +-
 2 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 packages/web/src/dbkeyvalue/DbKeyItemEdit.svelte

diff --git a/packages/web/src/dbkeyvalue/DbKeyItemEdit.svelte b/packages/web/src/dbkeyvalue/DbKeyItemEdit.svelte
new file mode 100644
index 000000000..c72a84179
--- /dev/null
+++ b/packages/web/src/dbkeyvalue/DbKeyItemEdit.svelte
@@ -0,0 +1,57 @@
+<script lang="ts">
+    import _ from 'lodash';
+    import DbKeyValueDetail from './DbKeyValueDetail.svelte';
+
+    export let dbKeyFields;
+    export let item;
+    export let onChangeItem = null;
+    export let keyColumn = null;
+
+    $: console.log('DbKeyItemEdit', { item, dbKeyFields, keyColumn, onChangeItem: !!onChangeItem });
+
+    function getValueAsString(value) {
+        if (value === null || value === undefined) return undefined;
+        if (typeof value === 'string') return value;
+        if (typeof value === 'number') return String(value);
+        return JSON.stringify(value);
+    }
+</script>
+
+<div class="props">
+    {#each dbKeyFields as column}
+        <div class="field-wrapper">
+            <DbKeyValueDetail
+                value={getValueAsString(item?.[column.name])}
+                columnTitle={_.startCase(column.name)}
+                onChangeValue={onChangeItem && column.name !== keyColumn
+                    ? value => {
+                          onChangeItem?.({
+                              ...item,
+                              [column.name]: value,
+                          });
+                      }
+                    : null}
+            />
+        </div>
+    {/each}
+</div>
+
+<style>
+    .props {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+        padding: 10px;
+        overflow: hidden;
+    }
+
+    .field-wrapper {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        max-height: 100px;
+    }
+</style>
\ No newline at end of file
diff --git a/packages/web/src/tabs/DbKeyDetailTab.svelte b/packages/web/src/tabs/DbKeyDetailTab.svelte
index 643d33015..5d869a00d 100644
--- a/packages/web/src/tabs/DbKeyDetailTab.svelte
+++ b/packages/web/src/tabs/DbKeyDetailTab.svelte
@@ -29,7 +29,7 @@
   import { showModal } from '../modals/modalTools';
   import InputTextModal from '../modals/InputTextModal.svelte';
   import _ from 'lodash';
-  import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+  import DbKeyItemEdit from '../dbkeyvalue/DbKeyItemEdit.svelte';
   import DbKeyAddItemModal from '../modals/DbKeyAddItemModal.svelte';
   import ErrorMessageModal from '../modals/ErrorMessageModal.svelte';
   import { changeTab } from '../utility/common';
@@ -304,7 +304,7 @@
               />
             </svelte:fragment>
             <svelte:fragment slot="2">
-              <DbKeyItemDetail 
+              <DbKeyItemEdit 
                 dbKeyFields={keyInfo.type === 'hash' 
                   ? keyInfo.keyType.dbKeyFields.filter(f => f.name === 'value')
                   : keyInfo.keyType.dbKeyFields}