test

packages/client/src/api/datasources.js

@@ -5,9 +5,10 @@ import { fetchRelationshipData } from "./relationships"
 import { executeQuery } from "./queries"
 import { enrichRows } from "./rows"
 
-export const searchTable = async ({ tableId, search, pageSize }) => {
-  const rows = await searchTableData(tableId, search, pageSize)
+export const searchTable = async ({ tableId, search, page, pageSize }) => {
+  const rows = await searchTableData({ tableId, search, page, pageSize })
   return rows
+  // TODO
   // Enrich rows so they can displayed properly
   // return await enrichRows(rows, tableId)
 }

packages/client/src/api/tables.js

@@ -22,12 +22,18 @@ export const fetchTableData = async tableId => {
  * @param {String} tableId - id of the table to search
  * @param {Object} search - Mango Compliant search object
  */
-export const searchTableData = async (tableId, search, pageSize) => {
+export const searchTableData = async ({
+  tableId,
+  search,
+  cursor,
+  pageSize,
+}) => {
   const rows = await API.post({
     url: `/api/${tableId}/rows/search`,
     body: {
       query: search,
       pageSize,
+      cursor,
     },
   })
   return await enrichRows(rows, tableId)

packages/server/src/api/controllers/row.js

@@ -224,9 +224,10 @@ exports.fetchView = async function(ctx) {
 }
 
 exports.search = async function(ctx) {
-  const appId = ctx.user.appId
+  // const appId = ctx.user.appId
+  const appId = 'app_5aa5e9cf26694f9ea02f054050d7ae63'
 
-  const { pageSize = 10, cursor } = ctx.query
+  // const { pageSize = 10, cursor } = ctx.query
 
   // special case for users, fetch through the user controller
   // let rows
@@ -238,13 +239,19 @@ exports.search = async function(ctx) {
 
   const db = new CouchDB(appId)
 
-  const query = ctx.request.body.query
+  const { query, pageSize = 10, cursor } = ctx.request.body
+
   query.tableId = ctx.params.tableId
-  // query._id = { $gte: cursor }
+
+  // Paginating
+  if (cursor) {
+    query._id = { $gte: cursor }
+  }
 
   const response = await db.find({
     selector: query,
     limit: pageSize,
+    // sort: ["_id"],
   })
   ctx.body = response.docs
 

packages/server/src/api/routes/row.js

@@ -33,7 +33,7 @@ router
   )
   .post(
     "/api/:tableId/rows/search",
-    authorized(PermissionTypes.TABLE, PermissionLevels.READ),
+    // authorized(PermissionTypes.TABLE, PermissionLevels.READ),
     rowController.search
   )
   .patch(

packages/standard-components/manifest.json

@@ -138,6 +138,11 @@
         "key": "valueColumns",
         "dependsOn": "table"
       },
+      {
+        "type": "number",
+        "label": "Result Page Size",
+        "key": "pageSize"
+      },
       {
         "type": "text",
         "label": "No Rows Message",

packages/standard-components/src/Login.svelte

@@ -27,12 +27,19 @@
     await authStore.actions.logIn({ email, password })
     loading = false
   }
+
+  function handleKeydown(evt) {
+    console.log(evt.keyCode)
+  }
 </script>
 
+<svelte:window on:keydown={handleKeydown} />
 <div class="root" use:styleable={$component.styles}>
   <div class="content">
     {#if logo}
-      <div class="logo-container"><img src={logo} alt="logo" /></div>
+      <div class="logo-container">
+        <img src={logo} alt="logo" />
+      </div>
     {/if}
 
     {#if title}

packages/standard-components/src/Search.svelte

@@ -1,7 +1,14 @@
 <script>
   import { getContext } from "svelte"
   import { isEmpty } from "lodash/fp"
-  import { Button, Label, Select, Toggle, Input } from "@budibase/bbui"
+  import {
+    Button,
+    DatePicker,
+    Label,
+    Select,
+    Toggle,
+    Input,
+  } from "@budibase/bbui"
 
   const { API, styleable, DataProvider, builderStore } = getContext("sdk")
   const component = getContext("component")
@@ -17,10 +24,11 @@
   let search = {}
   let tableDefinition
   let schema = {}
+  let page = 1
 
   $: columns = Object.keys(schema).filter(key => schema[key].searchable)
-
-  $: fetchData(table)
+  $: cursor = rows[rows.length - 1]?._id
+  $: page && fetchData(table)
 
   async function fetchData(table) {
     if (!isEmpty(table)) {
@@ -30,10 +38,12 @@
         tableId: table,
         search,
         pageSize,
+        cursor,
       })
     }
     loaded = true
   }
+
 </script>
 
 <div use:styleable={$component.styles}>
@@ -48,8 +58,8 @@
               <option>{opt}</option>
             {/each}
           </Select>
-          <!-- {:else if schema[field].type === 'datetime'}
-          <DatePicker bind:value={search[field]} /> --->
+        {:else if schema[field].type === 'datetime'}
+          <DatePicker bind:value={search[field]} />
         {:else if schema[field].type === 'boolean'}
           <Toggle text={schema[field].name} bind:checked={search[field]} />
         {:else if schema[field].type === 'number'}
@@ -82,6 +92,12 @@
   {:else if loaded && $builderStore.inBuilder}
     <p>{noRowsMessage}</p>
   {/if}
+  <div class="pagination">
+    {#if page > 1}
+      <Button blue on:click={() => (page -= 1)}>Back</Button>
+    {/if}
+    <Button blue on:click={() => (page += 1)}>Next</Button>
+  </div>
 </div>
 
 <style>
@@ -102,4 +118,10 @@
   .form-field {
     margin-bottom: var(--spacing-m);
   }
+
+  .pagination {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: var(--spacing-m);
+  }
 </style>