#115 add split in result set

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

@@ -1,6 +1,63 @@
 <template>
-  <div class="run-result-panel" ref="runResultPanel">
-    <div class="run-result-panel-content">
+  <div class="run-result-panel">
+   <component
+      :is="viewValuePanelVisible ? 'splitpanes':'div'"
+      :before="{ size: 50, max: 100 }"
+      :after="{ size: 50, max: 100 }"
+      :default="{ before: 50, after: 50 }"
+      class="run-result-panel-content"
+    >
+      <template  #left-pane>
+      <div :id="'run-result-left-pane-'+tab.id" class="result-set-container"/>
+      </template>
+      <div :id="'run-result-result-set-'+tab.id" class="result-set-container"/>
+      <template #right-pane v-if="viewValuePanelVisible">
+        <div>hello</div>
+      </template>
+    </component>
+
+    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table">
+      <icon-button
+        :disabled="!result"
+        tooltip="Export result set to CSV file"
+        tooltip-position="top-left"
+        @click="exportToCsv"
+      >
+        <export-to-csv-icon/>
+      </icon-button>
+
+      <icon-button
+        :disabled="!result"
+        tooltip="Copy result set to clipboard"
+        tooltip-position="top-left"
+        @click="prepareCopy"
+      >
+        <clipboard-icon/>
+      </icon-button>
+
+      <icon-button
+        :disabled="!result"
+        tooltip="View value"
+        tooltip-position="top-left"
+        @click="toggleViewValuePanel"
+      >
+        <clipboard-icon/>
+      </icon-button>
+    </side-tool-bar>
+
+    <loading-dialog
+      loadingMsg="Building CSV..."
+      successMsg="CSV is ready"
+      actionBtnName="Copy"
+      name="prepareCSVCopy"
+      title="Copy to clipboard"
+      :loading="preparingCopy"
+      @action="copyToClipboard"
+      @cancel="cancelCopy"
+    />
+
+    <teleport :to="resultSetTeleportTarget">
+      <div ref="runResultPanel">
             <div
               v-show="result === null && !isGettingResults && !error"
               class="table-preview result-before"
@@ -26,36 +83,7 @@
               class="straight"
             />
           </div>
-    <side-tool-bar @switchTo="$emit('switchTo', $event)" panel="table">
-      <icon-button
-        :disabled="!result"
-        tooltip="Export result set to CSV file"
-        tooltip-position="top-left"
-        @click="exportToCsv"
-      >
-        <export-to-csv-icon/>
-      </icon-button>
-
-      <icon-button
-        :disabled="!result"
-        tooltip="Copy result set to clipboard"
-        tooltip-position="top-left"
-        @click="prepareCopy"
-      >
-        <clipboard-icon/>
-      </icon-button>
-    </side-tool-bar>
-
-    <loading-dialog
-      loadingMsg="Building CSV..."
-      successMsg="CSV is ready"
-      actionBtnName="Copy"
-      name="prepareCSVCopy"
-      title="Copy to clipboard"
-      :loading="preparingCopy"
-      @action="copyToClipboard"
-      @cancel="cancelCopy"
-    />
+    </teleport>
   </div>
 </template>
 
@@ -63,7 +91,8 @@
 import Logs from '@/components/Logs'
 import SqlTable from '@/components/SqlTable'
 import LoadingIndicator from '@/components/LoadingIndicator'
-import SideToolBar from './SideToolBar'
+import SideToolBar from '../SideToolBar'
+import Splitpanes from '@/components/Splitpanes'
 import ExportToCsvIcon from '@/components/svg/exportToCsv'
 import ClipboardIcon from '@/components/svg/clipboard'
 import IconButton from '@/components/IconButton'
@@ -73,16 +102,24 @@ import cIo from '@/lib/utils/clipboardIo'
 import time from '@/lib/utils/time'
 import loadingDialog from '@/components/LoadingDialog'
 import events from '@/lib/utils/events'
+import Teleport from 'vue2-teleport'
 
 export default {
   name: 'RunResult',
-  props: ['result', 'isGettingResults', 'error', 'time'],
+  props: {
+    tab: Object,
+    result: Object,
+    isGettingResults: Boolean,
+    error: Object,
+    time: [String, Number]
+  },
   data () {
     return {
       resizeObserver: null,
       pageSize: 20,
       preparingCopy: false,
-      dataToCopy: null
+      dataToCopy: null,
+      viewValuePanelVisible: false
     }
   },
   components: {
@@ -93,7 +130,19 @@ export default {
     ExportToCsvIcon,
     IconButton,
     ClipboardIcon,
-    loadingDialog
+    loadingDialog,
+    Splitpanes,
+    Teleport
+  },
+  computed: {
+    resultSetTeleportTarget () {
+      const base = `#${this.viewValuePanelVisible
+        ? 'run-result-left-pane'
+        : 'run-result-result-set'
+      }`
+      const tabIdPostfix = `-${this.tab.id}`
+      return base + tabIdPostfix
+    }
   },
   mounted () {
     this.resizeObserver = new ResizeObserver(this.handleResize)
@@ -167,6 +216,10 @@ export default {
     cancelCopy () {
       this.dataToCopy = null
       this.$modal.hide('prepareCSVCopy')
+    },
+
+    toggleViewValuePanel () {
+      this.viewValuePanelVisible = !this.viewValuePanelVisible
     }
   }
 }
@@ -180,10 +233,15 @@ export default {
 }
 
 .run-result-panel-content {
-  position: relative;
   flex-grow: 1;
   height: 100%;
   width: 0;
+}
+
+.result-set-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
   box-sizing: border-box;
 }
 

src/views/Main/Workspace/Tabs/Tab/index.vue

@@ -29,6 +29,7 @@
 
     <teleport :to="`#${tab.layout.table}-${tab.id}`">
       <run-result
+        :tab="tab"
         :result="tab.result"
         :is-getting-results="tab.isGettingResults"
         :error="tab.error"