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,36 +72,50 @@
   <FormProvider>
     <div class="wrapper">
       <div class="container">
-        <FormFieldTemplateLarge label={_t('addDbKeyModal.key', { defaultMessage: 'Key' })} type="text" noMargin>
-          <TextField
-            value={keyName}
-            on:change={e => {
-              // @ts-ignore
-              keyName = e.target.value;
+        <div class="flex flex-gap">
+          <div class="col-9">
+            <FormFieldTemplateLarge label={_t('addDbKeyModal.key', { defaultMessage: 'Key' })} type="text" noMargin>
+              <TextField
+                value={keyName}
+                on:change={e => {
+                  // @ts-ignore
+                  keyName = e.target.value;
+                }}
+              />
+            </FormFieldTemplateLarge>
+          </div>
+
+          <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 }))}
+                value={type}
+                isNative
+                on:change={e => {
+                  type = e.detail;
+                }}
+              />
+            </FormFieldTemplateLarge>
+          </div>
+        </div>
+
+        {#if type === 'hash'}
+          <DbKeyValueHashEdit
+            dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
+            {item}
+            onChangeItem={value => {
+              item = value;
             }}
           />
-        </FormFieldTemplateLarge>
-
-        <div class="m-3" />
-
-        <FormFieldTemplateLarge label={_t('addDbKeyModal.type', { defaultMessage: 'Type' })} type="combo" noMargin>
-          <SelectField
-            options={driver.supportedKeyTypes.map(t => ({ value: t.name, label: t.label }))}
-            value={type}
-            isNative
-            on:change={e => {
-              type = e.detail;
+        {:else}
+          <DbKeyItemDetail
+            dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
+            {item}
+            onChangeItem={value => {
+              item = value;
             }}
           />
-        </FormFieldTemplateLarge>
-
-        <DbKeyItemDetail
-          dbKeyFields={driver.supportedKeyTypes.find(x => x.name == type).dbKeyFields}
-          {item}
-          onChangeItem={value => {
-            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>