custom columns

packages/client/src/api/datasources.js

@@ -5,6 +5,13 @@ 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)
+  return rows
+  // Enrich rows so they can displayed properly
+  // return await enrichRows(rows, tableId)
+}
+
 /**
  * Fetches all rows for a particular Budibase data source.
  */
@@ -14,15 +21,10 @@ export const fetchDatasource = async datasource => {
   }
 
   // Fetch all rows in data source
-  const { type, tableId, fieldName, search } = datasource
+  const { type, tableId, fieldName } = datasource
   let rows = []
   if (type === "table") {
-    // TODO refactor
-    if (search) {
-      rows = await searchTableData(tableId, search)
-    } else {
-      rows = await fetchTableData(tableId)
-    }
+    rows = await fetchTableData(tableId)
   } else if (type === "view") {
     rows = await fetchViewData(datasource)
   } else if (type === "query") {

packages/client/src/api/tables.js

@@ -22,11 +22,12 @@ 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) => {
+export const searchTableData = async (tableId, search, pageSize) => {
   const rows = await API.post({
     url: `/api/${tableId}/rows/search`,
     body: {
       query: search,
+      pageSize,
     },
   })
   return await enrichRows(rows, tableId)

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

@@ -218,6 +218,8 @@ exports.fetchView = async function(ctx) {
 exports.search = async function(ctx) {
   const appId = ctx.user.appId
 
+  const { pageSize = 10, cursor } = ctx.query
+
   // special case for users, fetch through the user controller
   // let rows
   // SHOULD WE PREVENT SEARCHING FOR USERS?
@@ -230,11 +232,15 @@ exports.search = async function(ctx) {
 
   const query = ctx.request.body.query
   query.tableId = ctx.params.tableId
+  // query._id = { $gte: cursor }
 
   const response = await db.find({
     selector: query,
+    limit: pageSize,
   })
   ctx.body = response.docs
+
+  // TODO: probably attach relationships
   // const rows = response.docs.map(row => row.doc)
   // ctx.body = await linkRows.attachLinkInfo(appId, rows)
 }

packages/standard-components/manifest.json

@@ -111,6 +111,11 @@
         "type": "datasource",
         "label": "Data",
         "key": "datasource"
+      },
+      {
+        "type": "text",
+        "label": "No Rows Message",
+        "key": "noRowsMessage"
       }
     ]
   },
@@ -123,9 +128,20 @@
     "dataProvider": true,
     "settings": [
       {
-        "type": "datasource",
-        "label": "Data",
-        "key": "datasource"
+        "type": "table",
+        "label": "Table",
+        "key": "table"
+      },
+      {
+        "type": "multifield",
+        "label": "Columns",
+        "key": "valueColumns",
+        "dependsOn": "table"
+      },
+      {
+        "type": "text",
+        "label": "No Rows Message",
+        "key": "noRowsMessage"
       }
     ]
   },

packages/standard-components/src/List.svelte

@@ -6,6 +6,7 @@
   const component = getContext("component")
 
   export let datasource = []
+  export let noRowsMessage = "Feed me some data"
 
   let rows = []
   let loaded = false
@@ -32,7 +33,7 @@
       {/each}
     {/if}
   {:else if loaded && $builderStore.inBuilder}
-    <p>Feed me some data</p>
+    <p>{noRowsMessage}</p>
   {/if}
 </div>
 

packages/standard-components/src/Search.svelte

@@ -6,29 +6,30 @@
   const { API, styleable, DataProvider, builderStore } = getContext("sdk")
   const component = getContext("component")
 
-  export let datasource = []
+  export let table = []
+  export let columns = []
+  export let pageSize = 50
+  export let noRowsMessage = "Feed me some data"
 
   let rows = []
   let loaded = false
-  let table
-  let searchableFields = []
+  // let searchableFields = []
   let search = {}
+  let tableDefinition
+  let schema = {}
 
-  $: schema = table?.schema || {}
-  $: searchableFields = Object.keys(schema).filter(
-    key => schema[key].searchable
-  )
+  $: columns = Object.keys(schema).filter(key => schema[key].searchable)
 
-  $: console.log(search)
+  $: fetchData(table)
 
-  $: fetchData(datasource)
-
-  async function fetchData(datasource) {
-    if (!isEmpty(datasource)) {
-      table = await API.fetchTableDefinition(datasource.tableId)
-      rows = await API.fetchDatasource({
-        ...datasource,
-        search
+  async function fetchData(table) {
+    if (!isEmpty(table)) {
+      const tableDef = await API.fetchTableDefinition(table)
+      schema = tableDef.schema
+      rows = await API.searchTable({
+        tableId: table,
+        search,
+        pageSize,
       })
     }
     loaded = true
@@ -37,7 +38,7 @@
 
 <div use:styleable={$component.styles}>
   <div class="query-builder">
-    {#each searchableFields as field}
+    {#each columns as field}
       <div class="form-field">
         <Label extraSmall grey>{schema[field].name}</Label>
         {#if schema[field].type === 'options'}
@@ -50,9 +51,7 @@
           <!-- {: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]} />
+          <Toggle text={schema[field].name} bind:checked={search[field]} />
         {:else if schema[field].type === 'number'}
           <Input type="number" bind:value={search[field]} />
         {:else if schema[field].type === 'string'}
@@ -60,11 +59,15 @@
         {/if}
       </div>
     {/each}
-    <Button blue on:click={() => fetchData(datasource)}>Search</Button>
-    <Button red on:click={() => {
-      search = {}
-      fetchData(datasource)
-    }}>Reset</Button>
+    <Button blue on:click={() => fetchData(table)}>Search</Button>
+    <Button
+      red
+      on:click={() => {
+        search = {}
+        fetchData(table)
+      }}>
+      Reset
+    </Button>
   </div>
   {#if rows.length > 0}
     {#if $component.children === 0 && $builderStore.inBuilder}
@@ -77,7 +80,7 @@
       {/each}
     {/if}
   {:else if loaded && $builderStore.inBuilder}
-    <p>Feed me some data</p>
+    <p>{noRowsMessage}</p>
   {/if}
 </div>