Merge pull request #1132 from Budibase/repeater-filtering

Repeater Filtering + Drawer Fixes + Button Action Fixes
This commit is contained in:
Andrew Kingston 2021-02-22 07:04:08 -08:00 committed by GitHub
commit 4968357788
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
32 changed files with 451 additions and 1396 deletions

View File

@ -63,7 +63,7 @@
}
},
"dependencies": {
"@budibase/bbui": "^1.58.12",
"@budibase/bbui": "^1.58.13",
"@budibase/client": "^0.7.8",
"@budibase/colorpicker": "1.0.1",
"@budibase/string-templates": "^0.7.8",

View File

@ -231,6 +231,15 @@ export const getSchemaForDatasource = (datasource, isForm = false) => {
if (table) {
if (type === "view") {
schema = cloneDeep(table.views?.[datasource.name]?.schema)
// Some calc views don't include a "name" property inside the schema
if (schema) {
Object.keys(schema).forEach(field => {
if (!schema[field].name) {
schema[field].name = field
}
})
}
} else if (type === "query" && isForm) {
schema = {}
const params = table.parameters || []

View File

@ -10,10 +10,13 @@
export let value = ""
export let bindings = []
export let thin = true
export let title = "Bindings"
export let placeholder
let bindingDrawer
let tempValue = value
$: tempValue = value
$: readableValue = runtimeToReadableBinding(bindings, value)
const handleClose = () => {
@ -28,15 +31,15 @@
<div class="control">
<Input
thin
{thin}
value={readableValue}
on:change={event => onChange(event.target.value)}
placeholder="/screen" />
{placeholder} />
<div class="icon" on:click={bindingDrawer.show}>
<Icon name="lightning" />
</div>
</div>
<Drawer bind:this={bindingDrawer} title="Bindings">
<Drawer bind:this={bindingDrawer} {title}>
<div slot="description">
<Body extraSmall grey>
Add the objects on the left to enrich your text.
@ -57,7 +60,6 @@
<style>
.control {
flex: 1;
margin-left: var(--spacing-l);
position: relative;
}

View File

@ -114,8 +114,7 @@
bind:getCaretPosition
thin
bind:value
placeholder="Add text, or click the objects on the left to add them to
the textbox." />
placeholder="Add text, or click the objects on the left to add them to the textbox." />
{#if !valid}
<p class="syntax-error">
Current Handlebars syntax is invalid, please check the guide
@ -144,9 +143,12 @@
}
.text {
padding: var(--spacing-xl);
padding: var(--spacing-l);
font-family: var(--font-sans);
}
.text :global(textarea) {
min-height: 100px;
}
.text :global(p) {
margin: 0;
}

View File

@ -77,7 +77,7 @@
dropdownRight.hide()
}
function fetchDatasourceSchema(query) {
function fetchQueryDefinition(query) {
const source = $backendUiStore.datasources.find(
ds => ds._id === query.datasourceId
).source
@ -85,16 +85,17 @@
}
</script>
<div
<div class="container">
<div
class="dropdownbutton"
bind:this={anchorRight}
on:click={dropdownRight.show}>
<span>{value?.label ?? 'Choose option'}</span>
<Icon name="arrowdown" />
</div>
{#if value?.type === 'query'}
</div>
{#if value?.type === 'query'}
<i class="ri-settings-5-line" on:click={drawer.show} />
<Drawer title={'Query'} bind:this={drawer}>
<Drawer title={'Query Parameters'} bind:this={drawer}>
<div slot="buttons">
<Button
blue
@ -108,21 +109,24 @@
</Button>
</div>
<div class="drawer-contents" slot="body">
<IntegrationQueryEditor
datasource={$backendUiStore.datasources.find(ds => ds._id === value.datasourceId)}
query={value}
schema={fetchDatasourceSchema(value)}
editable={false} />
<Spacer large />
{#if value.parameters.length > 0}
<ParameterBuilder
bind:customParams={value.queryParams}
parameters={queries.find(query => query._id === value._id).parameters}
bindings={queryBindableProperties} />
{/if}
<!-- <Spacer large />-->
<IntegrationQueryEditor
height={200}
query={value}
schema={fetchQueryDefinition(value)}
datasource={$backendUiStore.datasources.find(ds => ds._id === value.datasourceId)}
editable={false} />
<Spacer large />
</div>
</Drawer>
{/if}
{/if}
</div>
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
<div class="dropdown">
<div class="title">
@ -197,6 +201,13 @@
</DropdownMenu>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.dropdownbutton {
background-color: var(--grey-2);
border: var(--border-transparent);
@ -259,8 +270,8 @@
}
.drawer-contents {
padding: var(--spacing-xl);
height: 40vh;
padding: var(--spacing-l);
height: calc(40vh - 2 * var(--spacing-l));
overflow-y: auto;
}

View File

@ -8,12 +8,19 @@
let addActionButton
let addActionDropdown
let selectedAction
let selectedAction = actions?.length ? actions[0] : null
$: selectedActionComponent =
selectedAction &&
actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
// Select the first action if we delete an action
$: {
if (selectedAction && !actions?.includes(selectedAction)) {
selectedAction = actions?.[0]
}
}
const deleteAction = index => {
actions.splice(index, 1)
actions = actions
@ -42,11 +49,10 @@
<div class="actions-list">
<div>
<div bind:this={addActionButton}>
<Spacer small />
<Button wide secondary on:click={addActionDropdown.show}>
Add Action
</Button>
<Spacer medium />
<Spacer small />
</div>
<DropdownMenu
bind:this={addActionDropdown}
@ -65,11 +71,12 @@
{#if actions && actions.length > 0}
{#each actions as action, index}
<div class="action-container">
<div class="action-header" on:click={selectAction(action)}>
<span class:selected={action === selectedAction}>
<div
class="action-header"
class:selected={action === selectedAction}
on:click={selectAction(action)}>
{index + 1}.
{action[EVENT_TYPE_KEY]}
</span>
</div>
<i
class="ri-close-fill"
@ -98,20 +105,22 @@
margin-top: var(--spacing-m);
}
.action-header > span {
.action-header {
margin-bottom: var(--spacing-m);
font-size: var(--font-size-xs);
color: var(--grey-7);
font-weight: 500;
}
.action-header > span:hover,
.selected {
.action-header:hover,
.action-header.selected {
cursor: pointer;
font-weight: 500;
color: var(--ink);
}
.actions-list {
border-right: var(--border-light);
padding: var(--spacing-s);
padding: var(--spacing-l);
}
.available-action {
@ -127,7 +136,6 @@
.actions-container {
height: 40vh;
display: grid;
grid-gap: var(--spacing-m);
grid-template-columns: 260px 1fr;
grid-auto-flow: column;
min-height: 0;
@ -136,13 +144,16 @@
}
.action-container {
border-top: var(--border-light);
border-bottom: 1px solid var(--grey-1);
display: flex;
align-items: center;
}
.action-container:last-child {
border-bottom: none;
}
.selected-action-container {
padding: var(--spacing-xl);
padding: var(--spacing-l);
}
a {

View File

@ -1,207 +0,0 @@
<script>
import { TextButton, Body, DropdownMenu, ModalContent } from "@budibase/bbui"
import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
import actionTypes from "./actions"
import { createEventDispatcher } from "svelte"
import { automationStore } from "builderStore"
const dispatch = createEventDispatcher()
const eventTypeKey = "##eventHandlerType"
export let event
let addActionButton
let addActionDropdown
let selectedAction
$: actions = event || []
$: selectedActionComponent =
selectedAction &&
actionTypes.find(t => t.name === selectedAction[eventTypeKey]).component
const deleteAction = index => {
actions.splice(index, 1)
actions = actions
}
const addAction = actionType => () => {
const newAction = {
parameters: {},
[eventTypeKey]: actionType.name,
}
actions.push(newAction)
selectedAction = newAction
actions = actions
addActionDropdown.hide()
}
const selectAction = action => () => {
selectedAction = action
}
const saveEventData = async () => {
// e.g. The Trigger Automation action exposes beforeSave, so it can
// create any automations it needs to
for (let action of actions) {
if (action[eventTypeKey] === "Trigger Automation") {
await createAutomation(action.parameters)
}
}
dispatch("change", actions)
}
// called by the parent modal when actions are saved
const createAutomation = async parameters => {
if (parameters.automationId || !parameters.newAutomationName) return
await automationStore.actions.create({ name: parameters.newAutomationName })
const appActionDefinition = $automationStore.blockDefinitions.TRIGGER.APP
const newBlock = $automationStore.selectedAutomation.constructBlock(
"TRIGGER",
"APP",
appActionDefinition
)
newBlock.inputs = {
fields: Object.entries(parameters.fields).reduce(
(fields, [key, value]) => {
fields[key] = value.type
return fields
},
{}
),
}
automationStore.actions.addBlockToAutomation(newBlock)
await automationStore.actions.save($automationStore.selectedAutomation)
parameters.automationId = $automationStore.selectedAutomation.automation._id
delete parameters.newAutomationName
}
</script>
<ModalContent title="Actions" confirmText="Save" onConfirm={saveEventData}>
<div slot="header">
<div bind:this={addActionButton}>
<TextButton text small blue on:click={addActionDropdown.show}>
<div style="height: 20px; width: 20px;">
<AddIcon />
</div>
Add Action
</TextButton>
</div>
<DropdownMenu
bind:this={addActionDropdown}
anchor={addActionButton}
align="right">
<div class="available-actions-container">
{#each actionTypes as actionType}
<div class="available-action" on:click={addAction(actionType)}>
<span>{actionType.name}</span>
</div>
{/each}
</div>
</DropdownMenu>
</div>
<div class="actions-container">
{#if actions && actions.length > 0}
{#each actions as action, index}
<div class="action-container">
<div class="action-header" on:click={selectAction(action)}>
<Body small lh>{index + 1}. {action[eventTypeKey]}</Body>
<div class="row-expander" class:rotate={action !== selectedAction}>
<ArrowDownIcon />
</div>
</div>
{#if action === selectedAction}
<div class="selected-action-container">
<svelte:component
this={selectedActionComponent}
parameters={selectedAction.parameters} />
<div class="delete-action-button">
<TextButton text medium on:click={() => deleteAction(index)}>
Delete
</TextButton>
</div>
</div>
{/if}
</div>
{/each}
{/if}
</div>
<div slot="footer">
<a href="https://docs.budibase.com">Learn more about Actions</a>
</div>
</ModalContent>
<style>
.action-header {
display: flex;
flex-direction: row;
align-items: center;
}
.action-header > p {
flex: 1;
}
.row-expander {
height: 30px;
width: 30px;
}
.available-action {
padding: var(--spacing-m);
font-size: var(--font-size-m);
cursor: pointer;
}
.available-action:hover {
background: var(--grey-2);
}
.actions-container {
flex: 1;
min-height: 0;
padding-top: 0;
border: var(--border-light);
border-width: 0 0 1px 0;
overflow-y: auto;
}
.action-container {
border: var(--border-light);
border-width: 1px 0 0 0;
}
.selected-action-container {
padding-bottom: var(--spacing-s);
padding-top: var(--spacing-s);
}
.delete-action-button {
padding-top: var(--spacing-l);
display: flex;
justify-content: flex-end;
flex-direction: row;
}
a {
flex: 1;
color: var(--grey-5);
font-size: var(--font-size-s);
text-decoration: none;
}
a:hover {
color: var(--blue);
}
.rotate :global(svg) {
transform: rotate(90deg);
}
</style>

View File

@ -17,7 +17,9 @@
const automationsToCreate = value.filter(
action => action["##eventHandlerType"] === "Trigger Automation"
)
automationsToCreate.forEach(action => createAutomation(action.parameters))
for (let action of automationsToCreate) {
await createAutomation(action.parameters)
}
dispatch("change", value)
notifier.success("Component actions saved.")
@ -27,11 +29,8 @@
// called by the parent modal when actions are saved
const createAutomation = async parameters => {
if (parameters.automationId || !parameters.newAutomationName) return
await automationStore.actions.create({ name: parameters.newAutomationName })
const appActionDefinition = $automationStore.blockDefinitions.TRIGGER.APP
const newBlock = $automationStore.selectedAutomation.constructBlock(
"TRIGGER",
"APP",
@ -39,19 +38,14 @@
)
newBlock.inputs = {
fields: Object.entries(parameters.fields).reduce(
(fields, [key, value]) => {
fields[key] = value.type
fields: Object.keys(parameters.fields).reduce((fields, key) => {
fields[key] = "string"
return fields
},
{}
),
}, {}),
}
automationStore.actions.addBlockToAutomation(newBlock)
await automationStore.actions.save($automationStore.selectedAutomation)
parameters.automationId = $automationStore.selectedAutomation.automation._id
delete parameters.newAutomationName
}

View File

@ -37,8 +37,8 @@
a List
</div>
{:else}
<Label size="m" color="dark">Datasource</Label>
<Select secondary bind:value={parameters.providerId}>
<Label small>Datasource</Label>
<Select thin secondary bind:value={parameters.providerId}>
<option value="" />
{#each dataProviderComponents as provider}
<option value={provider._id}>{provider._instanceName}</option>
@ -50,22 +50,15 @@
<style>
.root {
display: grid;
column-gap: var(--spacing-s);
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto;
grid-template-columns: auto 1fr;
align-items: baseline;
}
.root :global(> div:nth-child(2)) {
grid-column-start: 2;
grid-column-end: 6;
}
.cannot-use {
color: var(--red);
font-size: var(--font-size-s);
text-align: center;
width: 70%;
margin: auto;
}
</style>

View File

@ -3,63 +3,57 @@
import { store, backendUiStore, currentAsset } from "builderStore"
import { getBindableProperties } from "builderStore/dataBinding"
import ParameterBuilder from "components/integration/QueryParameterBuilder.svelte"
import IntegrationQueryEditor from "components/integration/index.svelte"
export let parameters
$: query = $backendUiStore.queries.find(q => q._id === parameters.queryId)
$: datasource = $backendUiStore.datasources.find(
ds => ds._id === parameters.datasourceId
)
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
).map(property => ({
...property,
category: property.type === "instance" ? "Component" : "Table",
label: property.readableBinding,
path: property.runtimeBinding,
}))
)
$: query =
parameters.queryId &&
$backendUiStore.queries.find(query => query._id === parameters.queryId)
function fetchQueryDefinition(query) {
const source = $backendUiStore.datasources.find(
ds => ds._id === query.datasourceId
).source
return $backendUiStore.integrations[source].query[query.queryVerb]
}
</script>
<div class="root">
<Label size="m" color="dark">Datasource</Label>
<Select thin secondary bind:value={parameters.datasourceId}>
<Label small>Datasource</Label>
<Select thin secondary bind:value={parameters.datasourceId}>
<option value="" />
{#each $backendUiStore.datasources as datasource}
<option value={datasource._id}>{datasource.name}</option>
{/each}
</Select>
</Select>
<Spacer medium />
<Spacer medium />
{#if parameters.datasourceId}
<Label size="m" color="dark">Query</Label>
{#if parameters.datasourceId}
<Label small>Query</Label>
<Select thin secondary bind:value={parameters.queryId}>
<option value="" />
{#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
<option value={query._id}>{query.name}</option>
{/each}
</Select>
{/if}
{/if}
<Spacer medium />
<Spacer medium />
{#if query?.parameters?.length > 0}
{#if query?.parameters?.length > 0}
<ParameterBuilder
bind:customParams={parameters.queryParams}
parameters={query.parameters}
bindings={bindableProperties} />
{#if query.fields.sql}
<pre>{query.fields.queryString}</pre>
{/if}
{/if}
</div>
<style>
.root {
padding: var(--spacing-m);
}
</style>
<IntegrationQueryEditor
height={200}
{query}
schema={fetchQueryDefinition(query)}
editable={false} />
{/if}

View File

@ -13,8 +13,10 @@
</script>
<div class="root">
<Label size="m" color="dark">Screen</Label>
<Label small>Screen</Label>
<DrawerBindableInput
title="Destination URL"
placeholder="/screen"
value={parameters.url}
on:change={value => (parameters.url = value.detail)}
{bindings} />

View File

@ -1,37 +0,0 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { currentAsset, store } from "builderStore"
import { getDataProviderComponents } from "builderStore/dataBinding"
export let parameters
$: dataProviders = getDataProviderComponents(
$currentAsset,
$store.selectedComponentId
)
</script>
<div class="root">
<Label size="m" color="dark">Form</Label>
<Select secondary bind:value={parameters.componentId}>
<option value="" />
{#if dataProviders}
{#each dataProviders as component}
<option value={component._id}>{component._instanceName}</option>
{/each}
{/if}
</Select>
</div>
<style>
.root {
display: flex;
flex-direction: row;
align-items: baseline;
}
.root :global(> div) {
flex: 1;
margin-left: var(--spacing-l);
}
</style>

View File

@ -1,115 +1,89 @@
<script>
import {
DataList,
Label,
TextButton,
Spacer,
Select,
Input,
} from "@budibase/bbui"
import { Label, TextButton, Spacer, Select, Input } from "@budibase/bbui"
import { store, currentAsset } from "builderStore"
import {
getBindableProperties,
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import { getBindableProperties } from "builderStore/dataBinding"
import { CloseCircleIcon, AddIcon } from "components/common/Icons"
import { createEventDispatcher } from "svelte"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
const dispatch = createEventDispatcher()
export let parameterFields
export let schemaFields
export let fieldLabel = "Column"
export let valueLabel = "Value"
const emptyField = () => ({ name: "", value: "" })
let fields = Object.entries(parameterFields || {})
$: onChange(fields)
$: bindableProperties = getBindableProperties(
$currentAsset,
$store.selectedComponentId
)
// this statement initialises fields from parameters.fields
$: fields =
fields ||
Object.keys(parameterFields || {}).map(name => ({
name,
value:
(parameterFields &&
runtimeToReadableBinding(
bindableProperties,
parameterFields[name].value
)) ||
"",
}))
const addField = () => {
const newFields = fields.filter(f => f.name)
newFields.push(emptyField())
fields = newFields
rebuildParameters()
fields = [...fields.filter(field => field[0]), ["", ""]]
}
const removeField = field => () => {
fields = fields.filter(f => f !== field)
rebuildParameters()
const removeField = name => {
fields = fields.filter(field => field[0] !== name)
}
const rebuildParameters = () => {
// rebuilds paramters.fields every time a field name or value is added
// as UI below is bound to "fields" array, but we need to output a { key: value }
const newParameterFields = {}
for (let field of fields) {
if (field.name) {
// value and type is needed by the client, so it can parse
// a string into a correct type
newParameterFields[field.name] = {
type: schemaFields
? schemaFields.find(f => f.name === field.name).type
: "string",
value: readableToRuntimeBinding(bindableProperties, field.value),
}
}
}
dispatch("fieldschanged", newParameterFields)
const updateFieldValue = (idx, value) => {
fields[idx][1] = value
fields = fields
}
// just wraps binding in {{ ... }}
const toBindingExpression = bindingPath => `{{ ${bindingPath} }}`
const updateFieldName = (idx, name) => {
fields[idx][0] = name
fields = fields
}
const onChange = fields => {
const newParamFields = {}
fields
.filter(field => field[0])
.forEach(([field, value]) => {
newParamFields[field] = value
})
dispatch("change", newParamFields)
}
</script>
{#if fields}
{#each fields as field}
<Label size="m" color="dark">{fieldLabel}</Label>
{#each fields as field, idx}
<Label small>{fieldLabel}</Label>
{#if schemaFields}
<Select secondary bind:value={field.name} on:blur={rebuildParameters}>
<Select
thin
secondary
value={field[0]}
on:change={event => updateFieldName(idx, event.target.value)}>
<option value="" />
{#each schemaFields as schemaField}
<option value={schemaField.name}>{schemaField.name}</option>
{/each}
</Select>
{:else}
<Input secondary bind:value={field.name} on:blur={rebuildParameters} />
<Input
thin
secondary
value={field[0]}
on:change={event => updateFieldName(idx, event.target.value)} />
{/if}
<Label size="m" color="dark">Value</Label>
<DataList secondary bind:value={field.value} on:blur={rebuildParameters}>
<option value="" />
{#each bindableProperties as bindableProp}
<option value={toBindingExpression(bindableProp.readableBinding)}>
{bindableProp.readableBinding}
</option>
{/each}
</DataList>
<Label small>{valueLabel}</Label>
<DrawerBindableInput
title={`Value for "${field[0]}"`}
value={field[1]}
bindings={bindableProperties}
on:change={event => updateFieldValue(idx, event.detail)} />
<div class="remove-field-container">
<TextButton text small on:click={removeField(field)}>
<TextButton text small on:click={() => removeField(field[0])}>
<CloseCircleIcon />
</TextButton>
</div>
{/each}
<div>
<Spacer small />
<TextButton text small blue on:click={addField}>
Add
{fieldLabel}

View File

@ -37,8 +37,8 @@
Repeater
</div>
{:else}
<Label size="m" color="dark">Datasource</Label>
<Select secondary bind:value={parameters.providerId}>
<Label small>Datasource</Label>
<Select thin secondary bind:value={parameters.providerId}>
<option value="" />
{#each dataProviderComponents as provider}
<option value={provider._id}>{provider._instanceName}</option>
@ -49,7 +49,7 @@
<SaveFields
parameterFields={parameters.fields}
{schemaFields}
on:fieldschanged={onFieldsChanged} />
on:change={onFieldsChanged} />
{/if}
{/if}
</div>
@ -57,7 +57,7 @@
<style>
.root {
display: grid;
column-gap: var(--spacing-s);
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto;
align-items: baseline;
@ -71,8 +71,6 @@
.cannot-use {
color: var(--red);
font-size: var(--font-size-s);
text-align: center;
width: 70%;
margin: auto;
}
</style>

View File

@ -27,13 +27,11 @@
schema,
}
})
$: hasAutomations = automations && automations.length > 0
$: selectedAutomation =
parameters &&
parameters.automationId &&
automations.find(a => a._id === parameters.automationId)
$: selectedAutomation = automations?.find(
a => a._id === parameters?.automationId
)
$: selectedSchema = selectedAutomation?.schema
const onFieldsChanged = e => {
parameters.fields = e.detail
@ -42,95 +40,98 @@
const setNew = () => {
automationStatus = AUTOMATION_STATUS.NEW
parameters.automationId = undefined
parameters.fields = {}
}
const setExisting = () => {
automationStatus = AUTOMATION_STATUS.EXISTING
parameters.newAutomationName = ""
parameters.fields = {}
parameters.automationId = automations[0]?._id
}
</script>
<div class="root">
<div class="radios">
<div class="radio-container" on:click={setNew}>
<input
type="radio"
value={AUTOMATION_STATUS.NEW}
bind:group={automationStatus}
disabled={!hasAutomations} />
<Label disabled={!hasAutomations}>Create a new automation</Label>
bind:group={automationStatus} />
<Label small>Create a new automation</Label>
</div>
<div class="radio-container" on:click={setExisting}>
<div class="radio-container" on:click={hasAutomations ? setExisting : null}>
<input
type="radio"
value={AUTOMATION_STATUS.EXISTING}
bind:group={automationStatus}
disabled={!hasAutomations} />
<Label disabled={!hasAutomations}>Use an existing automation</Label>
<Label small grey={!hasAutomations}>Use an existing automation</Label>
</div>
</div>
<Label size="m" color="dark">Automation</Label>
<div class="fields">
<Label small>Automation</Label>
{#if automationStatus === AUTOMATION_STATUS.EXISTING}
<Select
thin
secondary
bind:value={parameters.automationId}
placeholder="Choose automation">
<option value="" />
{#each automations as automation}
<option value={automation._id}>{automation.name}</option>
{/each}
</Select>
{:else}
<Input
secondary
thin
bind:value={parameters.newAutomationName}
placeholder="Enter automation name" />
{/if}
{#key parameters.automationId}
<SaveFields
schemaFields={automationStatus === AUTOMATION_STATUS.EXISTING && selectedAutomation && selectedAutomation.schema}
schemaFields={selectedSchema}
parameterFields={parameters.fields}
fieldLabel="Field"
on:fieldschanged={onFieldsChanged} />
on:change={onFieldsChanged} />
{/key}
</div>
</div>
<style>
.root {
.fields {
display: grid;
column-gap: var(--spacing-s);
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto;
align-items: baseline;
}
.root :global(> div:nth-child(4)) {
.fields :global(> div:nth-child(2)) {
grid-column: 2 / span 4;
}
.radios,
.radio-container {
display: grid;
grid-template-columns: auto 1fr;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
}
.radios {
gap: var(--spacing-m);
margin-bottom: var(--spacing-l);
}
.radio-container {
gap: var(--spacing-m);
}
.radio-container :global(label) {
margin: 0;
}
.radio-container:nth-child(1) {
grid-column: 1 / span 2;
}
.radio-container:nth-child(2) {
grid-column: 3 / span 3;
}
.radio-container :global(> label) {
margin-left: var(--spacing-m);
}
.radio-container > input {
margin-bottom: var(--spacing-s);
}
.radio-container > input:focus {
outline: none;
input[type="radio"]:checked {
background: var(--blue);
}
</style>

View File

@ -13,8 +13,8 @@
</script>
<div class="root">
<Label size="m" color="dark">Form</Label>
<Select secondary bind:value={parameters.componentId}>
<Label small>Form</Label>
<Select thin secondary bind:value={parameters.componentId}>
<option value="" />
{#if actionProviders}
{#each actionProviders as component}

View File

@ -4,7 +4,6 @@ import DeleteRow from "./DeleteRow.svelte"
import ExecuteQuery from "./ExecuteQuery.svelte"
import TriggerAutomation from "./TriggerAutomation.svelte"
import ValidateForm from "./ValidateForm.svelte"
import RefreshDatasource from "./RefreshDatasource.svelte"
// defines what actions are available, when adding a new one
// the component is the setup panel for the action
@ -36,8 +35,4 @@ export default [
name: "Validate Form",
component: ValidateForm,
},
{
name: "Refresh Datasource",
component: RefreshDatasource,
},
]

View File

@ -0,0 +1,77 @@
<script>
import { Button, Drawer, Spacer, Body } from "@budibase/bbui"
import { createEventDispatcher } from "svelte"
import { notifier } from "builderStore/store/notifications"
import {
getDatasourceForProvider,
getSchemaForDatasource,
} from "builderStore/dataBinding"
import SaveFields from "./EventsEditor/actions/SaveFields.svelte"
const dispatch = createEventDispatcher()
export let value = {}
export let componentInstance
let drawer
let tempValue = value
$: schemaFields = getSchemaFields(componentInstance)
const getSchemaFields = component => {
const datasource = getDatasourceForProvider(component)
const { schema } = getSchemaForDatasource(datasource)
return Object.values(schema || {})
}
const saveFilter = async () => {
dispatch("change", tempValue)
notifier.success("Filters saved.")
drawer.hide()
}
const onFieldsChanged = event => {
tempValue = event.detail
}
</script>
<Button secondary wide on:click={drawer.show}>Define Filters</Button>
<Drawer bind:this={drawer} title={'Filtering'}>
<heading slot="buttons">
<Button thin blue on:click={saveFilter}>Save</Button>
</heading>
<div slot="body">
<div class="root">
<Body small grey>
{#if !Object.keys(tempValue || {}).length}
Add your first filter column.
{:else}
Results are filtered to only those which match all of the following
constaints.
{/if}
</Body>
<Spacer medium />
<div class="fields">
<SaveFields
parameterFields={value}
{schemaFields}
valueLabel="Equals"
on:change={onFieldsChanged} />
</div>
</div>
</div>
</Drawer>
<style>
.root {
padding: var(--spacing-l);
min-height: calc(40vh - 2 * var(--spacing-l));
}
.fields {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: auto 1fr auto 1fr auto;
align-items: baseline;
}
</style>

View File

@ -7,6 +7,7 @@
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import BindingPanel from "components/design/PropertiesPanel/BindingPanel.svelte"
import { capitalise } from "../../../../helpers"
export let label = ""
export let bindable = true
@ -88,9 +89,7 @@
on:click={bindingDrawer.show}>
<Icon name="lightning" />
</div>
{/if}
</div>
<Drawer bind:this={bindingDrawer} title="Bindings">
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
<div slot="description">
<Body extraSmall grey>
Add the objects on the left to enrich your text.
@ -107,7 +106,9 @@
on:update={e => (temporaryBindableValue = e.detail)}
{bindableProperties} />
</div>
</Drawer>
</Drawer>
{/if}
</div>
<style>
.property-control {

View File

@ -18,6 +18,7 @@
import MultiFieldSelect from "./PropertyControls/MultiFieldSelect.svelte"
import SchemaSelect from "./PropertyControls/SchemaSelect.svelte"
import EventsEditor from "./PropertyControls/EventsEditor"
import FilterEditor from "./PropertyControls/FilterEditor.svelte"
import DetailScreenSelect from "./PropertyControls/DetailScreenSelect.svelte"
import { IconSelect } from "./PropertyControls/IconSelect"
import ColorPicker from "./PropertyControls/ColorPicker.svelte"
@ -71,6 +72,7 @@
field: FieldSelect,
multifield: MultiFieldSelect,
schema: SchemaSelect,
filter: FilterEditor,
"field/string": StringFieldSelect,
"field/number": NumberFieldSelect,
"field/options": OptionsFieldSelect,

View File

@ -18,6 +18,7 @@
export let lineNumbers = true
export let tab = true
export let mode
export let editorHeight = 500
// export let parameters = []
let completions = handlebarsCompletions()
@ -171,17 +172,21 @@
}
</script>
<Label small>{label}</Label>
<Spacer medium />
<textarea tabindex="0" bind:this={refs.editor} readonly {value} />
{#if label}
<Label small>{label}</Label>
<Spacer medium />
{/if}
<div style={`--code-mirror-height: ${editorHeight}px`}>
<textarea tabindex="0" bind:this={refs.editor} readonly {value} />
</div>
<style>
textarea {
visibility: hidden;
}
:global(.CodeMirror) {
height: 500px !important;
div :global(.CodeMirror) {
height: var(--code-mirror-height) !important;
border-radius: var(--border-radius-s);
font-family: monospace !important;
line-height: 1.3;

View File

@ -1,13 +1,5 @@
<script>
import {
Button,
TextArea,
Label,
Input,
Heading,
Select,
Spacer,
} from "@budibase/bbui"
import { Label, Spacer, Input } from "@budibase/bbui"
import Editor from "./QueryEditor.svelte"
import KeyValueBuilder from "./KeyValueBuilder.svelte"

View File

@ -1,10 +1,10 @@
<script>
import { Body, Button, Input, Heading, Spacer } from "@budibase/bbui"
import BindableInput from "components/common/BindableInput.svelte"
import {
readableToRuntimeBinding,
runtimeToReadableBinding,
} from "builderStore/dataBinding"
import DrawerBindableInput from "components/common/DrawerBindableInput.svelte"
export let bindable = true
export let parameters = []
@ -37,8 +37,13 @@
{/if}
</div>
<Body small grey>
{#if !bindable}
Parameters come in two parts: the parameter name, and a default/fallback
value.
{:else}
Enter a value for each parameter. The default values will be used for any
values left blank.
{/if}
</Body>
<Spacer large />
<div class="parameters" class:bindable>
@ -54,9 +59,9 @@
disabled={bindable}
bind:value={parameter.default} />
{#if bindable}
<BindableInput
<DrawerBindableInput
title={`Query parameter "${parameter.name}"`}
placeholder="Value"
type="string"
thin
on:change={evt => onBindingChange(parameter.name, evt.detail)}
value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}

View File

@ -1,5 +1,4 @@
<script>
import { onMount } from "svelte"
import { goto } from "@sveltech/routify"
import {
Select,
@ -7,7 +6,6 @@
Body,
Label,
Input,
TextArea,
Heading,
Spacer,
Switcher,
@ -208,7 +206,9 @@
{#if tab === 'JSON'}
<pre class="preview">
{#if !data[0]}
Please run your query to fetch some data.
{:else}
{JSON.stringify(data[0], undefined, 2)}
{/if}

View File

@ -1,9 +1,7 @@
<script>
import { onMount } from "svelte"
import { TextArea, Label, Input, Heading, Spacer } from "@budibase/bbui"
import Editor from "./QueryEditor.svelte"
import ParameterBuilder from "./QueryParameterBuilder.svelte"
import FieldsBuilder from "./QueryFieldsBuilder.svelte"
import { Label, Input } from "@budibase/bbui"
const QueryTypes = {
SQL: "sql",
@ -15,6 +13,7 @@
export let datasource
export let schema
export let editable = true
export let height = 500
$: urlDisplay =
schema.urlDisplay &&
@ -29,6 +28,7 @@
{#key query._id}
{#if schema.type === QueryTypes.SQL}
<Editor
editorHeight={height}
label="Query"
mode="sql"
on:change={updateQuery}
@ -37,6 +37,7 @@
parameters={query.parameters} />
{:else if schema.type === QueryTypes.JSON}
<Editor
editorHeight={height}
label="Query"
mode="json"
on:change={updateQuery}

File diff suppressed because it is too large Load Diff

View File

@ -15,7 +15,7 @@ export const createDatasourceStore = () => {
let datasourceIds = []
// Extract table ID
if (datasource.type === "table") {
if (datasource.type === "table" || datasource.type === "view") {
if (datasource.tableId) {
datasourceIds.push(datasource.tableId)
}

View File

@ -8,8 +8,8 @@ const saveRowHandler = async (action, context) => {
if (providerId) {
let draft = context[providerId]
if (fields) {
for (let [key, entry] of Object.entries(fields)) {
draft[key] = entry.value
for (let [field, value] of Object.entries(fields)) {
draft[field] = value
}
}
await saveRow(draft)
@ -26,11 +26,7 @@ const deleteRowHandler = async action => {
const triggerAutomationHandler = async action => {
const { fields } = action.parameters
if (fields) {
const params = {}
for (let field in fields) {
params[field] = fields[field].value
}
await triggerAutomation(action.parameters.automationId, params)
await triggerAutomation(action.parameters.automationId, fields)
}
}

View File

@ -118,6 +118,11 @@
"label": "Empty Text",
"key": "noRowsMessage",
"defaultValue": "No rows found."
},
{
"type": "filter",
"label": "Filtering",
"key": "filter"
}
]
},

View File

@ -40,7 +40,7 @@
"gitHead": "1a80b09fd093f2599a68f7db72ad639dd50922dd",
"dependencies": {
"@adobe/spectrum-css-workflow-icons": "^1.1.0",
"@budibase/bbui": "^1.58.5",
"@budibase/bbui": "^1.58.13",
"@budibase/svelte-ag-grid": "^0.0.16",
"@spectrum-css/actionbutton": "^1.0.0-beta.1",
"@spectrum-css/button": "^3.0.0-beta.6",

View File

@ -4,6 +4,7 @@
export let datasource
export let noRowsMessage
export let filter
const { API, styleable, Provider, builderStore, ActionTypes } = getContext(
"sdk"
@ -13,6 +14,7 @@
let loaded = false
$: fetchData(datasource)
$: filteredRows = filterRows(rows, filter)
$: actions = [
{
type: ActionTypes.RefreshDatasource,
@ -21,21 +23,36 @@
},
]
async function fetchData(datasource) {
const fetchData = async datasource => {
if (!isEmpty(datasource)) {
rows = await API.fetchDatasource(datasource)
}
loaded = true
}
const filterRows = (rows, filter) => {
if (!Object.keys(filter || {}).length) {
return rows
}
let filteredData = [...rows]
Object.entries(filter).forEach(([field, value]) => {
if (value != null && value !== "") {
filteredData = filteredData.filter(row => {
return row[field] === value
})
}
})
return filteredData
}
</script>
<Provider {actions}>
<div use:styleable={$component.styles}>
{#if rows.length > 0}
{#if filteredRows.length > 0}
{#if $component.children === 0 && $builderStore.inBuilder}
<p><i class="ri-image-line" />Add some components to display.</p>
{:else}
{#each rows as row}
{#each filteredRows as row}
<Provider data={row}>
<slot />
</Provider>

View File

@ -44,10 +44,10 @@
lodash "^4.17.19"
to-fast-properties "^2.0.0"
"@budibase/bbui@^1.58.5":
version "1.58.5"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.5.tgz#c9ce712941760825c7774a1de77594e989db4561"
integrity sha512-0j1I7BetJ2GzB1BXKyvvlkuFphLmADJh2U/Ihubwxx5qUDY8REoVzLgAB4c24zt0CGVTF9VMmOoMLd0zD0QwdQ==
"@budibase/bbui@^1.58.13":
version "1.58.13"
resolved "https://registry.yarnpkg.com/@budibase/bbui/-/bbui-1.58.13.tgz#59df9c73def2d81c75dcbd2266c52c19db88dbd7"
integrity sha512-Zk6CKXdBfKsTVzA1Xs5++shdSSZLfphVpZuKVbjfzkgtuhyH7ruucexuSHEpFsxjW5rEKgKIBoRFzCK5vPvN0w==
dependencies:
markdown-it "^12.0.2"
quill "^1.3.7"