Add pagination info in the query parameter

apps/central/src/components/entity/table-view.vue

@@ -34,6 +34,7 @@ import { computed, inject, reactive, useTemplateRef, watch } from 'vue';
 import EntityTable from './table.vue';
 import OdataLoadingMessage from '../odata-loading-message.vue';
 import Pagination from '../pagination.vue';
+import usePaginationQueryRef from '../../composables/pagination-query-ref';
 
 import { apiPaths } from '../../util/request';
 import { noop, reemit, reexpose } from '../../util/util';
@@ -60,23 +61,19 @@ const datasetName = inject('datasetName');
 const { dataset, odataEntities, deletedEntityCount } = useRequestData();
 
 const pageSizeOptions = [250, 500, 1000];
+const { pageNumber, pageSize } = usePaginationQueryRef(pageSizeOptions);
 const pagination = reactive({
-  page: 0,
-  size: pageSizeOptions[0],
+  page: pageNumber,
+  size: pageSize,
   count: computed(() => (odataEntities.dataExists ? odataEntities.count : 0)),
   removed: computed(() => (odataEntities.dataExists ? odataEntities.removedEntities : 0))
 });
 
-// `clear` indicates whether odataEntities should be cleared before sending the
-// request. `refresh` indicates whether the request is a background refresh
-// (whether the refresh button was pressed).
-const fetchChunk = (clear, refresh = false) => {
-  // Are we fetching the first chunk of entities or the next chunk?
-  const first = clear || refresh;
-  if (first) {
-    pagination.page = 0;
-  }
-
+/**
+ * @param clear indicates whether this.odata should be cleared before sending the request.
+ * @param page indicates which page to load
+ */
+const fetchChunk = (clear, page = 0) => {
   const $search = props.searchTerm ? props.searchTerm : undefined;
 
   emit('clear-selection');
@@ -87,7 +84,7 @@ const fetchChunk = (clear, refresh = false) => {
       datasetName,
       {
         $top: pagination.size,
-        $skip: pagination.page * pagination.size,
+        $skip: page * pagination.size,
         $count: true,
         $filter: props.deleted ? '__system/deletedAt ne null' : props.filter,
         $search,
@@ -97,6 +94,14 @@ const fetchChunk = (clear, refresh = false) => {
     clear
   })
     .then(() => {
+      if (pagination.page !== page) {
+        pagination.page = page;
+      }
+      const lastPage = Math.max(0, Math.ceil(odataEntities.count / pagination.size) - 1);
+      if (pagination.page > lastPage) {
+        fetchChunk(true, lastPage);
+        return;
+      }
       if (props.deleted) {
         deletedEntityCount.cancelRequest();
         if (!deletedEntityCount.dataExists) {
@@ -107,19 +112,21 @@ const fetchChunk = (clear, refresh = false) => {
     })
     .catch(noop);
 };
-fetchChunk(true);
+
+fetchChunk(true, pagination.page);
+
 watch([() => props.deleted, () => props.filter, () => props.searchTerm], () => {
   fetchChunk(true);
 });
 const handlePageChange = () => {
   // This function is called for size change as well. So when the total number of entities are
   // less than the lowest size option, hence we don't need to make a request.
   if (odataEntities.count < pageSizeOptions[0]) return;
-  fetchChunk(false);
+  fetchChunk(false, pagination.page);
 };
 // For defineExpose()
 const exposedFetch = {
-  fetchData: (clear = true) => fetchChunk(clear, !clear),
+  fetchData: (clear = true) => fetchChunk(clear),
   cancelFetch: () => { odataEntities.cancelRequest(); }
 };
 

apps/central/src/components/odata-loading-message.vue

@@ -54,9 +54,7 @@ const message = computed(() => {
   if (props.top == null || props.totalCount <= props.top)
     return tn(`${props.type}.all`, props.totalCount);
 
-  return tn(`${props.type}.first`, props.totalCount, {
-    top: props.top
-  });
+  return t(`${props.type}.withoutCount`);
 });
 </script>
 
@@ -80,54 +78,18 @@ const message = computed(() => {
         // This text is shown when the number of Submissions loading is unknown.
         "withoutCount": "Loading Submissions…",
         "all": "Loading {count} Submission… | Loading {count} Submissions…",
-        // {top} is a number that is either 250 or 1000. {count} may be any number
-        // that is at least 250. The string will be pluralized based on {count}.
-        "first": "Loading the first {top} of {count} Submission… | Loading the first {top} of {count} Submissions…",
-        // {top} is a number that is either 250 or 1000. {count} may be any number
-        // that is at least 250. The string will be pluralized based on {count}.
-        "middle": "Loading {top} more of {count} remaining Submission… | Loading {top} more of {count} remaining Submissions…",
-        "last": {
-          "multiple": "Loading the last {count} Submission… | Loading the last {count} Submissions…",
-          "one": "Loading the last Submission…"
-        },
         "filtered": {
           // This text is shown when the number of Submissions loading is unknown.
-          "withoutCount": "Loading matching Submissions…",
-          // {top} is a number that is either 250 or 1000. {count} may be any
-          // number that is at least 250. The string will be pluralized based on
-          // {count}.
-          "middle": "Loading {top} more of {count} remaining matching Submission… | Loading {top} more of {count} remaining matching Submissions…",
-          "last": {
-            "multiple": "Loading the last {count} matching Submission… | Loading the last {count} matching Submissions…",
-            "one": "Loading the last matching Submission…"
-          }
+          "withoutCount": "Loading matching Submissions…"
         }
       },
       "entity": {
         // This text is shown when the number of Entities loading is unknown.
         "withoutCount": "Loading Entities…",
         "all": "Loading {count} Entity… | Loading {count} Entities…",
-        // {top} is a number that is either 250 or 1000. {count} may be any number
-        // that is at least 250. The string will be pluralized based on {count}.
-        "first": "Loading the first {top} of {count} Entity… | Loading the first {top} of {count} Entities…",
-        // {top} is a number that is either 250 or 1000. {count} may be any number
-        // that is at least 250. The string will be pluralized based on {count}.
-        "middle": "Loading {top} more of {count} remaining Entity… | Loading {top} more of {count} remaining Entities…",
-        "last": {
-          "multiple": "Loading the last {count} Entity… | Loading the last {count} Entities…",
-          "one": "Loading the last Entity…"
-        },
         "filtered": {
           // This text is shown when the number of Entities loading is unknown.
-          "withoutCount": "Loading matching Entities…",
-          // {top} is a number that is either 250 or 1000. {count} may be any
-          // number that is at least 250. The string will be pluralized based on
-          // {count}.
-          "middle": "Loading {top} more of {count} remaining matching Entity… | Loading {top} more of {count} remaining matching Entities…",
-          "last": {
-            "multiple": "Loading the last {count} matching Entity… | Loading the last {count} matching Entities…",
-            "one": "Loading the last matching Entity…"
-          }
+          "withoutCount": "Loading matching Entities…"
         }
       }
     }

apps/central/src/components/submission/table-view.vue

@@ -18,7 +18,7 @@ except according to the terms contained in the LICENSE file.
     type="submission"
     :top="pagination.size"
     :filter="!!filter"
-    :total-count="totalCount"/>
+    :total-count="pagination.page ? 0 : totalCount"/>
   <!-- @update:page is emitted on size change as well -->
   <Pagination v-if="pagination.count > 0"
     v-model:page="pagination.page" v-model:size="pagination.size"
@@ -34,6 +34,7 @@ import { computed, reactive, useTemplateRef, watch } from 'vue';
 import OdataLoadingMessage from '../odata-loading-message.vue';
 import Pagination from '../pagination.vue';
 import SubmissionTable from './table.vue';
+import usePaginationQueryRef from '../../composables/pagination-query-ref';
 
 import { apiPaths } from '../../util/request';
 import { noop, reemit, reexpose } from '../../util/util';
@@ -73,9 +74,10 @@ const emit = defineEmits(['review', 'delete', 'restore']);
 const { odata, deletedSubmissionCount } = useRequestData();
 
 const pageSizeOptions = [250, 500, 1000];
+const { pageNumber, pageSize } = usePaginationQueryRef(pageSizeOptions);
 const pagination = reactive({
-  page: 0,
-  size: pageSizeOptions[0],
+  page: pageNumber,
+  size: pageSize,
   count: computed(() => (odata.dataExists ? odata.count : 0)),
   removed: computed(() => (odata.dataExists ? odata.removedSubmissions : 0))
 });
@@ -87,58 +89,65 @@ const odataSelect = computed(() => {
   return paths.join(',');
 });
 
-// `clear` indicates whether this.odata should be cleared before sending the
-// request. `refresh` indicates whether the request is a background refresh
-// (whether the refresh button was pressed).
-const fetchChunk = (clear, refresh = false) => {
-  // Are we fetching the first chunk of submissions or the next chunk?
-  const first = clear || refresh;
-  if (first) {
-    pagination.page = 0;
-  }
-
-  return odata.request({
-    url: apiPaths.odataSubmissions(
-      props.projectId,
-      props.xmlFormId,
-      props.draft,
-      {
-        $top: pagination.size,
-        $skip: pagination.page * pagination.size,
-        $count: true,
-        $wkt: true,
-        $filter: props.deleted ? '__system/deletedAt ne null' : props.filter,
-        $select: odataSelect.value,
-        $orderby: '__system/submissionDate desc'
+/**
+ * @param clear indicates whether this.odata should be cleared before sending the request.
+ * @param page indicates which page to load
+ */
+const fetchChunk = (clear, page = 0) => odata.request({
+  url: apiPaths.odataSubmissions(
+    props.projectId,
+    props.xmlFormId,
+    props.draft,
+    {
+      $top: pagination.size,
+      $skip: page * pagination.size,
+      $count: true,
+      $wkt: true,
+      $filter: props.deleted ? '__system/deletedAt ne null' : props.filter,
+      $select: odataSelect.value,
+      $orderby: '__system/submissionDate desc'
+    }
+  ),
+  clear
+})
+  .then(() => {
+    if (pagination.page !== page) {
+      pagination.page = page;
+    }
+    const lastPage = Math.max(0, Math.ceil(odata.count / pagination.size) - 1);
+    if (pagination.page > lastPage) {
+      fetchChunk(true, lastPage);
+      return;
+    }
+    if (props.deleted) {
+      deletedSubmissionCount.cancelRequest();
+      if (!deletedSubmissionCount.dataExists) {
+        deletedSubmissionCount.data = reactive({});
       }
-    ),
-    clear
+      deletedSubmissionCount.value = odata.count;
+    }
   })
-    .then(() => {
-      if (props.deleted) {
-        deletedSubmissionCount.cancelRequest();
-        if (!deletedSubmissionCount.dataExists) {
-          deletedSubmissionCount.data = reactive({});
-        }
-        deletedSubmissionCount.value = odata.count;
-      }
-    })
-    .catch(noop);
-};
-fetchChunk(true);
-watch([() => props.filter, () => props.deleted], () => { fetchChunk(true); });
+  .catch(noop);
+
+fetchChunk(true, pagination.page);
+
+watch([() => props.filter, () => props.deleted], () => {
+  fetchChunk(true);
+});
 watch(() => props.fields, (_, oldFields) => {
   // SubmissionList resets column selector when delete button is pressed, in
   // that case we don't want to send request from here.
-  if (oldFields != null && !props.deleted) fetchChunk(true);
+  if (oldFields != null && !props.deleted) {
+    fetchChunk(true);
+  }
 });
 const handlePageChange = () => {
   // This function is called for size change as well. So the total number of submissions are
   // less than the lowest size option, hence we don't need to make a request.
   if (odata.count < pageSizeOptions[0]) return;
-  fetchChunk(false);
+  fetchChunk(false, pagination.page);
 };
-const refresh = () => fetchChunk(false, true);
+const refresh = () => fetchChunk(false);
 const cancelRefresh = () => { odata.cancelRequest(); };
 
 const reemitters = reemit(emit, ['review', 'delete', 'restore']);

apps/central/src/composables/data-view.js

@@ -18,7 +18,16 @@ export default () => {
 
   const dataView = useQueryRef({
     fromQuery: (query) => (!query.deleted && query.map === 'true' ? 'map' : 'table'),
-    toQuery: (value) => ({ map: value === 'map' ? 'true' : null })
+    toQuery: (value) => {
+      if (value === 'map') {
+        return {
+          map: true,
+          'page-size': null,
+          'page-number': null
+        };
+      }
+      return { map: null };
+    }
   });
 
   const options = computed(() => [

apps/central/src/composables/pagination-query-ref.js

@@ -0,0 +1,33 @@
+import useQueryRef from './query-ref';
+
+/**
+ * @param {number[]} pageSizeOptions - An array of exactly three numbers representing
+ *   the available page size options in ascending order (e.g., [250, 500, 1000]).
+ */
+export default (pageSizeOptions) => {
+  const pageNumber = useQueryRef({
+    fromQuery: (query) => {
+      const num = Number.parseInt(query['page-number'], 10);
+      if (!num || num < 1) return 0;
+      return num - 1;
+    },
+    toQuery: (value) => ({ 'page-number': value === 0 ? null : value + 1 })
+  });
+
+  const pageSize = useQueryRef({
+    fromQuery: (query) => {
+      const size = Number.parseInt(query['page-size'], 10);
+
+      if (!size || size < pageSizeOptions[0]) return pageSizeOptions[0];
+      if (size >= pageSizeOptions[2]) return pageSizeOptions[2];
+      if (size >= pageSizeOptions[1]) return pageSizeOptions[1];
+      return pageSizeOptions[0];
+    },
+    toQuery: (value) => ({ 'page-size': value })
+  });
+
+  return {
+    pageNumber,
+    pageSize
+  };
+};