use dynamic input in query

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -5,7 +5,7 @@
   import api from "builderStore/api"
 
   const BYTES_IN_MB = 1000000
-  const FILE_SIZE_LIMIT = BYTES_IN_MB * 1
+  const FILE_SIZE_LIMIT = BYTES_IN_MB * 5
 
   export let files = []
   export let dataImport = {

packages/builder/src/components/userInterface/EventsEditor/actions/RefreshComponent.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { Select, Label, Spacer } from "@budibase/bbui"
+  import { store, backendUiStore, currentAsset } from "builderStore"
+  import fetchBindableProperties from "builderStore/fetchBindableProperties"
+  import ParameterBuilder from "../../../integration/QueryParameterBuilder.svelte"
+
+  export let parameters
+
+  let components = []
+
+  $: components = componentList($currentAsset)
+
+  // traverse the layout or screen tree
+  // and build an array of all available components
+  function componentList(asset) {
+    const components = []
+
+    function traverse(node) {
+      if (node._component) components.push(node)
+
+      if (node._children) node._children.forEach(traverse)
+
+      if (node.props) traverse(node.props)
+    }
+
+    traverse(asset.props)
+
+    return components
+  }
+</script>
+
+<div class="root">
+  <Label size="m" color="dark">Component</Label>
+  <Select thin secondary bind:value={parameters.componentId}>
+    <option value="" />
+    {#each components as component}
+      <option value={component._id}>{component._instanceName}</option>
+    {/each}
+  </Select>
+</div>

packages/client/src/api/datasources.js

@@ -1,9 +1,11 @@
+import { get } from "svelte/store"
 import { fetchTableData } from "./tables"
 import { fetchViewData } from "./views"
 import { fetchRelationshipData } from "./relationships"
 import { executeQuery } from "./queries"
 import { enrichRows } from "./rows"
 import { enrichDataBindings } from "../utils/enrichDataBinding"
+import { bindingStore } from "../store/binding"
 
 /**
  * Fetches all rows for a particular Budibase data source.
@@ -21,12 +23,13 @@ export const fetchDatasource = async (datasource, dataContext) => {
   } else if (type === "view") {
     rows = await fetchViewData(datasource)
   } else if (type === "query") {
-    console.log("Query Datasource", datasource)
-    console.log("Data Context", dataContext)
-    // TODO: You left here
-    const parameters = enrichDataBindings(datasource.queryParams, dataContext)
-    console.log("PARSED PARAMS", parameters)
-    return await executeQuery({ _id: datasource._id, parameters })
+    const bindings = get(bindingStore)
+    const fullContext = {
+      ...bindings,
+      ...dataContext,
+    }
+    const parameters = enrichDataBindings(datasource.queryParams, fullContext)
+    return await executeQuery({ queryId: datasource._id, parameters })
   } else if (type === "link") {
     const row = dataContext[datasource.providerId]
     rows = await fetchRelationshipData({

packages/client/src/api/queries.js

@@ -10,5 +10,5 @@ export const executeQuery = async ({ queryId, parameters }) => {
       parameters,
     },
   })
-  return response.rows
+  return response
 }

packages/server/scripts/exportAppTemplate.js

@@ -3,7 +3,7 @@ const { exportTemplateFromApp } = require("../src/utilities/templates")
 const yargs = require("yargs")
 
 // Script to export a chosen budibase app into a package
-// Usage: ./scripts/exportAppTemplate.js export --name=Funky --appId=someInstanceId --appId=appId
+// Usage: ./scripts/exportAppTemplate.js export --name=Funky --appId=appId
 
 yargs
   .command(

packages/server/src/integrations/postgres.js

@@ -28,7 +28,7 @@ const SCHEMA = {
       required: true,
     },
   },
-  editor: {
+  query: {
     sql: {
       type: "sql",
     },
@@ -42,53 +42,6 @@ const SCHEMA = {
   },
 }
 
-const DATASOURCE_CONFIG = {
-  host: {
-    type: "string",
-    default: "localhost",
-    required: true,
-  },
-  port: {
-    type: "number",
-    required: true,
-    default: 5432,
-  },
-  database: {
-    type: "string",
-    default: "postgres",
-    required: true,
-  },
-  username: {
-    type: "string",
-    default: "root",
-    required: true,
-  },
-  password: {
-    type: "password",
-    default: "root",
-    required: true,
-  },
-}
-
-const QUERY_CONFIG = {
-  sql: {
-    type: "sql",
-  },
-  gui: {
-    type: "config",
-    fields: [
-      {
-        name: "",
-        type: "",
-      },
-      {
-        name: "",
-        type: "",
-      },
-    ],
-  },
-}
-
 class PostgresIntegration {
   constructor(config, query) {
     this.config = config
@@ -113,9 +66,6 @@ class PostgresIntegration {
 }
 
 module.exports = {
-  schema: {
-    datasource: DATASOURCE_CONFIG,
-    query: QUERY_CONFIG,
-  },
+  schema: SCHEMA,
   integration: PostgresIntegration,
 }

packages/standard-components/src/Input.svelte

@@ -4,9 +4,11 @@
   const { styleable, setBindableValue } = getContext("sdk")
   const component = getContext("component")
 
-  // Keep bindable value up to date
   let value
-  $: setBindableValue(value, $component.id)
+
+  function onBlur() {
+    setBindableValue(value, $component.id)
+  }
 </script>
 
-<input bind:value on:change={onchange} use:styleable={$component.styles} />
+<input bind:value on:blur={onBlur} use:styleable={$component.styles} />

packages/standard-components/src/grid/Component.svelte

@@ -57,63 +57,68 @@
     pagination,
   }
 
-  onMount(async () => {
-    if (!isEmpty(datasource)) {
-      data = await API.fetchDatasource(datasource, $dataContext)
-      let schema
+  async function fetchData() {
+    data = await API.fetchDatasource(datasource, $dataContext)
 
-      // Get schema for datasource
-      // Views with "Calculate" applied provide their own schema.
-      // For everything else, use the tableId property to pull to table schema
-      if (datasource.schema) {
-        schema = datasource.schema
-      } else {
-        schema = (await API.fetchTableDefinition(datasource.tableId)).schema
-      }
+    let schema
 
-      columnDefs = Object.keys(schema).map((key, i) => {
-        return {
-          headerCheckboxSelection: i === 0 && canEdit,
-          checkboxSelection: i === 0 && canEdit,
-          valueSetter: setters.get(schema[key].type),
-          headerName: key,
-          field: key,
-          hide: shouldHideField(key),
-          sortable: true,
-          editable: canEdit && schema[key].type !== "link",
-          cellRenderer: getRenderer(schema[key], canEdit, SDK),
-          autoHeight: true,
-        }
-      })
-
-      if (detailUrl) {
-        columnDefs = [
-          ...columnDefs,
-          {
-            headerName: "Detail",
-            field: "_id",
-            minWidth: 100,
-            width: 100,
-            flex: 0,
-            editable: false,
-            sortable: false,
-            cellRenderer: getRenderer(
-              {
-                type: "_id",
-                options: { detailUrl },
-              },
-              false,
-              SDK
-            ),
-            autoHeight: true,
-            pinned: "left",
-            filter: false,
-          },
-        ]
-      }
-
-      dataLoaded = true
+    // Get schema for datasource
+    // Views with "Calculate" applied provide their own schema.
+    // For everything else, use the tableId property to pull to table schema
+    if (datasource.schema) {
+      schema = datasource.schema
+    } else {
+      schema = (await API.fetchTableDefinition(datasource.tableId)).schema
     }
+
+    columnDefs = Object.keys(schema).map((key, i) => {
+      return {
+        headerCheckboxSelection: i === 0 && canEdit,
+        checkboxSelection: i === 0 && canEdit,
+        valueSetter: setters.get(schema[key].type),
+        headerName: key,
+        field: key,
+        hide: shouldHideField(key),
+        sortable: true,
+        editable: canEdit && schema[key].type !== "link",
+        cellRenderer: getRenderer(schema[key], canEdit, SDK),
+        autoHeight: true,
+      }
+    })
+
+    if (detailUrl) {
+      columnDefs = [
+        ...columnDefs,
+        {
+          headerName: "Detail",
+          field: "_id",
+          minWidth: 100,
+          width: 100,
+          flex: 0,
+          editable: false,
+          sortable: false,
+          cellRenderer: getRenderer(
+            {
+              type: "_id",
+              options: { detailUrl },
+            },
+            false,
+            SDK
+          ),
+          autoHeight: true,
+          pinned: "left",
+          filter: false,
+        },
+      ]
+    }
+
+    dataLoaded = true
+  }
+
+  $: datasource && fetchData()
+
+  onMount(() => {
+    if (!isEmpty(datasource)) fetchData()
   })
 
   const shouldHideField = name => {
@@ -150,9 +155,7 @@
         {#if selectedRows.length > 0}
           <DeleteButton text small on:click={modal.show()}>
             <Icon name="addrow" />
-            Delete
-            {selectedRows.length}
-            row(s)
+            Delete {selectedRows.length} row(s)
           </DeleteButton>
         {/if}
       </div>