Fix chart & pager

openaddresses · Mar 25, 2024 · bcae460 · bcae460
1 parent 54c2e78
commit bcae460
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 10 deletions.
diff --git a/api/web/src/components/History.vue b/api/web/src/components/History.vue
@@ -21,7 +21,7 @@
                             <h3 class='card-title' v-text='data.source + " - " + data.layer + " - " + data.name'/>
 
                             <div class='ms-auto btn-list'>
-                                <RefreshIcon @click='refresh' class='cursor-pointer'/>
+                                <IconRefresh @click='refresh' class='cursor-pointer' size='32'/>
                             </div>
                         </div>
 
@@ -63,7 +63,7 @@
                                     </tr>
                                 </thead>
                                 <tbody>
-                                    <tr :key='job.id' v-for='job in history.jobs'>
+                                    <tr :key='job.id' v-for='job in computedPage'>
                                         <td>
                                             <Status :status='job.status'/>
                                         </td>
@@ -74,13 +74,14 @@
                                         <td>
                                             <div class='d-flex'>
                                                 <div class='ms-auto'>
-                                                    <DownloadIcon v-if='job.output.output' v-on:click.stop.prevent='datapls(job.id)' class='cursor-pointer'/>
+                                                    <IconDownload v-if='job.output.output' v-on:click.stop.prevent='datapls(job.id)' class='cursor-pointer' size='32'/>
                                                 </div>
                                             </div>
                                         </td>
                                     </tr>
                                 </tbody>
                             </table>
+                            <TableFooter :limit='paging.limit' :total='history.jobs.length' @page='paging.page = $event'/>
                         </template>
                     </div>
                 </div>
@@ -95,11 +96,12 @@ import {
     TablerBreadCrumb,
     TablerLoading,
 } from '@tak-ps/vue-tabler';
+import TableFooter from './util/TableFooter.vue';
 import Status from './util/Status.vue';
 import {
-    RefreshIcon,
-    DownloadIcon
-} from 'vue-tabler-icons';
+    IconRefresh,
+    IconDownload
+} from '@tabler/icons-vue';
 import { Line as LineChart } from 'vue-chartjs';
 import { Chart as ChartJS, Title, Tooltip, Legend, BarElement, LinearScale, TimeScale, PointElement, LineElement, CategoryScale } from 'chart.js'
 import moment from 'moment-timezone';
@@ -117,6 +119,10 @@ export default {
             loading: {
                 history: true
             },
+            paging: {
+                limit: 10,
+                page: 0
+            },
             colours: [ /* Thanks for the colours! https://github.com/johannesbjork/LaCroixColoR */ ],
             chart: {
                 datasets: [{
@@ -136,6 +142,11 @@ export default {
         ]
         this.refresh();
     },
+    computed: {
+        computedPage: function() {
+            return this.history.jobs.slice(this.paging.limit * this.paging.page, this.paging.limit * (this.paging.page + 1))
+        }
+    },
     methods: {
         fmt: function(date) {
             return moment(date).tz(this.tz).format('YYYY-MM-DD');
@@ -222,11 +233,12 @@ export default {
     },
     components: {
         Status,
-        RefreshIcon,
+        IconRefresh,
+        IconDownload,
         TablerLoading,
+        TableFooter,
         LineChart,
         TablerBreadCrumb,
-        DownloadIcon
     },
 }
 </script>
diff --git a/api/web/src/components/util/TableFooter.vue b/api/web/src/components/util/TableFooter.vue
@@ -1,11 +1,11 @@
 <template>
-<div class="card-footer">
+<div class="card-footer w-100">
     <div class='row'>
         <div class='col-sm-12 col-md-6'>
             <p v-if='total === 0' class='m-0 text-muted'>Showing 0 of 0 entries</p>
             <p v-else class="m-0 text-muted">Showing <span v-text='limit * page + 1'/> to <span v-text='total < limit ? total : (page * limit + limit > total ? total : page * limit + limit)'/> of <span v-text='total'/> entries</p>
         </div>
-        <div v-if='total > limit' class='col-sm-12 col-md-6 d-flex'>
+        <div v-if='total > limit' class='col-sm-12 col-6 d-flex'>
             <TablerPager @page='page = $event' :total='total' :limit='limit'/>
         </div>
     </div>