From b60fc28e4724abe9ef259dd68b13cab5d34c5721 Mon Sep 17 00:00:00 2001
From: lana-k <skochetova89@gmail.com>
Date: Fri, 27 Oct 2023 17:14:14 +0200
Subject: [PATCH] #115 json view

---
 .../Tabs/Tab/RunResult/ValueViewer.vue        | 48 +++++++++++++++++++
 .../Workspace/Tabs/Tab/RunResult/index.vue    | 11 ++++-
 2 files changed, 57 insertions(+), 2 deletions(-)
 create mode 100644 src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue

diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
new file mode 100644
index 0000000..c2d618c
--- /dev/null
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue
@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <codemirror
+        :value="cellValue"
+        :options="cmOptions"
+      />
+  </div>
+</template>
+
+<script>
+import { codemirror } from 'vue-codemirror'
+import 'codemirror/lib/codemirror.css'
+import 'codemirror/mode/javascript/javascript.js'
+import 'codemirror/addon/fold/foldcode.js'
+import 'codemirror/addon/fold/foldgutter.js'
+import 'codemirror/addon/fold/foldgutter.css'
+import 'codemirror/addon/fold/brace-fold.js'
+import 'codemirror/theme/neo.css'
+
+export default {
+  components: {
+    codemirror
+  },
+  props: {
+    cellValue: [String, Number]
+  },
+  data () {
+    return {
+      cmOptions: {
+        tabSize: 4,
+        mode: { name: 'javascript', json: true },
+        theme: 'neo',
+        lineNumbers: true,
+        line: true,
+        foldGutter: true,
+        gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
+        readOnly: true
+      }
+    }
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
index 57e1e0e..79edb54 100644
--- a/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
+++ b/src/views/Main/Workspace/Tabs/Tab/RunResult/index.vue
@@ -12,7 +12,7 @@
       </template>
       <div :id="'run-result-result-set-'+tab.id" class="result-set-container"/>
       <template #right-pane v-if="viewValuePanelVisible">
-        <div>hello</div>
+        <div><value-viewer :cellValue="testCell"/></div>
       </template>
     </component>
 
@@ -103,6 +103,7 @@ import time from '@/lib/utils/time'
 import loadingDialog from '@/components/LoadingDialog'
 import events from '@/lib/utils/events'
 import Teleport from 'vue2-teleport'
+import ValueViewer from './ValueViewer'
 
 export default {
   name: 'RunResult',
@@ -119,7 +120,12 @@ export default {
       pageSize: 20,
       preparingCopy: false,
       dataToCopy: null,
-      viewValuePanelVisible: false
+      viewValuePanelVisible: false,
+      testCell: JSON.stringify(
+        JSON.parse('{"x": 1, "y": 2, "vector": [1,2,3]}'),
+        null,
+        4
+      )
     }
   },
   components: {
@@ -131,6 +137,7 @@ export default {
     IconButton,
     ClipboardIcon,
     loadingDialog,
+    ValueViewer,
     Splitpanes,
     Teleport
   },