From 13b0816837461119eaab79fdb7e92223e0950630 Mon Sep 17 00:00:00 2001
From: Fabio <fabio286@gmail.com>
Date: Mon, 10 Aug 2020 16:06:11 +0200
Subject: [PATCH] fix: table header not fixed on top when fast scrolling

---
 src/renderer/components/BaseVirtualScroll.vue |  56 +++++-----
 src/renderer/components/Workspace.vue         |  21 +++-
 .../components/WorkspaceQueryTable.vue        | 103 +++++++++---------
 .../components/WorkspaceQueryTableRow.vue     |   4 +
 4 files changed, 105 insertions(+), 79 deletions(-)

diff --git a/src/renderer/components/BaseVirtualScroll.vue b/src/renderer/components/BaseVirtualScroll.vue
index 44c35469..9f875969 100644
--- a/src/renderer/components/BaseVirtualScroll.vue
+++ b/src/renderer/components/BaseVirtualScroll.vue
@@ -1,5 +1,5 @@
 <template>
-   <div :style="{'height': visibleHeight+'px'}" class="vscroll-holder">
+   <div class="vscroll-holder">
       <div
          class="vscroll-spacer"
          :style="{
@@ -26,48 +26,54 @@ export default {
    props: {
       items: Array,
       itemHeight: Number,
-      visibleHeight: Number
+      visibleHeight: Number,
+      scrollElement: {
+         type: HTMLDivElement,
+         default: null
+      }
    },
    data () {
       return {
          topHeight: 0,
          bottomHeight: 0,
          visibleItems: [],
-         renderTimeout: null
+         renderTimeout: null,
+         localScrollElement: null
       };
    },
    mounted () {
-      this._checkScrollPosition = this.updateWindow.bind(this);
+      this._checkScrollPosition = this.checkScrollPosition.bind(this);
+      this.localScrollElement = this.scrollElement ? this.scrollElement : this.$el;
       this.updateWindow();
-      this.$el.addEventListener('scroll', this._checkScrollPosition);
+      this.localScrollElement.addEventListener('scroll', this._checkScrollPosition);
    },
    beforeDestroy () {
-      this.$el.removeEventListener('scroll', this._checkScrollPosition);
+      this.localScrollElement.removeEventListener('scroll', this._checkScrollPosition);
    },
    methods: {
-      checkScrollPosition () {
-
-      },
-      updateWindow (e) { // TODO: no timeout on first render
-         const visibleItemsCount = Math.ceil(this.$el.clientHeight / this.itemHeight);
-         const totalScrollHeight = this.items.length * this.itemHeight;
-         const offset = 50;
-
-         const scrollTop = this.$el.scrollTop;
-
+      checkScrollPosition (e) {
          clearTimeout(this.renderTimeout);
 
          this.renderTimeout = setTimeout(() => {
-            const firstVisibleIndex = Math.floor(scrollTop / this.itemHeight);
-            const lastVisibleIndex = firstVisibleIndex + visibleItemsCount;
-            const firstCutIndex = Math.max(firstVisibleIndex - offset, 0);
-            const lastCutIndex = lastVisibleIndex + offset;
-
-            this.visibleItems = this.items.slice(firstCutIndex, lastCutIndex);
-
-            this.topHeight = firstCutIndex * this.itemHeight;
-            this.bottomHeight = totalScrollHeight - this.visibleItems.length * this.itemHeight - this.topHeight;
+            this.updateWindow(e);
          }, 200);
+      },
+      updateWindow (e) {
+         const visibleItemsCount = Math.ceil(this.visibleHeight / this.itemHeight);
+         const totalScrollHeight = this.items.length * this.itemHeight;
+         const offset = 50;
+
+         const scrollTop = this.localScrollElement.scrollTop;
+
+         const firstVisibleIndex = Math.floor(scrollTop / this.itemHeight);
+         const lastVisibleIndex = firstVisibleIndex + visibleItemsCount;
+         const firstCutIndex = Math.max(firstVisibleIndex - offset, 0);
+         const lastCutIndex = lastVisibleIndex + offset;
+
+         this.visibleItems = this.items.slice(firstCutIndex, lastCutIndex);
+
+         this.topHeight = firstCutIndex * this.itemHeight;
+         this.bottomHeight = totalScrollHeight - this.visibleItems.length * this.itemHeight - this.topHeight;
       }
    }
 };
diff --git a/src/renderer/components/Workspace.vue b/src/renderer/components/Workspace.vue
index c30aa433..bb22e481 100644
--- a/src/renderer/components/Workspace.vue
+++ b/src/renderer/components/Workspace.vue
@@ -3,6 +3,15 @@
       <WorkspaceExploreBar :connection="connection" :is-selected="isSelected" />
       <div v-if="workspace.connected" class="workspace-tabs column columns col-gapless">
          <ul class="tab tab-block column col-12">
+            <li
+               v-if="workspace.breadcrumbs.table"
+               class="tab-item"
+            >
+               <a class="tab-link">
+                  <i class="material-icons md-18 mr-1">tune</i>
+                  <span :title="workspace.breadcrumbs.table">{{ $t('word.properties').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
+               </a>
+            </li>
             <li
                v-if="workspace.breadcrumbs.table"
                class="tab-item"
@@ -11,7 +20,7 @@
             >
                <a class="tab-link">
                   <i class="material-icons md-18 mr-1">grid_on</i>
-                  <span :title="workspace.breadcrumbs.table">{{ workspace.breadcrumbs.table }}</span>
+                  <span :title="workspace.breadcrumbs.table">{{ $t('word.data').toUpperCase() }}: {{ workspace.breadcrumbs.table }}</span>
                </a>
             </li>
             <li
@@ -109,10 +118,6 @@ export default {
         width: fit-content;
         flex: initial;
 
-        &.active a {
-          opacity: 1;
-        }
-
         > a {
           padding: 0.2rem 0.8rem;
           color: $body-font-color;
@@ -132,6 +137,10 @@ export default {
             text-overflow: ellipsis;
           }
         }
+
+        &.active a {
+          opacity: 1;
+        }
       }
     }
   }
@@ -155,6 +164,7 @@ export default {
         padding: 0;
         font-weight: 700;
         font-size: 0.7rem;
+        z-index: 1;
 
         > div {
           padding: 0.1rem 0.4rem;
@@ -172,6 +182,7 @@ export default {
         white-space: nowrap;
         overflow: hidden;
         font-size: 0.7rem;
+        position: relative;
 
         &:focus {
           box-shadow: inset 0 0 0 1px $body-font-color;
diff --git a/src/renderer/components/WorkspaceQueryTable.vue b/src/renderer/components/WorkspaceQueryTable.vue
index 07b1b2f3..2204d21a 100644
--- a/src/renderer/components/WorkspaceQueryTable.vue
+++ b/src/renderer/components/WorkspaceQueryTable.vue
@@ -1,5 +1,9 @@
 <template>
-   <div>
+   <div
+      ref="tableWrapper"
+      class="vscroll"
+      :style="{'height': resultsSize+'px'}"
+   >
       <TableContext
          v-if="isContext"
          :context-event="contextEvent"
@@ -7,55 +11,53 @@
          @deleteSelected="deleteSelected"
          @closeContext="isContext = false"
       />
-      <BaseVirtualScroll
-         v-if="results.rows"
-         ref="resultTable"
-         :items="sortedResults"
-         :item-height="22"
-         class="vscroll"
-         :style="{'height': resultsSize+'px'}"
-         :visible-height="resultsSize"
-      >
-         <template slot-scope="{ items }">
-            <div class="table table-hover">
-               <div class="thead">
-                  <div class="tr">
-                     <div
-                        v-for="field in fields"
-                        :key="field.name"
-                        class="th c-hand"
-                     >
-                        <div ref="columnResize" class="column-resizable">
-                           <div class="table-column-title" @click="sort(field.name)">
-                              <i
-                                 v-if="field.key"
-                                 class="material-icons column-key c-help"
-                                 :class="`key-${field.key}`"
-                                 :title="keyName(field.key)"
-                              >vpn_key</i>
-                              <span>{{ field.name }}</span>
-                              <i v-if="currentSort === field.name" class="material-icons sort-icon">{{ currentSortDir === 'asc' ? 'arrow_upward':'arrow_downward' }}</i>
-                           </div>
-                        </div>
+      <div ref="table" class="table table-hover">
+         <div class="thead">
+            <div class="tr">
+               <div
+                  v-for="field in fields"
+                  :key="field.name"
+                  class="th c-hand"
+               >
+                  <div ref="columnResize" class="column-resizable">
+                     <div class="table-column-title" @click="sort(field.name)">
+                        <i
+                           v-if="field.key"
+                           class="material-icons column-key c-help"
+                           :class="`key-${field.key}`"
+                           :title="keyName(field.key)"
+                        >vpn_key</i>
+                        <span>{{ field.name }}</span>
+                        <i v-if="currentSort === field.name" class="material-icons sort-icon">{{ currentSortDir === 'asc' ? 'arrow_upward':'arrow_downward' }}</i>
                      </div>
                   </div>
                </div>
-               <div class="tbody">
-                  <WorkspaceQueryTableRow
-                     v-for="row in items"
-                     :key="row._id"
-                     :row="row"
-                     :fields="fields"
-                     class="tr"
-                     :class="{'selected': selectedRows.includes(row._id)}"
-                     @selectRow="selectRow($event, row._id)"
-                     @updateField="updateField($event, row[primaryField.name])"
-                     @contextmenu="contextMenu"
-                  />
-               </div>
             </div>
-         </template>
-      </BaseVirtualScroll>
+         </div>
+         <BaseVirtualScroll
+            v-if="results.rows"
+            ref="resultTable"
+            :items="sortedResults"
+            :item-height="22"
+            class="tbody"
+            :visible-height="resultsSize"
+            :scroll-element="scrollElement"
+         >
+            <template slot-scope="{ items }">
+               <WorkspaceQueryTableRow
+                  v-for="row in items"
+                  :key="row._id"
+                  :row="row"
+                  :fields="fields"
+                  class="tr"
+                  :class="{'selected': selectedRows.includes(row._id)}"
+                  @selectRow="selectRow($event, row._id)"
+                  @updateField="updateField($event, row[primaryField.name])"
+                  @contextmenu="contextMenu"
+               />
+            </template>
+         </basevirtualscroll>
+      </div>
    </div>
 </template>
 
@@ -107,6 +109,9 @@ export default {
          }
          else
             return this.localResults;
+      },
+      scrollElement () {
+         return this.$refs.tableWrapper;
       }
    },
    watch: {
@@ -118,7 +123,7 @@ export default {
       }
    },
    updated () {
-      if (this.$refs.resultTable)
+      if (this.$refs.table)
          this.refreshScroller();
    },
    mounted () {
@@ -161,10 +166,10 @@ export default {
       },
       resizeResults () {
          if (this.$refs.resultTable) {
-            const el = this.$refs.resultTable.$el;
-            const footer = document.getElementById('footer');
+            const el = this.$refs.table;
 
             if (el) {
+               const footer = document.getElementById('footer');
                const size = window.innerHeight - el.getBoundingClientRect().top - footer.offsetHeight;
                this.resultsSize = size;
             }
diff --git a/src/renderer/components/WorkspaceQueryTableRow.vue b/src/renderer/components/WorkspaceQueryTableRow.vue
index db568081..19a415d1 100644
--- a/src/renderer/components/WorkspaceQueryTableRow.vue
+++ b/src/renderer/components/WorkspaceQueryTableRow.vue
@@ -2,6 +2,7 @@
    <div class="tr" @click="selectRow($event, row._id)">
       <div
          v-for="(col, cKey) in row"
+         v-show="cKey !== '_id'"
          :key="cKey"
          class="td p-0"
          tabindex="0"
@@ -376,6 +377,9 @@ export default {
   border: none;
   line-height: 1;
   width: 100%;
+  position: absolute;
+  left: 0;
+  right: 0;
 }
 
 .cell-content {