#115 formats and call selections

src/views/Main/Workspace/Tabs/Tab/RunResult/ValueViewer.vue

@@ -1,9 +1,24 @@
 <template>
-  <div>
+  <div class="value-viewer">
+    <div class="value-viewer-toolbar">
+      <button
+        v-for="format in formats"
+        :key="format.value"
+        type="button"
+        :aria-selected="currentFormat === format.value"
+        @click="currentFormat = format.value"
+      >
+        {{ format.text }}
+      </button>
+    </div>
     <codemirror
-        :value="cellValue"
+        v-if="currentFormat === 'json'"
+        :value="formattedJson"
         :options="cmOptions"
       />
+      <div v-else class="text-value">
+        {{ cellValue }}
+      </div>
   </div>
 </template>
 
@@ -26,6 +41,11 @@ export default {
   },
   data () {
     return {
+      formats: [
+        { text: 'JSON', value: 'json' },
+        { text: 'TEXT', value: 'text' }
+      ],
+      currentFormat: 'text',
       cmOptions: {
         tabSize: 4,
         mode: { name: 'javascript', json: true },
@@ -35,14 +55,65 @@ export default {
         foldGutter: true,
         gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
         readOnly: true
+      },
+      formattedJson: ''
+    }
+  },
+  watch: {
+    currentFormat () {
+      this.formattedJson = ''
+      if (this.currentFormat === 'json') {
+        this.formatJson(this.cellValue)
+      }
+    },
+    cellValue () {
+      if (this.currentFormat === 'json') {
+        this.formatJson(this.cellValue)
       }
     }
   },
   methods: {
-
+    formatJson (jsonStr) {
+      try {
+        this.formattedJson = JSON.stringify(
+          JSON.parse(jsonStr), null, 4
+        )
+      } catch {
+        this.formattedJson = ''
+      }
+    }
   }
 }
 </script>
 
 <style scoped>
+.value-viewer {
+  background-color: var(--color-white);
+}
+.value-viewer-toolbar {
+  display: flex;
+  justify-content: end;
+}
+.text-value {
+  padding: 2px 8px;
+  color: var(--color-text-base);
+}
+
+.value-viewer-toolbar button {
+  font-size: 10px;
+  height: 20px;
+  padding: 0 8px;
+  border: none;
+  background: transparent;
+  color: var(--color-text-base);
+  border-radius: var(--border-radius-small);
+}
+
+.value-viewer-toolbar button:hover {
+  background-color: var(--color-bg-light);
+}
+
+.value-viewer-toolbar button[aria-selected="true"] {
+  color: var(--color-accent);
+}
 </style>