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,9 +57,9 @@
     pagination,
   }
 
-  onMount(async () => {
-    if (!isEmpty(datasource)) {
+  async function fetchData() {
     data = await API.fetchDatasource(datasource, $dataContext)
+
     let schema
 
     // Get schema for datasource
@@ -114,6 +114,11 @@
 
     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>