Merge pull request #223 from CogStack/vue3-data-table-remove-pagination

CU-86979v0bx : removed footers / pagination of v-data-tables.

Author: tomolopolis

webapp/frontend/src/components/common/ProjectList.vue

@@ -15,7 +15,9 @@
                     :items="projectItems"
                     :hover="true"
                     v-if="!loadingProjects"
-                    @click:row="select">
+                    @click:row="select"
+                    hide-default-footer
+                    :items-per-page="-1">
         <template #header.metrics>
           Metrics
           <v-tooltip activator="parent">

webapp/frontend/src/views/Home.vue

@@ -14,7 +14,9 @@
                     :hover="true"
                     v-if="!loadingProjects"
                     color="primary"
-                    @click:row="selectProjectGroup">
+                    @click:row="selectProjectGroup"
+                    hide-default-footer
+                    :items-per-page="-1">
         <template v-slot:item.last_modified="{ item }">
           {{new Date(item.last_modified).toLocaleString()}}
         </template>

webapp/frontend/src/views/Metrics.vue

@@ -43,13 +43,15 @@
         <div class="tab-pane">
           <KeepAlive>
             <div v-if="tab === 'user_stats'">
-              <v-data-table :items="userStats.items" :headers="userStats.headers" :hover="true"></v-data-table>
+              <v-data-table :items="userStats.items" :headers="userStats.headers" :hover="true" hide-default-footer
+                            :items-per-page="-1"></v-data-table>
             </div>
           </KeepAlive>
 
           <KeepAlive>
             <div v-if="tab === 'annotations'">
-                <v-data-table :items="annoSummary.items" :headers="annoSummary.headers" :hover="true">
+                <v-data-table :items="annoSummary.items" :headers="annoSummary.headers" :hover="true" hide-default-footer
+                              :items-per-page="-1">
                     <template #item.status="{ item }">
                         <div id="status" :class="textColorClass(item.status)">
                             {{ item.status }}
@@ -67,7 +69,8 @@
 
           <KeepAlive>
             <div v-if="tab === 'concept_summary'">
-              <v-data-table :items="conceptSummary.items" :headers="conceptSummary.headers">
+              <v-data-table :items="conceptSummary.items" :headers="conceptSummary.headers" hide-default-footer
+                            :items-per-page="-1">
                 <template #header.concept>
                   <div>Concept</div>
                   <v-tooltip></v-tooltip>
@@ -182,7 +185,9 @@
               <v-data-table :items="metaAnnsSummary.items"
                             :headers="metaAnnsSummary.headers"
                             :hover="true"
-                            class="meta-anno-summary">
+                            class="meta-anno-summary"
+                            hide-default-footer
+                            :items-per-page="-1">
               </v-data-table>
             </div>
           </KeepAlive>

webapp/frontend/src/views/MetricsHome.vue

@@ -3,21 +3,23 @@
     <v-data-table :items="reports.items"
                   :headers="reports.headers"
                   :hover="true"
-                  @click:row="loadMetrics">
+                  @click:row="loadMetrics"
+                  hide-default-footer
+                  :items-per-page="-1">
       <template #item.projects="{ item }" >
         <div @click.stop>
           <v-runtime-template :template="projectsFormatter(item.projects)"></v-runtime-template>
         </div>
       </template>
 
       <template #item.status="{ item }">
-        <span v-if="item.status == 'pending'">Pending
+        <span v-if="item.status === 'pending'">Pending
           <font-awesome-icon icon="fa-regular fa-clock" class="status-icon"></font-awesome-icon>
         </span>
-        <span v-if="item.status == 'running'">Running
+        <span v-if="item.status === 'running'">Running
           <font-awesome-icon icon="spinner" spin class="status-icon"></font-awesome-icon>
         </span>
-        <span v-if="item.status == 'complete'">Complete
+        <span v-if="item.status === 'complete'">Complete
           <font-awesome-icon icon="check" class="status-icon success"></font-awesome-icon>
         </span>
       </template>
@@ -41,10 +43,10 @@
         <h3>Confirm Delete Metrics Report</h3>
       </template>
       <template #body>
-        <div v-if="confDeleteReportModal.status == 'running'">
+        <div v-if="confDeleteReportModal.status === 'running'">
           Metrics report still running, this will cancel the running metrics report running job
         </div>
-        <div v-if="confDeleteReportModal.status == 'complete'">
+        <div v-if="confDeleteReportModal.status === 'complete'">
           Confirm complete metrics report deletion. To regenerate the report reselect the projects on the
           home screen and select metrics.
         </div>
@@ -126,7 +128,7 @@ export default {
       this.$http.delete(`/api/metrics-job/${this.confDeleteReportModal.report_id}/`).then(_ => {
         this.confDeleteReportModal = null
         this.reports.items.splice(item)
-      }).finally(err => {
+      }).finally(() => {
         this.confDeleteReportModal = null
       })
     },