From 11c82b1aacb525dd160a55baaf75572cbf2a7a92 Mon Sep 17 00:00:00 2001
From: Jan Prochazka <jan.prochazka@gmail.com>
Date: Sun, 27 Mar 2022 17:45:05 +0200
Subject: [PATCH] redis json view

---
 .../web/src/dbkeyvalue/DbKeyItemDetail.svelte | 58 +------------
 .../src/dbkeyvalue/DbKeyValueDetail.svelte    | 84 +++++++++++++++++++
 2 files changed, 86 insertions(+), 56 deletions(-)

diff --git a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
index 7a8db5e14..58d1916b7 100644
--- a/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
+++ b/packages/web/src/dbkeyvalue/DbKeyItemDetail.svelte
@@ -1,13 +1,6 @@
 <script lang="ts">
-  import { safeJsonParse } from 'dbgate-tools';
-
   import _ from 'lodash';
-  import SelectField from '../forms/SelectField.svelte';
-  import JsonTree from '../jsontree/JSONTree.svelte';
-
-  import AceEditor from '../query/AceEditor.svelte';
-
-  let display = 'text';
+  import DbKeyValueDetail from './DbKeyValueDetail.svelte';
 
   export let dbKeyFields;
   export let item;
@@ -16,39 +9,7 @@
 
 <div class="props">
   {#each dbKeyFields as column}
-    <div class="colnamewrap">
-      <div class="colname">{_.startCase(column.name)}</div>
-      <SelectField
-        isNative
-        value={display}
-        on:change={e => {
-          display = e.detail;
-        }}
-        options={[
-          { label: 'Text', value: 'text' },
-          { label: 'JSON view', value: 'json' },
-        ]}
-      />
-    </div>
-    <div class="colvalue">
-      {#if display == 'text'}
-        <AceEditor
-          readOnly={!onChangeItem}
-          value={item && item[column.name]}
-          on:input={e => {
-            if (onChangeItem) {
-              onChangeItem({
-                ...item,
-                [column.name]: e.detail,
-              });
-            }
-          }}
-        />
-      {/if}
-      {#if display == 'json'}
-        <JsonTree value={safeJsonParse(item[column.name]) || { error: 'Not valid JSON' }} expanded />
-      {/if}
-    </div>
+    <DbKeyValueDetail {item} {column} {onChangeItem} />
   {/each}
 </div>
 
@@ -58,19 +19,4 @@
     display: flex;
     flex-direction: column;
   }
-
-  .colname {
-    color: var(--theme-font-3);
-  }
-
-  .colvalue {
-    position: relative;
-    flex: 1;
-  }
-
-  .colnamewrap {
-    display: flex;
-    margin: 20px 5px 5px 5px;
-    justify-content: space-between;
-  }
 </style>
diff --git a/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte b/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
index e69de29bb..a1692e1a2 100644
--- a/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
+++ b/packages/web/src/dbkeyvalue/DbKeyValueDetail.svelte
@@ -0,0 +1,84 @@
+<script lang="ts">
+  import { safeJsonParse } from 'dbgate-tools';
+
+  import _ from 'lodash';
+  import SelectField from '../forms/SelectField.svelte';
+  import JsonTree from '../jsontree/JSONTree.svelte';
+
+  import AceEditor from '../query/AceEditor.svelte';
+
+  let display = 'text';
+
+  export let column;
+  export let item;
+  export let onChangeItem = null;
+</script>
+
+<div class="colnamewrap">
+  <div class="colname">{_.startCase(column.name)}</div>
+  <SelectField
+    isNative
+    value={display}
+    on:change={e => {
+      display = e.detail;
+    }}
+    options={[
+      { label: 'Text', value: 'text' },
+      { label: 'JSON view', value: 'json' },
+    ]}
+  />
+</div>
+<div class="colvalue">
+  {#if display == 'text'}
+    <AceEditor
+      readOnly={!onChangeItem}
+      value={item && item[column.name]}
+      on:input={e => {
+        if (onChangeItem) {
+          onChangeItem({
+            ...item,
+            [column.name]: e.detail,
+          });
+        }
+      }}
+    />
+  {/if}
+  {#if display == 'json'}
+    <div class="outer">
+      <div class="inner">
+        <JsonTree value={safeJsonParse(item[column.name]) || { error: 'Not valid JSON' }} expanded />
+      </div>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .colname {
+    color: var(--theme-font-3);
+  }
+
+  .colvalue {
+    position: relative;
+    flex: 1;
+    display: flex;
+  }
+
+  .colnamewrap {
+    display: flex;
+    margin: 20px 5px 5px 5px;
+    justify-content: space-between;
+  }
+
+  .outer {
+    flex: 1;
+    position: relative;
+  }
+  .inner {
+    overflow: scroll;
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    bottom: 0;
+  }
+</style>