fix(browsers): Disable download buttons when there are no rows.

Ecogenomics · Mar 26, 2023 · cbdaa7b · cbdaa7b
1 parent 272ef7e
commit cbdaa7b
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 2 deletions.
diff --git a/components/util/DownloadSvButton.vue b/components/util/DownloadSvButton.vue
@@ -7,6 +7,7 @@
         small
         v-bind="attrs"
         @click="buttonClicked"
+        :disabled="disabled"
         v-on="on"
       >
         <template v-if="type === 'csv'">
@@ -43,6 +44,11 @@ export default Vue.extend({
       type: String,
       required: true,
     },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    }
   },
   data: () => ({
     mdiFileDelimitedSvg: mdiFileDelimited,

diff --git a/pages/browsers.vue b/pages/browsers.vue
@@ -20,12 +20,20 @@
 
           <!-- CSV Download -->
           <div class="d-flex flex-column my-auto">
-            <DownloadSvButton type="csv" @click="downloadFile('csv')"/>
+            <DownloadSvButton
+              :disabled="!hasRows"
+              type="csv"
+              @click="downloadFile('csv')"
+            />
           </div>
 
           <!-- TSV Download -->
           <div class="d-flex flex-column ml-2 my-auto">
-            <DownloadSvButton type="tsv" @click="downloadFile('tsv')"/>
+            <DownloadSvButton
+              :disabled="!hasRows"
+              type="tsv"
+              @click="downloadFile('tsv')"
+            />
           </div>
 
           <!-- Show only GTDB proposed names -->
@@ -209,6 +217,7 @@
           dense
           loading-text="Loading..."
           multi-sort
+          @current-items="onDataTableChange"
         >
 
           <template v-slot:item.d="{ item }">
@@ -363,6 +372,8 @@ export default Vue.extend({
     filterFamily: '',
     filterGenus: '',
     filterSpecies: '',
+
+    hasRows: false,
   }),
 
   watch: {
@@ -487,6 +498,9 @@ export default Vue.extend({
   },
 
   methods: {
+    onDataTableChange(e: TaxonomyCount[]) {
+      this.hasRows = e.length > 0;
+    },
 
     // Opens / closes the filter columns menu
     toggleColumnSearch() {