feat(previous-releases): Add pagination to the previous releases modal.

Ecogenomics · Mar 26, 2023 · 785c6fa · 785c6fa
1 parent 8347d6e
commit 785c6fa
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 6 deletions.
diff --git a/assets/api/taxon.ts b/assets/api/taxon.ts
@@ -41,6 +41,17 @@ export class TaxonApi {
       })
   }
 
+  getPreviousReleasesPaginated(taxon: string, page: number | null, itemsPerPage: number | null) {
+    return axios.get<TaxonPreviousReleasesPaginated>(`${apiBase}/taxon/${encodeURIComponent(taxon)}/previous-releases/paginated`,
+      {
+        timeout: apiTimeout,
+        params: {cacheKey: apiCacheKey,
+          page: page,
+          itemsPerPage: itemsPerPage
+        }
+      })
+  }
+
   getTaxonGenomes(taxon: string, sp_reps_only: boolean) {
     return axios.get<string[]>(`${apiBase}/taxon/${encodeURIComponent(taxon)}/genomes`,
       {
@@ -61,6 +72,12 @@ export interface TaxonPreviousReleases {
   lastSeen: string
 }
 
+export interface TaxonPreviousReleasesPaginated {
+  totalRows: number,
+  rows: TaxonPreviousReleases[]
+}
+
+
 export interface TaxonDescendants {
   taxon: string,
   total: number,

diff --git a/components/search/ResultsFromPreviousReleases.vue b/components/search/ResultsFromPreviousReleases.vue
@@ -6,7 +6,7 @@
     >
       <template v-slot:activator="{ on, attrs }">
         <v-btn
-          :disabled="loading || !hasRows"
+          :disabled="loading || totalRows === 0"
           class="white--text overflow-hidden"
           color="#7a8979"
           depressed
@@ -18,14 +18,14 @@
             {{ mdiHistorySvg }}
           </v-icon>
           <span class="text-wrap">
-            Results from previous releases ({{ loading ? 'Loading...' : rows.length.toLocaleString() }})
+            Results from previous releases ({{ loading ? 'Loading...' : totalRows.toLocaleString() }})
           </span>
         </v-btn>
       </template>
 
       <v-card>
         <v-card-title class="text-h5 grey lighten-2">
-          Results from previous releases
+          Results from previous releases {{ tableLoading }}
         </v-card-title>
 
         <v-card-text>
@@ -35,11 +35,16 @@
           </p>
 
           <v-data-table
+            :footer-props="{'items-per-page-options': itemsPerPage}"
             :headers="headers"
             :items="rows"
             :items-per-page="-1"
+            :loading="tableLoading"
+            :options.sync="options"
+            :server-items-length="totalRows"
             class="gtdb-table mt-5"
             dense
+            loading-text="Loading..."
           >
 
             <!-- Rows -->
@@ -62,6 +67,8 @@
 import Vue from 'vue';
 import {TaxonPreviousReleases} from "~/assets/api/taxon";
 import {mdiHistory} from "@mdi/js";
+import {DataOptions} from "vuetify";
+import {JsonEqual} from "~/assets/ts/common";
 
 export default Vue.extend({
   props: {
@@ -73,7 +80,23 @@ export default Vue.extend({
   watch: {
     taxon(val) {
       val && val !== this.searchTaxon && this.loadPreviousReleases(val);
-    }
+    },
+
+
+    // Watch for any changes that the table makes to the options - update the query parameters
+    options: {
+      handler(after, before) {
+        if (!JsonEqual(after, before)) {
+          if (this.hasDoneInitTableLoad) {
+            this.loadPreviousReleasesOnTableChange();
+          } else {
+            this.hasDoneInitTableLoad = true;
+          }
+        }
+      },
+      deep: true,
+    },
+
   },
   data: () => ({
     searchTaxon: '',
@@ -88,6 +111,13 @@ export default Vue.extend({
     dialog: false,
     mdiHistorySvg: mdiHistory,
     hasRows: false,
+
+    tableLoading: true,
+    itemsPerPage: [10, 50, 100, 250, 500, 1000],
+    totalRows: 0,
+    page: 0,
+    options: ({} as DataOptions),
+    hasDoneInitTableLoad: false,
   }),
   mounted() {
     this.loadPreviousReleases(this.taxon);
@@ -97,15 +127,33 @@ export default Vue.extend({
       this.searchTaxon = searchTaxon;
 
       this.loading = true;
-      this.$api.taxon.getPreviousReleases(searchTaxon).then(response => {
-        this.rows = response.data
+      this.tableLoading = true;
+      this.$api.taxon.getPreviousReleasesPaginated(searchTaxon, this.options.page, this.options.itemsPerPage).then(response => {
+        this.rows = response.data.rows
+        this.totalRows = response.data.totalRows
       })
         .catch((err) => {
           this.$accessor.api.defaultCatch(err);
         })
         .finally(() => {
           this.hasRows = this.rows.length > 0;
           this.loading = false;
+          this.tableLoading = false;
+        });
+    },
+    loadPreviousReleasesOnTableChange() {
+      this.tableLoading = true;
+      this.rows = [];
+      this.$api.taxon.getPreviousReleasesPaginated(this.searchTaxon, this.options.page, this.options.itemsPerPage).then(response => {
+        this.rows = response.data.rows
+        this.totalRows = response.data.totalRows
+      })
+        .catch((err) => {
+          this.$accessor.api.defaultCatch(err);
+        })
+        .finally(() => {
+          this.hasRows = this.rows.length > 0;
+          this.tableLoading = false;
         });
     }
   }