#115 fix new lines - use pre

src/components/SqlTable/index.vue

@@ -36,8 +36,7 @@
             <td
               v-for="(col, colIndex) in columns"
               :data-col="colIndex"
-              :data-row="rowIndex - 1"
-              :data-record="pageSize * (currentPage - 1) + rowIndex - 1"
+              :data-row="pageSize * (currentPage - 1) + rowIndex - 1"
               :data-isNull="isNull(getCellValue(col, rowIndex))"
               :data-isBlob="isBlob(getCellValue(col, rowIndex))"
               :key="colIndex"

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

@@ -21,8 +21,8 @@
           <tr v-for="(col, index) in columns" :key="index">
             <th>{{ col }}</th>
             <td
-              :data-col="1"
-              :data-row="index"
+              :data-col="index"
+              :data-row="currentRowIndex"
               :data-isNull="isNull(getCellValue(col))"
               :data-isBlob="isBlob(getCellValue(col))"
               :key="index"
@@ -75,7 +75,7 @@ export default {
   },
   mounted () {
     const cell = this.$refs.table
-      .querySelector(`td[data-col="1"][data-row="${this.selectedColumnIndex}"]`)
+      .querySelector(`td[data-col="${this.selectedColumnIndex}"][data-row="${this.currentRowIndex}"]`)
     if (cell) {
       this.selectCell(cell)
     }
@@ -153,13 +153,13 @@ export default {
       this.$emit('updateSelectedCell', this.selectedCellElement)
     },
     moveFocusInTable (initialCell, direction) {
-      const currentRowIndex = +initialCell.dataset.row
-      const newRowIndex = direction === 'up'
-        ? currentRowIndex - 1
-        : currentRowIndex + 1
+      const currentColIndex = +initialCell.dataset.col
+      const newColIndex = direction === 'up'
+        ? currentColIndex - 1
+        : currentColIndex + 1
 
       const newCell = this.$refs.table
-        .querySelector(`td[data-col="1"][data-row="${newRowIndex}"]`)
+        .querySelector(`td[data-col="${newColIndex}"][data-row="${this.currentRowIndex}"]`)
       if (newCell) {
         this.selectCell(newCell)
       }

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

@@ -26,12 +26,10 @@
         :value="formattedJson"
         :options="cmOptions"
       />
-      <div
+      <pre
         v-if="currentFormat === 'text'"
         :class="['text-value', { 'meta-value': isNull || isBlob }]"
-      >
-        {{ cellValue }}
-      </div>
+      >{{ cellText }}</pre>
       <logs
         v-if="messages && messages.length > 0"
         :messages="messages"
@@ -59,9 +57,7 @@ export default {
     Logs
   },
   props: {
-    cellValue: [String, Number],
-    isNull: Boolean,
-    isBlob: Boolean
+    cellValue: [String, Number, Uint8Array]
   },
   data () {
     return {
@@ -84,17 +80,35 @@ export default {
       messages: []
     }
   },
+  computed: {
+    isBlob () {
+      return this.cellValue && ArrayBuffer.isView(this.cellValue)
+    },
+    isNull () {
+      return this.cellValue === null
+    },
+    cellText () {
+      const value = this.cellValue
+      if (this.isNull) {
+        return 'NULL'
+      }
+      if (this.isBlob) {
+        return 'BLOB'
+      }
+      return value
+    }
+  },
   watch: {
     currentFormat () {
       this.messages = []
       this.formattedJson = ''
       if (this.currentFormat === 'json') {
-        this.formatJson(this.isNull ? null : this.cellValue)
+        this.formatJson(this.cellValue)
       }
     },
     cellValue () {
       if (this.currentFormat === 'json') {
-        this.formatJson(this.isNull ? null : this.cellValue)
+        this.formatJson(this.cellValue)
       }
     }
   },

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

@@ -15,9 +15,9 @@
         <div class="value-viewer-container">
           <value-viewer
             v-show="selectedCell"
-            :cellValue="selectedCell ? selectedCell.innerText : ''"
-            :is-null="selectedCell && selectedCell.dataset.isnull === 'true'"
-            :is-blob="selectedCell && selectedCell.dataset.isblob === 'true'"
+            :cellValue="selectedCell
+              ? result.values[result.columns[selectedCell.dataset.col]][selectedCell.dataset.row]
+              : ''"
           />
           <div v-show="!selectedCell" class="table-preview">
             No cell selected to view
@@ -113,7 +113,7 @@
               :data-set="result"
               :time="time"
               :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
-              :rowIndex="selectedCell ? +selectedCell.dataset.record : 0"
+              :rowIndex="selectedCell ? +selectedCell.dataset.row : 0"
               @updateSelectedCell="onUpdateSelectedCell"
             />
           </div>
@@ -277,8 +277,8 @@ export default {
     toggleViewRecord () {
       if (this.viewRecord) {
         this.defaultSelectedCell = {
-          row: (this.$refs.recordView.currentRowIndex + this.pageSize) % this.pageSize,
-          col: this.selectedCell ? +this.selectedCell.dataset.row : 0
+          row: this.$refs.recordView.currentRowIndex,
+          col: this.selectedCell ? +this.selectedCell.dataset.col : 0
         }
         this.defaultPage = Math.ceil(
           (this.$refs.recordView.currentRowIndex + 1) / this.pageSize