Enable pagination on views

packages/frontend-core/src/api/viewsV2.js

@@ -22,9 +22,33 @@ export const buildViewV2Endpoints = API => ({
   /**
    * Fetches all rows in a view
    * @param viewId the id of the view
+   * @param paginate whether to paginate or not
+   * @param limit page size
+   * @param bookmark pagination cursor
+   * @param sort sort column
+   * @param sortOrder sort order
+   * @param sortType sort type (text or numeric)
    */
-  fetch: async viewId => {
-    return await API.post({ url: `/api/v2/views/${viewId}/search` })
+  fetch: async ({
+    viewId,
+    paginate,
+    limit,
+    bookmark,
+    sort,
+    sortOrder,
+    sortType,
+  }) => {
+    return await API.post({
+      url: `/api/v2/views/${viewId}/search`,
+      body: {
+        paginate,
+        limit,
+        bookmark,
+        sort,
+        sortOrder,
+        sortType,
+      },
+    })
   },
   /**
    * Delete a view

packages/frontend-core/src/fetch/DataFetch.js

@@ -116,7 +116,7 @@ export default class DataFetch {
   async getInitialData() {
     const { datasource, filter, paginate } = this.options
 
-    // Fetch datasource definition and extract filter and sort if configured
+    // Fetch datasource definition and extract sort properties if configured
     const definition = await this.getDefinition(datasource)
     if (definition?.sort?.field) {
       this.options.sortColumn = definition.sort.field

packages/frontend-core/src/fetch/ViewV2Fetch.js

@@ -1,8 +1,12 @@
 import DataFetch from "./DataFetch.js"
+import { get } from "svelte/store"
 
 export default class ViewV2Fetch extends DataFetch {
   determineFeatureFlags() {
     return {
+      // The API does not actually support dynamic filtering, but since views
+      // have filters built in we don't want to perform client side filtering
+      // which would happen if we marked this as false
       supportsSearch: true,
       supportsSort: true,
       supportsPagination: true,
@@ -29,12 +33,30 @@ export default class ViewV2Fetch extends DataFetch {
   }
 
   async getData() {
-    const { datasource } = this.options
+    const { datasource, limit, sortColumn, sortOrder, sortType, paginate } =
+      this.options
+    const { cursor } = get(this.store)
     try {
-      const res = await this.API.viewV2.fetch(datasource.id)
-      return { rows: res?.rows || [] }
+      const res = await this.API.viewV2.fetch({
+        viewId: datasource.id,
+        paginate,
+        limit,
+        bookmark: cursor,
+        sort: sortColumn,
+        sortOrder,
+        sortType,
+      })
+      return {
+        rows: res?.rows || [],
+        hasNextPage: res?.hasNextPage || false,
+        cursor: res?.bookmark || null,
+      }
     } catch (error) {
-      return { rows: [] }
+      return {
+        rows: [],
+        hasNextPage: false,
+        error,
+      }
     }
   }
 }