From d710874ef19bdca5f99191f6a98e562c6fe0289f Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Fri, 8 Jan 2021 18:22:03 +0000 Subject: [PATCH] binding data context in component --- .../EditIntegrationConfigButton.svelte | 43 ---- .../src/components/common/BottomDrawer.svelte | 36 +++- .../components/integration/QueryEditor.svelte | 3 + .../integration/QueryParameterBuilder.svelte | 49 +++-- .../src/components/integration/index.svelte | 3 +- .../DataBindingDrawer/index.svelte | 57 +++-- .../EventsEditor/EventEditor.svelte | 200 ++++++++++++++++++ .../EventsEditor/EventEditorModal.svelte | 176 --------------- .../EventsEditor/EventPropertyControl.svelte | 11 +- .../userInterface/TableViewSelect.svelte | 53 ++++- .../design/[assetType]/_layout.svelte | 5 - packages/client/src/api/datasources.js | 11 +- packages/client/src/api/queries.js | 14 +- packages/client/src/utils/buttonActions.js | 7 +- packages/server/src/api/controllers/query.js | 27 +-- packages/server/src/api/routes/query.js | 3 +- 16 files changed, 367 insertions(+), 331 deletions(-) delete mode 100644 packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte create mode 100644 packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte delete mode 100644 packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte diff --git a/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte b/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte deleted file mode 100644 index e78e7ac93d..0000000000 --- a/packages/builder/src/components/backend/DataTable/buttons/EditIntegrationConfigButton.svelte +++ /dev/null @@ -1,43 +0,0 @@ - - -
- -
- - - - - diff --git a/packages/builder/src/components/common/BottomDrawer.svelte b/packages/builder/src/components/common/BottomDrawer.svelte index d2a4bcbaab..863102e826 100644 --- a/packages/builder/src/components/common/BottomDrawer.svelte +++ b/packages/builder/src/components/common/BottomDrawer.svelte @@ -3,15 +3,19 @@ import Portal from "svelte-portal" export let title - export let onClose + export let onClose = () => {}
- {#if title} - {title} - {/if} - +
+ {title} +
+ + +
+
+
@@ -20,10 +24,28 @@ height: 50vh; position: absolute; bottom: 0; - width: 97%; + width: 100vw; background: var(--background); - padding: var(--spacing-xl); border-top: var(--border-light); z-index: 2; } + + header { + display: flex; + justify-content: space-between; + align-items: center; + border: var(--border-light); + padding: var(--spacing-s); + } + + .controls { + display: grid; + grid-auto-flow: column; + grid-gap: var(--spacing-m); + align-items: center; + } + + .close { + font-size: var(--font-size-xl); + } diff --git a/packages/builder/src/components/integration/QueryEditor.svelte b/packages/builder/src/components/integration/QueryEditor.svelte index 5def206c90..a4256c42e8 100644 --- a/packages/builder/src/components/integration/QueryEditor.svelte +++ b/packages/builder/src/components/integration/QueryEditor.svelte @@ -44,4 +44,7 @@ background: var(--background); border-radius: var(--border-radius-m); } + :global(.CodeMirror) { + border-radius: var(--border-radius-m); + } diff --git a/packages/builder/src/components/integration/QueryParameterBuilder.svelte b/packages/builder/src/components/integration/QueryParameterBuilder.svelte index d78018768d..2466ccbada 100644 --- a/packages/builder/src/components/integration/QueryParameterBuilder.svelte +++ b/packages/builder/src/components/integration/QueryParameterBuilder.svelte @@ -1,5 +1,5 @@ -Parameters -
- - - -
- {#each parameters as parameter, idx} - - - - deleteQueryParameter(idx)} /> - {/each} -
- +
+ Parameters +
+ + + +
+ {#each parameters as parameter, idx} + + + + deleteQueryParameter(idx)} /> + {/each} +
+ +
diff --git a/packages/builder/src/components/integration/index.svelte b/packages/builder/src/components/integration/index.svelte index acea9cdd3f..c8db464f4e 100644 --- a/packages/builder/src/components/integration/index.svelte +++ b/packages/builder/src/components/integration/index.svelte @@ -1,5 +1,5 @@ {#if query} - -
- - + +
+ +
+
+ 
{query.queryString}
+
{/if} diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte new file mode 100644 index 0000000000..5a94dadc5d --- /dev/null +++ b/packages/builder/src/components/userInterface/EventsEditor/EventEditor.svelte @@ -0,0 +1,200 @@ + + +
+
+
+
+ +
+ +
+ Add Action + +
+ +
+ {#each actionTypes as actionType} +
+ {actionType.name} +
+ {/each} +
+ +
+ + {#if actions && actions.length > 0} + {#each actions as action, index} +
+
+ + {index + 1}. {action[eventTypeKey]} + + + +
+ +
+ {/each} + {/if} +
+
+ {#if selectedAction} +
+ +
+ +
+
+ {/if} + +
+
+ +Learn more about Actions + + diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte deleted file mode 100644 index fda964a7ba..0000000000 --- a/packages/builder/src/components/userInterface/EventsEditor/EventEditorModal.svelte +++ /dev/null @@ -1,176 +0,0 @@ - - -
-
- -
- -
- Add Action - -
- -
- {#each actionTypes as actionType} -
- {actionType.name} -
- {/each} -
- -
- -
- {#if actions && actions.length > 0} - {#each actions as action, index} -
-
- {index + 1}. {action[eventTypeKey]} -
- -
-
- {#if action === selectedAction} -
- -
- deleteAction(index)}> - Delete - -
-
- {/if} -
- {/each} - {/if} - -
- -Learn more about Actions - - diff --git a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte index 40a8e77f0c..6d42a25a38 100644 --- a/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte +++ b/packages/builder/src/components/userInterface/EventsEditor/EventPropertyControl.svelte @@ -2,7 +2,7 @@ import { Button, Modal } from "@budibase/bbui" import { createEventDispatcher } from "svelte" import { store } from "builderStore" - import EventEditorModal from "./EventEditorModal.svelte" + import EventEditor from "./EventEditor.svelte" import BottomDrawer from "components/common/BottomDrawer.svelte" const dispatch = createEventDispatcher() @@ -20,7 +20,12 @@ {#if drawerVisible} - - + (drawerVisible = false)}> + + + +
+ +
{/if} diff --git a/packages/builder/src/components/userInterface/TableViewSelect.svelte b/packages/builder/src/components/userInterface/TableViewSelect.svelte index 423ff390e3..a395497cc4 100644 --- a/packages/builder/src/components/userInterface/TableViewSelect.svelte +++ b/packages/builder/src/components/userInterface/TableViewSelect.svelte @@ -2,10 +2,14 @@ import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui" import { createEventDispatcher } from "svelte" import { store, backendUiStore, currentAsset } from "builderStore" + // import DataBindingDrawer from "components/userInterface/DataBindingDrawer/index.svelte" + import BottomDrawer from "components/common/BottomDrawer.svelte" + import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte" import fetchBindableProperties from "../../builderStore/fetchBindableProperties" const dispatch = createEventDispatcher() let anchorRight, dropdownRight + let bindingDrawerOpen export let value = {} @@ -15,14 +19,11 @@ } function openBindingDrawer() { - backendUiStore.update(state => { - state.selectedQueryId = value._id - return state - }) - store.update(state => { - state.bottomDrawerVisible = true - return state - }) + bindingDrawerOpen = true + } + + function closeDatabindingDrawer() { + bindingDrawerOpen = false } $: tables = $backendUiStore.tables.map(m => ({ @@ -47,6 +48,7 @@ name: query.name, ...query, schema: query.schema, + parameters: query.parameters, type: "query", })) @@ -57,6 +59,15 @@ tables: $backendUiStore.tables, }) + $: queryBindableProperties = bindableProperties.map(property => ({ + ...property, + category: property.type === "instance" ? "Component" : "Table", + label: property.readableBinding, + path: property.runtimeBinding, + })) + + $: console.log("selected", value) + $: links = bindableProperties .filter(x => x.fieldSchema?.type === "link") .map(property => { @@ -78,9 +89,6 @@ {value.label ? value.label : 'Table / View / Query'}
-{#if value.type === "query"} - -{/if}
@@ -138,6 +146,25 @@
+{#if value.type === "query"} + +
+
+ 
{value.queryString}
+ +
+ + {/if} +{/if} + + diff --git a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte index 40565ee3b5..64060ef6b7 100644 --- a/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/[application]/design/[assetType]/_layout.svelte @@ -10,7 +10,6 @@ import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte" import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte" import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte" - import DataBindingDrawer from "components/userInterface/DataBindingDrawer/index.svelte" $: instance = $store.appInstance @@ -48,10 +47,6 @@ {/if}
- {#if $store.bottomDrawerVisible} - - {/if} - {#if $selectedComponent != null}
diff --git a/packages/client/src/api/datasources.js b/packages/client/src/api/datasources.js index ef1ff49723..1ea592c94c 100644 --- a/packages/client/src/api/datasources.js +++ b/packages/client/src/api/datasources.js @@ -1,8 +1,9 @@ import { fetchTableData } from "./tables" import { fetchViewData } from "./views" import { fetchRelationshipData } from "./relationships" -import { fetchQueryData } from "./queries" +import { executeQuery } from "./queries" import { enrichRows } from "./rows" +import { enrichDataBindings } from "../utils/enrichDataBinding" /** * Fetches all rows for a particular Budibase data source. @@ -20,8 +21,12 @@ export const fetchDatasource = async (datasource, dataContext) => { } else if (type === "view") { rows = await fetchViewData(datasource) } else if (type === "query") { - // TODO: map to schema - return await fetchQueryData(datasource) + 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 }) } else if (type === "link") { const row = dataContext[datasource.providerId] rows = await fetchRelationshipData({ diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js index 1d1ad5ced7..29ca197d19 100644 --- a/packages/client/src/api/queries.js +++ b/packages/client/src/api/queries.js @@ -1,23 +1,13 @@ import API from "./api" -/** - * Fetches all rows from a query. - */ -export const fetchQueryData = async ({ _id }) => { - const response = await API.get({ - url: `/api/queries/${_id}`, - }) - return response.rows -} - /** * Executes a query against an external data connector. */ -export const executeQuery = async ({ queryId, params }) => { +export const executeQuery = async ({ queryId, parameters }) => { const response = await API.post({ url: `/api/queries/${queryId}`, body: { - params, + parameters, }, }) return response.rows diff --git a/packages/client/src/utils/buttonActions.js b/packages/client/src/utils/buttonActions.js index c6287bab70..4d0ff98dfb 100644 --- a/packages/client/src/utils/buttonActions.js +++ b/packages/client/src/utils/buttonActions.js @@ -28,10 +28,13 @@ const navigationHandler = action => { const queryExecutionHandler = async (action, context) => { const { datasourceId, queryId, queryParams } = action.parameters - // TODO: allow context based bindings for query params const enrichedQueryParameters = enrichDataBindings(queryParams, context) - await executeQuery({ datasourceId, queryId, params: enrichedQueryParameters }) + await executeQuery({ + datasourceId, + queryId, + parameters: enrichedQueryParameters, + }) } const handlerMap = { diff --git a/packages/server/src/api/controllers/query.js b/packages/server/src/api/controllers/query.js index 2972938528..89c4a5a08b 100644 --- a/packages/server/src/api/controllers/query.js +++ b/packages/server/src/api/controllers/query.js @@ -81,7 +81,7 @@ exports.execute = async function(ctx) { const queryTemplate = handlebars.compile(query.queryString) // TODO: Take the default params into account - const parsedQuery = queryTemplate(ctx.request.body.params) + const parsedQuery = queryTemplate(ctx.request.body.parameters) const Integration = integrations[datasource.source] @@ -94,31 +94,6 @@ exports.execute = async function(ctx) { ctx.body = response } -exports.fetchQuery = async function(ctx) { - const db = new CouchDB(ctx.user.appId) - - const query = await db.get(ctx.params.queryId) - - const datasource = await db.get(query.datasourceId) - - const Integration = integrations[datasource.source] - - if (!Integration) { - ctx.throw(400, "Integration type does not exist.") - return - } - - const rows = await new Integration( - datasource.config, - query.queryString - ).query() - - ctx.body = { - schema: query.schema, - rows, - } -} - exports.destroy = async function(ctx) { const db = new CouchDB(ctx.user.appId) await db.destroy(ctx.params.queryId) diff --git a/packages/server/src/api/routes/query.js b/packages/server/src/api/routes/query.js index 06597e52cf..c04bc14fb9 100644 --- a/packages/server/src/api/routes/query.js +++ b/packages/server/src/api/routes/query.js @@ -8,10 +8,9 @@ const router = Router() // TODO: sort out auth so apps have the right permissions router .get("/api/queries", authorized(BUILDER), queryController.fetch) - .get("/api/queries/:queryId", authorized(BUILDER), queryController.fetchQuery) .post("/api/queries", authorized(BUILDER), queryController.save) - .post("/api/queries/preview", authorized(BUILDER), queryController.preview) .post("/api/queries/:queryId", authorized(BUILDER), queryController.execute) + .post("/api/queries/preview", authorized(BUILDER), queryController.preview) .delete("/api/queries/:queryId", authorized(BUILDER), queryController.destroy) module.exports = router