Add DbKeyValueHashEdit component for editing hash key values in DbKeyTab

packages/web/src/dbkeyvalue/DbKeyValueHashEdit.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import _ from 'lodash';
+    import TextField from '../forms/TextField.svelte';
+    import FormFieldTemplateLarge from '../forms/FormFieldTemplateLarge.svelte';
+    import FontIcon from '../icons/FontIcon.svelte';
+
+    export let dbKeyFields;
+    export let item;
+    export let onChangeItem = null;
+    export let keyColumn = null;
+
+    let records = [{ key: '', value: '', ttl: '' }];
+
+    $: console.log('DbKeyItemEdit', { item, dbKeyFields, keyColumn, onChangeItem: !!onChangeItem });
+
+    function getValueAsString(value) {
+        if (value === null || value === undefined) return '';
+        if (typeof value === 'string') return value;
+        if (typeof value === 'number') return String(value);
+        return JSON.stringify(value);
+    }
+
+    function handleFieldChange(index, fieldName, value) {
+        records = records.map((record, idx) => 
+            idx === index ? { ...record, [fieldName]: value } : record
+        );
+        
+        if (onChangeItem && fieldName !== keyColumn) {
+            onChangeItem?.({
+                ...item,
+                records: records,
+            });
+        }
+    }
+
+    function addRecord() {
+        records = [...records, { key: '', value: '', ttl: '' }];
+    }
+</script>
+
+<div class="container">
+    {#each records as record, index}
+        <div class="props flex">
+            <div class="field-wrapper col-3">
+                <FormFieldTemplateLarge label="Key" type="text" noMargin>
+                    <TextField 
+                        value={record.key}
+                        on:change={e => handleFieldChange(index, 'key', e.target.value)}
+                        disabled={keyColumn === 'key'}
+                    />
+                </FormFieldTemplateLarge>
+            </div>
+            <div class="field-wrapper col-7">
+                <FormFieldTemplateLarge label="Value" type="text" noMargin>
+                    <TextField 
+                        value={record.value}
+                        on:change={e => handleFieldChange(index, 'value', e.target.value)}
+                        disabled={keyColumn === 'value'}
+                    />
+                </FormFieldTemplateLarge>
+            </div>
+            <div class="field-wrapper col-2">
+                <FormFieldTemplateLarge label="TTL" type="text" noMargin>
+                    <TextField 
+                        value={record.ttl}
+                        on:change={e => handleFieldChange(index, 'ttl', e.target.value)}
+                        disabled={keyColumn === 'ttl'}
+                    />
+                </FormFieldTemplateLarge>
+            </div>
+        </div>
+    {/each}
+
+    <div class="add-button-wrapper">
+        <button class="add-button" on:click={addRecord}>
+            <FontIcon icon="icon add" />
+        </button>
+    </div>
+</div>
+
+<style>
+    .container {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        overflow-y: auto;
+    }
+
+    .props {
+        display: flex;
+        flex-direction: row;
+        gap: 10px;
+    }
+
+    .field-wrapper {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .add-button-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        margin-top: 10px;
+    }
+
+    .add-button {
+        background: none;
+        border: none;
+        padding: 0;
+        cursor: pointer;
+        color: var(--theme-font-3);
+        transition: color 0.2s;
+        font-size: 24px;
+    }
+
+    .add-button:hover {
+        color: var(--theme-font-hover);
+    }
+</style>

packages/web/src/tabs/DbKeyTab.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+  import DbKeyValueHashEdit from '../dbkeyvalue/DbKeyValueHashEdit.svelte';
   import FormFieldTemplateLarge from "../forms/FormFieldTemplateLarge.svelte";
   import FormProvider from '../forms/FormProvider.svelte';
   import SelectField from '../forms/SelectField.svelte';
@@ -71,6 +72,8 @@
   <FormProvider>
     <div class="wrapper">
       <div class="container">
+        <div class="flex flex-gap">
+          <div class="col-9">
             <FormFieldTemplateLarge label={_t('addDbKeyModal.key', { defaultMessage: 'Key' })} type="text" noMargin>
               <TextField
                 value={keyName}
@@ -80,9 +83,9 @@
                 }}
               />
             </FormFieldTemplateLarge>
+          </div>
 
-        <div class="m-3" />
+          <div class="col-3">
-
             <FormFieldTemplateLarge label={_t('addDbKeyModal.type', { defaultMessage: 'Type' })} type="combo" noMargin>
               <SelectField
                 options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
@@ -93,7 +96,18 @@
                 }}
               />
             </FormFieldTemplateLarge>
+          </div>
+        </div>
 
+        {#if type === 'hash'}
+          <DbKeyValueHashEdit
+            dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
+            {item}
+            onChangeItem={value => {
+              item = value;
+            }}
+          />
+        {:else}
           <DbKeyItemDetail
             dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
             {item}
@@ -101,6 +115,7 @@
               item = value;
             }}
           />
+        {/if}
 
         <div class="m-3" />
 
@@ -136,6 +151,7 @@
     flex-direction: column;
     padding: 20px;
     overflow: hidden;
+    gap: 10px;
   }
 
   .button-container {
@@ -143,4 +159,9 @@
     gap: 10px;
     margin-top: 10px;
   }
+
+  .flex-gap {
+    gap: 10px;
+    padding-bottom: 10px;
+  }
 </style>