This commit is contained in:
Martin McKeaveney 2021-01-15 13:42:55 +00:00
parent 4b941e7a9f
commit 0ac322b11b
17 changed files with 132 additions and 105 deletions

View File

@ -50,7 +50,10 @@
function addBlockToAutomation(stepId, blockDefinition) { function addBlockToAutomation(stepId, blockDefinition) {
const newBlock = $automationStore.selectedAutomation.constructBlock( const newBlock = $automationStore.selectedAutomation.constructBlock(
selectedTab, stepId, blockDefinition) selectedTab,
stepId,
blockDefinition
)
automationStore.actions.addBlockToAutomation(newBlock) automationStore.actions.addBlockToAutomation(newBlock)
closePopover() closePopover()
if (stepId === "WEBHOOK") { if (stepId === "WEBHOOK") {

View File

@ -36,9 +36,7 @@
</script> </script>
<div class="root"> <div class="root">
<div class="add-field"> <div class="add-field"><i class="ri-add-line" on:click={addField} /></div>
<i class="ri-add-line" on:click={addField} />
</div>
<div class="spacer" /> <div class="spacer" />
{#each fieldsArray as field} {#each fieldsArray as field}
<div class="field"> <div class="field">
@ -57,13 +55,11 @@
<option>datetime</option> <option>datetime</option>
</Select> </Select>
<i class="remove-field ri-delete-bin-line" <i
class="remove-field ri-delete-bin-line"
on:click={() => removeField(field.name)} /> on:click={() => removeField(field.name)} />
</div> </div>
{/each} {/each}
</div> </div>
<style> <style>
@ -105,7 +101,8 @@
} }
.field :global(input) { .field :global(input) {
padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs) var(--spacing-m); padding: var(--spacing-m) var(--spacing-xl) var(--spacing-xs)
var(--spacing-m);
font-size: var(--font-size-s); font-size: var(--font-size-s);
font-weight: bold; font-weight: bold;
} }
@ -129,5 +126,4 @@
.add-field > i { .add-field > i {
cursor: pointer; cursor: pointer;
} }
</style> </style>

View File

@ -16,7 +16,11 @@
function checkValid(evt) { function checkValid(evt) {
const datasourceName = evt.target.value const datasourceName = evt.target.value
if ($backendUiStore.datasources?.some(datasource => datasource.name === datasourceName)) { if (
$backendUiStore.datasources?.some(
datasource => datasource.name === datasourceName
)
) {
error = `Datasource with name ${datasourceName} already exists. Please choose another name.` error = `Datasource with name ${datasourceName} already exists. Please choose another name.`
return return
} }
@ -30,7 +34,7 @@
const response = await backendUiStore.actions.datasources.save({ const response = await backendUiStore.actions.datasources.save({
name, name,
source: type, source: type,
config config,
}) })
notifier.success(`Datasource ${name} created successfully.`) notifier.success(`Datasource ${name} created successfully.`)
analytics.captureEvent("Datasource Created", { name }) analytics.captureEvent("Datasource Created", { name })

View File

@ -16,7 +16,11 @@
function checkValid(evt) { function checkValid(evt) {
const datasourceName = evt.target.value const datasourceName = evt.target.value
if ($backendUiStore.datasources?.some(datasource => datasource.name === datasourceName)) { if (
$backendUiStore.datasources?.some(
datasource => datasource.name === datasourceName
)
) {
error = `Datasource with name ${tableName} already exists. Please choose another name.` error = `Datasource with name ${tableName} already exists. Please choose another name.`
return return
} }
@ -30,7 +34,7 @@
await backendUiStore.actions.datasources.save({ await backendUiStore.actions.datasources.save({
name, name,
source: type, source: type,
config config,
}) })
notifier.success(`Datasource ${name} created successfully.`) notifier.success(`Datasource ${name} created successfully.`)
analytics.captureEvent("Datasource Created", { name }) analytics.captureEvent("Datasource Created", { name })

View File

@ -49,8 +49,7 @@
okText="Delete Query" okText="Delete Query"
onOk={deleteQuery} onOk={deleteQuery}
title="Confirm Deletion"> title="Confirm Deletion">
Are you sure you wish to delete this query? Are you sure you wish to delete this query? This action cannot be undone.
This action cannot be undone.
</ConfirmDialog> </ConfirmDialog>
<style> <style>

View File

@ -2,7 +2,14 @@
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { backendUiStore, store } from "builderStore" import { backendUiStore, store } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import { Input, Label, ModalContent, Button, Spacer, Toggle } from "@budibase/bbui" import {
Input,
Label,
ModalContent,
Button,
Spacer,
Toggle,
} from "@budibase/bbui"
import TableDataImport from "../TableDataImport.svelte" import TableDataImport from "../TableDataImport.svelte"
import analytics from "analytics" import analytics from "analytics"
import screenTemplates from "builderStore/store/screenTemplates" import screenTemplates from "builderStore/store/screenTemplates"
@ -35,7 +42,7 @@
let newTable = { let newTable = {
name, name,
schema: dataImport.schema || {}, schema: dataImport.schema || {},
dataImport dataImport,
} }
// Only set primary display if defined // Only set primary display if defined
@ -92,4 +99,5 @@
<div> <div>
<Label grey extraSmall>Create Table from CSV (Optional)</Label> <Label grey extraSmall>Create Table from CSV (Optional)</Label>
<TableDataImport bind:dataImport /> <TableDataImport bind:dataImport />
</div>
</ModalContent> </ModalContent>

View File

@ -32,9 +32,7 @@
<slot name="icon" /> <slot name="icon" />
{#if icon} {#if icon}
<div class="icon"> <div class="icon"><i class={icon} /></div>
<i class={icon} />
</div>
{/if} {/if}
<div class="text">{text}</div> <div class="text">{text}</div>
{#if withActions} {#if withActions}

View File

@ -5,7 +5,7 @@
Label, Label,
Input, Input,
Heading, Heading,
Select Select,
} from "@budibase/bbui" } from "@budibase/bbui"
import Editor from "./QueryEditor.svelte" import Editor from "./QueryEditor.svelte"
@ -45,13 +45,12 @@
value={fields.customData} /> value={fields.customData} />
{/if} {/if}
<style> <style>
.field { .field {
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
display: grid; display: grid;
grid-template-columns: 1fr 2%; grid-template-columns: 1fr 2%;
grid-gap: var(--spacing-m); grid-gap: var(--spacing-m);
align-items: center; align-items: center;
} }
</style> </style>

View File

@ -61,7 +61,6 @@
Add Parameter Add Parameter
</Button> </Button>
{/if} {/if}
</section> </section>
<style> <style>

View File

@ -158,8 +158,7 @@
<IntegrationQueryEditor <IntegrationQueryEditor
{query} {query}
schema={config[query.queryVerb][query.queryType]} schema={config[query.queryVerb][query.queryType]}
bind:parameters bind:parameters />
/>
<Spacer medium /> <Spacer medium />

View File

@ -75,7 +75,8 @@
<div class="action-container"> <div class="action-container">
<div class="action-header" on:click={selectAction(action)}> <div class="action-header" on:click={selectAction(action)}>
<span class:selected={action === selectedAction}> <span class:selected={action === selectedAction}>
{index + 1}. {action[EVENT_TYPE_KEY]} {index + 1}.
{action[EVENT_TYPE_KEY]}
</span> </span>
</div> </div>
<i <i

View File

@ -1,6 +1,13 @@
<script> <script>
// accepts an array of field names, and outputs an object of { FieldName: value } // accepts an array of field names, and outputs an object of { FieldName: value }
import { DataList, Label, TextButton, Spacer, Select, Input } from "@budibase/bbui" import {
DataList,
Label,
TextButton,
Spacer,
Select,
Input,
} from "@budibase/bbui"
import { store, backendUiStore, currentAsset } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
import { CloseCircleIcon, AddIcon } from "components/common/Icons" import { CloseCircleIcon, AddIcon } from "components/common/Icons"
@ -14,7 +21,7 @@
export let parameterFields export let parameterFields
export let schemaFields export let schemaFields
export let fieldLabel="Column" export let fieldLabel = "Column"
const emptyField = () => ({ name: "", value: "" }) const emptyField = () => ({ name: "", value: "" })
@ -60,7 +67,9 @@
// value and type is needed by the client, so it can parse // value and type is needed by the client, so it can parse
// a string into a correct type // a string into a correct type
newParameterFields[field.name] = { newParameterFields[field.name] = {
type: schemaFields ? schemaFields.find(f => f.name === field.name).type : "string", type: schemaFields
? schemaFields.find(f => f.name === field.name).type
: "string",
value: readableToRuntimeBinding(bindableProperties, field.value), value: readableToRuntimeBinding(bindableProperties, field.value),
} }
} }
@ -83,7 +92,7 @@
{/each} {/each}
</Select> </Select>
{:else} {:else}
<Input secondary bind:value={field.name} on:blur={rebuildParameters}/> <Input secondary bind:value={field.name} on:blur={rebuildParameters} />
{/if} {/if}
<Label size="m" color="dark">Value</Label> <Label size="m" color="dark">Value</Label>
<DataList secondary bind:value={field.value} on:blur={rebuildParameters}> <DataList secondary bind:value={field.value} on:blur={rebuildParameters}>
@ -105,7 +114,8 @@
<Spacer small /> <Spacer small />
<TextButton text small blue on:click={addField}> <TextButton text small blue on:click={addField}>
Add {fieldLabel} Add
{fieldLabel}
<div style="height: 20px; width: 20px;"> <div style="height: 20px; width: 20px;">
<AddIcon /> <AddIcon />
</div> </div>

View File

@ -5,12 +5,14 @@
const AUTOMATION_STATUS = { const AUTOMATION_STATUS = {
NEW: "new", NEW: "new",
EXISTING: "existing" EXISTING: "existing",
} }
export let parameters = {} export let parameters = {}
let automationStatus = parameters.automationId ? AUTOMATION_STATUS.EXISTING : AUTOMATION_STATUS.NEW let automationStatus = parameters.automationId
? AUTOMATION_STATUS.EXISTING
: AUTOMATION_STATUS.NEW
$: automations = $automationStore.automations $: automations = $automationStore.automations
.filter(a => a.definition.trigger?.stepId === "APP") .filter(a => a.definition.trigger?.stepId === "APP")
@ -46,45 +48,46 @@
automationStatus = AUTOMATION_STATUS.EXISTING automationStatus = AUTOMATION_STATUS.EXISTING
parameters.newAutomationName = "" parameters.newAutomationName = ""
} }
</script> </script>
<div class="root"> <div class="root">
<div class="radio-container" on:click={setNew}> <div class="radio-container" on:click={setNew}>
<input <input
type="radio" type="radio"
value={AUTOMATION_STATUS.NEW} value={AUTOMATION_STATUS.NEW}
bind:group={automationStatus} bind:group={automationStatus}
disabled={!hasAutomations}> disabled={!hasAutomations} />
<Label disabled={!hasAutomations}>Create a new automation </Label>
<Label disabled={!hasAutomations}>Create a new automation</Label>
</div> </div>
<div class="radio-container" on:click={setExisting}> <div class="radio-container" on:click={setExisting}>
<input <input
type="radio" type="radio"
value={AUTOMATION_STATUS.EXISTING} value={AUTOMATION_STATUS.EXISTING}
bind:group={automationStatus} bind:group={automationStatus}
disabled={!hasAutomations}> disabled={!hasAutomations} />
<Label disabled={!hasAutomations}>Use an existing automation </Label>
<Label disabled={!hasAutomations}>Use an existing automation</Label>
</div> </div>
<Label size="m" color="dark">Automation</Label> <Label size="m" color="dark">Automation</Label>
{#if automationStatus === AUTOMATION_STATUS.EXISTING} {#if automationStatus === AUTOMATION_STATUS.EXISTING}
<Select secondary bind:value={parameters.automationId} placeholder="Choose automation"> <Select
secondary
bind:value={parameters.automationId}
placeholder="Choose automation">
<option value="" /> <option value="" />
{#each automations as automation} {#each automations as automation}
<option value={automation._id}>{automation.name}</option> <option value={automation._id}>{automation.name}</option>
{/each} {/each}
</Select> </Select>
{:else} {:else}
<Input secondary bind:value={parameters.newAutomationName} placeholder="Enter automation name" /> <Input
secondary
bind:value={parameters.newAutomationName}
placeholder="Enter automation name" />
{/if} {/if}
<SaveFields <SaveFields
@ -92,7 +95,6 @@
schemaFields={automationStatus === AUTOMATION_STATUS.EXISTING && selectedAutomation && selectedAutomation.schema} schemaFields={automationStatus === AUTOMATION_STATUS.EXISTING && selectedAutomation && selectedAutomation.schema}
fieldLabel="Field" fieldLabel="Field"
on:fieldschanged={onFieldsChanged} /> on:fieldschanged={onFieldsChanged} />
</div> </div>
<style> <style>
@ -132,5 +134,4 @@
.radio-container > input:focus { .radio-container > input:focus {
outline: none; outline: none;
} }
</style> </style>

View File

@ -14,7 +14,6 @@
export let value = {} export let value = {}
$: tables = $backendUiStore.tables.map(m => ({ $: tables = $backendUiStore.tables.map(m => ({
label: m.name, label: m.name,
name: `all_${m._id}`, name: `all_${m._id}`,
@ -82,8 +81,12 @@
} }
function fetchDatasourceSchema(query) { function fetchDatasourceSchema(query) {
const source = $backendUiStore.datasources.find(ds => ds._id === query.datasourceId).source const source = $backendUiStore.datasources.find(
return $backendUiStore.integrations[source].query[query.queryVerb][query.queryType]; ds => ds._id === query.datasourceId
).source
return $backendUiStore.integrations[source].query[query.queryVerb][
query.queryType
]
} }
</script> </script>
@ -94,22 +97,26 @@
<span>{value.label ? value.label : 'Table / View / Query'}</span> <span>{value.label ? value.label : 'Table / View / Query'}</span>
<Icon name="arrowdown" /> <Icon name="arrowdown" />
</div> </div>
{#if value.type === "query"} {#if value.type === 'query'}
<i class="ri-settings-5-line" on:click={openBindingDrawer}/> <i class="ri-settings-5-line" on:click={openBindingDrawer} />
{#if bindingDrawerOpen} {#if bindingDrawerOpen}
<BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}> <BottomDrawer title={'Query'} onClose={closeDatabindingDrawer}>
<div slot="buttons"> <div slot="buttons">
<Button blue thin on:click={() => { <Button
notifier.success("Query parameters saved.") blue
thin
on:click={() => {
notifier.success('Query parameters saved.')
handleSelected(value) handleSelected(value)
}}>Save</Button> }}>
Save
</Button>
</div> </div>
<div class="drawer-contents" slot="body"> <div class="drawer-contents" slot="body">
<IntegrationQueryEditor <IntegrationQueryEditor
query={value} query={value}
schema={fetchDatasourceSchema(value)} schema={fetchDatasourceSchema(value)}
editable={false} editable={false} />
/>
<Spacer large /> <Spacer large />
{#if value.parameters.length > 0} {#if value.parameters.length > 0}
<ParameterBuilder <ParameterBuilder
@ -178,7 +185,6 @@
</div> </div>
</DropdownMenu> </DropdownMenu>
<style> <style>
.dropdownbutton { .dropdownbutton {
background-color: var(--grey-2); background-color: var(--grey-2);

View File

@ -7,9 +7,7 @@
{#if $backendUiStore.selectedDatabase._id && selectedTable.name} {#if $backendUiStore.selectedDatabase._id && selectedTable.name}
<TableDataTable /> <TableDataTable />
{:else} {:else}<i>Create your first table to start building</i>{/if}
<i>Create your first table to start building</i>
{/if}
<style> <style>
i { i {

View File

@ -155,7 +155,9 @@
{#if selectedRows.length > 0} {#if selectedRows.length > 0}
<DeleteButton text small on:click={modal.show()}> <DeleteButton text small on:click={modal.show()}>
<Icon name="addrow" /> <Icon name="addrow" />
Delete {selectedRows.length} row(s) Delete
{selectedRows.length}
row(s)
</DeleteButton> </DeleteButton>
{/if} {/if}
</div> </div>