redis add item prepare

packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import AceEditor from '../query/AceEditor.svelte';
+
+  export let keyInfo;
+  export let item;
+</script>
+
+<div class="props">
+  {#each keyInfo.tableColumns as column}
+    <div class="colname">{column.name}</div>
+    <div class="colvalue">
+      <AceEditor readOnly value={item && item[column.name]} />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .props {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .colname {
+    margin: 10px;
+  }
+
+  .colvalue {
+    position: relative;
+    flex: 1;
+  }
+</style>

packages/web/src/modals/DbKeyAddItemModal.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import FormStyledButton from '../buttons/FormStyledButton.svelte';
+import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+
+  import FormProvider from '../forms/FormProvider.svelte';
+  import FormSubmit from '../forms/FormSubmit.svelte';
+  import FormTextField from '../forms/FormTextField.svelte';
+  import ModalBase from './ModalBase.svelte';
+  import { closeCurrentModal } from './modalTools';
+
+  export let keyInfo;
+  export let value;
+  export let label;
+  export let onConfirm;
+
+  const handleSubmit = async values => {
+    const { value } = values;
+    closeCurrentModal();
+    onConfirm(value);
+  };
+</script>
+
+<FormProvider initialValues={{ value }}>
+  <ModalBase {...$$restProps}>
+    <svelte:fragment slot="header">
+      Add item
+    </svelte:fragment>
+
+    <DbKeyItemDetail {keyInfo} />
+
+    <svelte:fragment slot="footer">
+      <FormSubmit value="OK" on:click={e => handleSubmit(e.detail)} />
+      <FormStyledButton type="button" value="Cancel" on:click={closeCurrentModal} />
+    </svelte:fragment>
+  </ModalBase>
+</FormProvider>

packages/web/src/tabs/DbKeyDetailTab.svelte

@@ -22,6 +22,8 @@
   import { showModal } from '../modals/modalTools';
   import InputTextModal from '../modals/InputTextModal.svelte';
   import _ from 'lodash';
+  import DbKeyItemDetail from '../dbkeyvalue/DbKeyItemDetail.svelte';
+  import DbKeyAddItemModal from '../modals/DbKeyAddItemModal.svelte';
 
   export let conid;
   export let database;
@@ -34,6 +36,7 @@
 
   $: key = $activeDbKeysStore[`${conid}:${database}`];
   let refreshToken = 0;
+  let editedValue = null;
 
   function handleChangeTtl(keyInfo) {
     showModal(InputTextModal, {
@@ -65,8 +68,23 @@
   }
 
   function refresh() {
+    editedValue = null;
     refreshToken += 1;
   }
+
+  async function saveString() {
+    await apiCall('database-connections/call-method', {
+      conid,
+      database,
+      method: 'set',
+      args: [key, editedValue],
+    });
+    refresh();
+  }
+
+  async function addItem(keyInfo) {
+    showModal(DbKeyAddItemModal, { keyInfo });
+  }
 </script>
 
 {#await apiCall('database-connections/load-key-info', { conid, database, key, refreshToken })}
@@ -82,6 +100,12 @@
         <TextField value={key} readOnly />
       </div>
       <FormStyledButton value={`TTL:${keyInfo.ttl}`} on:click={() => handleChangeTtl(keyInfo)} />
+      {#if keyInfo.type == 'string'}
+        <FormStyledButton value="Save" on:click={saveString} disabled={!editedValue} />
+      {/if}
+      {#if keyInfo.addMethod}
+        <FormStyledButton value="Add item" on:click={() => addItem(keyInfo)} />
+      {/if}
       <FormStyledButton value="Refresh" on:click={refresh} />
     </div>
 
@@ -98,17 +122,17 @@
               }}
             />
           </svelte:fragment>
-          <div slot="2" class="props">
+          <svelte:fragment slot="2">
-            {#each keyInfo.tableColumns as column}
+            <DbKeyItemDetail {keyInfo} item={currentRow} />
-              <div class="colname">{column.name}</div>
+          </svelte:fragment>
-              <div class="colvalue">
-                <AceEditor readOnly value={currentRow && currentRow[column.name]} />
-              </div>
-            {/each}
-          </div>
         </VerticalSplitter>
       {:else}
-        <AceEditor readOnly value={keyInfo.value} />
+        <AceEditor
+          value={editedValue || keyInfo.value}
+          on:input={e => {
+            editedValue = e.detail;
+          }}
+        />
       {/if}
     </div>
   </div>
@@ -137,21 +161,6 @@
     align-self: center;
   }
 
-  .props {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .colname {
-    margin: 10px;
-  }
-
-  .colvalue {
-    position: relative;
-    flex: 1;
-  }
-
   .key-name {
     flex-grow: 1;
     display: flex;

plugins/dbgate-plugin-redis/src/backend/driver.js

@@ -163,18 +163,22 @@ const driver = {
         break;
       case 'list':
         res.tableColumns = [{ name: 'value' }];
+        res.addMethod = 'rpush';
         break;
       case 'set':
         res.tableColumns = [{ name: 'value' }];
         res.keyColumn = 'value';
+        res.addMethod = 'sadd';
         break;
       case 'zset':
-        res.tableColumns = [{ name: 'value' }, { name: 'score' }];
+        res.tableColumns = [{ name: 'score' }, { name: 'value' }];
         res.keyColumn = 'value';
+        res.addMethod = 'zadd';
         break;
       case 'hash':
         res.tableColumns = [{ name: 'key' }, { name: 'value' }];
         res.keyColumn = 'key';
+        res.addMethod = 'hset';
         break;
     }