#115 select cell between modes; pass record number

src/components/SqlTable/index.vue

@@ -37,6 +37,7 @@
               v-for="(col, colIndex) in columns"
               :data-col="colIndex"
               :data-row="rowIndex - 1"
+              :data-record="pageSize * (currentPage - 1) + rowIndex - 1"
               :key="colIndex"
               :aria-selected="false"
               @click="onCellClick"
@@ -74,13 +75,18 @@ export default {
       type: Number,
       default: 20
     },
-    preview: Boolean
+    page: {
+      type: Number,
+      default: 1
+    },
+    preview: Boolean,
+    selectedCellCoordinates: Object
   },
   data () {
     return {
       header: null,
       tableWidth: null,
-      currentPage: 1,
+      currentPage: this.page,
       resizeObserver: null,
       selectedCellElement: null
     }
@@ -112,6 +118,20 @@ export default {
       }
     }
   },
+  mounted () {
+    this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
+    this.resizeObserver.observe(this.$refs.table)
+    this.calculateHeadersWidth()
+
+    if (this.selectedCellCoordinates) {
+      const { row, col } = this.selectedCellCoordinates
+      const cell = this.$refs.table
+        .querySelector(`td[data-col="${col}"][data-row="${row}"]`)
+      if (cell) {
+        this.selectCell(cell)
+      }
+    }
+  },
   methods: {
     calculateHeadersWidth () {
       this.tableWidth = this.$refs['table-container'].offsetWidth
@@ -132,7 +152,10 @@ export default {
         40: 'down'
       }
 
-      if (!Object.keys(keyCodeMap).includes(e.keyCode.toString())) {
+      if (
+        !this.selectedCellElement ||
+        !Object.keys(keyCodeMap).includes(e.keyCode.toString())
+      ) {
         return
       }
       e.preventDefault()
@@ -192,11 +215,6 @@ export default {
       }
     }
   },
-  mounted () {
-    this.resizeObserver = new ResizeObserver(this.calculateHeadersWidth)
-    this.resizeObserver.observe(this.$refs.table)
-    this.calculateHeadersWidth()
-  },
   beforeDestroy () {
     this.resizeObserver.unobserve(this.$refs.table)
   },

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

@@ -54,15 +54,11 @@ export default {
   props: {
     dataSet: Object,
     time: String,
-    pageSize: {
+    rowIndex: { type: Number, default: 0 },
-      type: Number,
+    selectedColumnIndex: Number
-      default: 20
-    },
-    rowIndex: { type: Number, default: 0 }
   },
   data () {
     return {
-      currentPage: 1,
       selectedCellElement: null,
       currentRowIndex: this.rowIndex
     }
@@ -73,21 +69,13 @@ export default {
     },
     rowCount () {
       return this.dataSet.values[this.columns[0]].length
-    },
-    pageCount () {
-      return Math.ceil(this.rowCount / this.pageSize)
-    },
-    currentPageData () {
-      const start = (this.currentPage - 1) * this.pageSize
-      let end = start + this.pageSize
-      if (end > this.rowCount - 1) {
-        end = this.rowCount - 1
-      }
-      return {
-        start,
-        end,
-        count: end - start + 1
     }
+  },
+  mounted () {
+    const cell = this.$refs.table
+      .querySelector(`td[data-col="1"][data-row="${this.selectedColumnIndex}"]`)
+    if (cell) {
+      this.selectCell(cell)
     }
   },
   methods: {
@@ -97,7 +85,10 @@ export default {
         40: 'down'
       }
 
-      if (!Object.keys(keyCodeMap).includes(e.keyCode.toString())) {
+      if (
+        !this.selectedCellElement ||
+        !Object.keys(keyCodeMap).includes(e.keyCode.toString())
+      ) {
         return
       }
       e.preventDefault()
@@ -133,11 +124,6 @@ export default {
         this.selectCell(newCell)
       }
     }
-  },
-  watch: {
-    dataSet () {
-      this.currentPage = 1
-    }
   }
 }
 </script>
@@ -169,4 +155,8 @@ table.sqliteviz-table {
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.table-footer {
+  align-items: center;
+}
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="run-result-panel">
+  <div class="run-result-panel" ref="runResultPanel">
    <component
       :is="viewValuePanelVisible ? 'splitpanes':'div'"
       :before="{ size: 50, max: 100 }"
@@ -68,7 +68,7 @@
     />
 
     <teleport :to="resultSetTeleportTarget">
-      <div ref="runResultPanel">
+      <div>
             <div
               v-show="result === null && !isGettingResults && !error"
               class="table-preview result-before"
@@ -91,16 +91,19 @@
               :data-set="result"
               :time="time"
               :pageSize="pageSize"
+              :page="defaultPage"
+              :selected-cell-coordinates="defaultSelectedCell"
               class="straight"
               @updateSelectedCell="onUpdateSelectedCell"
             />
 
             <record
+              ref="recordView"
               v-if="result && viewRecord"
               :data-set="result"
               :time="time"
-              :pageSize="pageSize"
+              :selected-column-index="selectedCell ? +selectedCell.dataset.col : 0"
-              class="straight"
+              :rowIndex="selectedCell ? +selectedCell.dataset.record : 0"
               @updateSelectedCell="onUpdateSelectedCell"
             />
           </div>
@@ -145,7 +148,9 @@ export default {
       viewValuePanelVisible: false,
       selectedCell: null,
       selectedCellValue: '',
-      viewRecord: false
+      viewRecord: false,
+      defaultPage: 1,
+      defaultSelectedCell: null
     }
   },
   components: {
@@ -251,6 +256,16 @@ 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
+        }
+        this.defaultPage = Math.ceil(
+          (this.$refs.recordView.currentRowIndex + 1) / this.pageSize
+        )
+      }
+
       this.viewRecord = !this.viewRecord
     },
 
@@ -275,7 +290,8 @@ export default {
   width: 0;
 }
 
-.result-set-container {
+.result-set-container,
+.result-set-container > div {
   position: relative;
   height: 100%;
   width: 100%;