Przeglądaj źródła

[frontend] Fetch more results when scroll to end in the new ResultGrid component

Johan Ahlen 4 lat temu
rodzic
commit
6c32136e99

+ 12 - 1
desktop/core/src/desktop/js/apps/editor/components/result/ExecutionResults.vue

@@ -17,7 +17,7 @@
 -->
 
 <template>
-  <ResultGrid :rows="rows" :meta="meta" />
+  <ResultGrid :rows="rows" :meta="meta" :has-more="hasMore" @fetch-more="fetchMore" />
 </template>
 
 <script lang="ts">
@@ -62,6 +62,8 @@
     rows: ResultRow[] = [];
     meta: ResultMeta[] = [];
 
+    fetchResultThrottle = -1;
+
     mounted(): void {
       this.subTracker.subscribe(EXECUTABLE_UPDATED_EVENT, (executable: Executable) => {
         if (this.executable === executable) {
@@ -76,6 +78,15 @@
       });
     }
 
+    fetchMore(): void {
+      window.clearTimeout(this.fetchResultThrottle);
+      this.fetchResultThrottle = window.setTimeout(() => {
+        if (this.hasMore && this.executable && this.executable.result) {
+          this.executable.result.fetchRows({ rows: 100 });
+        }
+      }, 100);
+    }
+
     @Watch('executable')
     handleResultChange(): void {
       if (this.executable && this.executable.result) {

+ 33 - 3
desktop/core/src/desktop/js/apps/editor/components/result/ResultGrid.vue

@@ -17,8 +17,13 @@
 -->
 
 <template>
-  <div class="result-grid">
-    <HueTable :columns="tableColumns" :rows="tableRows" :sticky-header="true" />
+  <div class="result-grid" :class="{ 'grayed-out': grayedOut }">
+    <HueTable
+      :columns="tableColumns"
+      :rows="tableRows"
+      :sticky-header="true"
+      @scroll-to-end="onScrollToEnd"
+    />
   </div>
 </template>
 
@@ -29,7 +34,7 @@
   import HueTable from 'components/HueTable.vue';
   import Vue from 'vue';
   import Component from 'vue-class-component';
-  import { Prop } from 'vue-property-decorator';
+  import { Prop, Watch } from 'vue-property-decorator';
 
   @Component({
     components: { HueTable }
@@ -39,6 +44,10 @@
     rows!: ResultRow[];
     @Prop()
     meta!: ResultMeta[];
+    @Prop()
+    hasMore!: boolean;
+
+    grayedOut = false;
 
     get tableColumns(): Column<ResultRow>[] {
       return this.meta.map(({ name }, index) => ({
@@ -51,6 +60,19 @@
     get tableRows(): Row[] {
       return this.rows;
     }
+
+    @Watch('rows')
+    @Watch('hasMore')
+    resultChanged(): void {
+      this.grayedOut = false;
+    }
+
+    onScrollToEnd(): void {
+      if (this.hasMore) {
+        this.grayedOut = true;
+        this.$emit('fetch-more');
+      }
+    }
   }
 </script>
 
@@ -59,5 +81,13 @@
     position: relative;
     height: 100%;
     width: 100%;
+
+    &.grayed-out {
+      opacity: 0.5;
+
+      /deep/ .hue-table-container {
+        overflow: hidden !important;
+      }
+    }
   }
 </style>