1
0
Fork 0
mirror of synced 2024-06-17 09:55:09 +12:00

Update styles across entire automations page

This commit is contained in:
Andrew Kingston 2020-10-26 12:18:34 +00:00
parent d356f8d609
commit 0553da5a03
27 changed files with 467 additions and 496 deletions

View file

@ -3,14 +3,14 @@ import api from "../../api"
import Automation from "./Automation"
import { cloneDeep } from "lodash/fp"
const automationActions = store => ({
const automationActions = (store) => ({
fetch: async () => {
const responses = await Promise.all([
api.get(`/api/automations`),
api.get(`/api/automations/definitions/list`),
])
const jsonResponses = await Promise.all(responses.map(x => x.json()))
store.update(state => {
const jsonResponses = await Promise.all(responses.map((x) => x.json()))
store.update((state) => {
state.automations = jsonResponses[0]
state.blockDefinitions = {
TRIGGER: jsonResponses[1].trigger,
@ -31,7 +31,7 @@ const automationActions = store => ({
const CREATE_AUTOMATION_URL = `/api/automations`
const response = await api.post(CREATE_AUTOMATION_URL, automation)
const json = await response.json()
store.update(state => {
store.update((state) => {
state.automations = [...state.automations, json.automation]
store.actions.select(json.automation)
return state
@ -41,9 +41,9 @@ const automationActions = store => ({
const UPDATE_AUTOMATION_URL = `/api/automations`
const response = await api.put(UPDATE_AUTOMATION_URL, automation)
const json = await response.json()
store.update(state => {
store.update((state) => {
const existingIdx = state.automations.findIndex(
existing => existing._id === automation._id
(existing) => existing._id === automation._id
)
state.automations.splice(existingIdx, 1, json.automation)
state.automations = state.automations
@ -56,9 +56,9 @@ const automationActions = store => ({
const DELETE_AUTOMATION_URL = `/api/automations/${_id}/${_rev}`
await api.delete(DELETE_AUTOMATION_URL)
store.update(state => {
store.update((state) => {
const existingIdx = state.automations.findIndex(
existing => existing._id === _id
(existing) => existing._id === _id
)
state.automations.splice(existingIdx, 1)
state.automations = state.automations
@ -72,24 +72,24 @@ const automationActions = store => ({
const TRIGGER_AUTOMATION_URL = `/api/automations/${_id}/trigger`
return await api.post(TRIGGER_AUTOMATION_URL)
},
select: automation => {
store.update(state => {
select: (automation) => {
store.update((state) => {
state.selectedAutomation = new Automation(cloneDeep(automation))
state.selectedBlock = null
return state
})
},
addBlockToAutomation: block => {
store.update(state => {
addBlockToAutomation: (block) => {
store.update((state) => {
const newBlock = state.selectedAutomation.addBlock(cloneDeep(block))
state.selectedBlock = newBlock
return state
})
},
deleteAutomationBlock: block => {
store.update(state => {
deleteAutomationBlock: (block) => {
store.update((state) => {
const idx = state.selectedAutomation.automation.definition.steps.findIndex(
x => x.id === block.id
(x) => x.id === block.id
)
state.selectedAutomation.deleteBlock(block.id)

View file

@ -1,93 +1,31 @@
<script>
import { afterUpdate } from "svelte"
import { automationStore, backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import Flowchart from "./flowchart/FlowChart.svelte"
import BlockList from "./BlockList.svelte"
$: automation = $automationStore.selectedAutomation?.automation
$: automationLive = automation?.live
$: instanceId = $backendUiStore.selectedDatabase._id
$: automationCount = $automationStore.automations?.length ?? 0
function onSelect(block) {
automationStore.update(state => {
automationStore.update((state) => {
state.selectedBlock = block
return state
})
}
function setAutomationLive(live) {
automation.live = live
automationStore.actions.save({ instanceId, automation })
if (live) {
notifier.info(`Automation ${automation.name} enabled.`)
} else {
notifier.danger(`Automation ${automation.name} disabled.`)
}
}
</script>
<section>
{#if automation}
<BlockList />
<Flowchart {automation} {onSelect} />
</section>
<footer>
{#if automation}
<button
class:highlighted={automationLive}
class:hoverable={automationLive}
class="stop-button hoverable">
<i class="ri-stop-fill" on:click={() => setAutomationLive(false)} />
</button>
<button
class:highlighted={!automationLive}
class:hoverable={!automationLive}
class="play-button hoverable"
data-cy="activate-automation"
on:click={() => setAutomationLive(true)}>
<i class="ri-play-fill" />
</button>
{/if}
</footer>
{:else if automationCount === 0}
<i>Create your first automation to get started</i>
{:else}<i>Select an automation to edit</i>{/if}
<style>
section {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
overflow: auto;
height: 100%;
position: relative;
}
footer {
position: absolute;
bottom: var(--spacing-xl);
right: 30px;
display: flex;
align-items: flex-end;
}
footer > button {
border-radius: 100%;
color: var(--white);
width: 76px;
height: 76px;
border: none;
background: #adaec4;
font-size: 45px;
display: flex;
align-items: center;
justify-content: center;
}
footer > button:first-child {
margin-right: var(--spacing-m);
}
.play-button.highlighted {
background: var(--purple);
}
.stop-button.highlighted {
background: var(--red);
i {
font-size: var(--font-size-m);
color: var(--grey-5);
}
</style>

View file

@ -0,0 +1,129 @@
<script>
import { sortBy } from "lodash/fp"
import { automationStore } from "builderStore"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "../../common/Dropdowns"
import analytics from "analytics"
$: hasTrigger = $automationStore.selectedAutomation.hasTrigger()
$: tabs = [
{
label: "Trigger",
value: "TRIGGER",
icon: "ri-organization-chart",
disabled: hasTrigger,
},
{
label: "Action",
value: "ACTION",
icon: "ri-flow-chart",
disabled: !hasTrigger,
},
{
label: "Logic",
value: "LOGIC",
icon: "ri-filter-line",
disabled: !hasTrigger,
},
]
let buttonProps = []
let selectedIndex
let anchors = []
let popover
$: selectedTab = selectedIndex == null ? null : tabs[selectedIndex].value
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
$: blocks = sortBy((entry) => entry[1].name)(
Object.entries($automationStore.blockDefinitions[selectedTab] ?? {})
)
function onChangeTab(idx) {
selectedIndex = idx
popover.show()
}
function closePopover() {
selectedIndex = null
popover.hide()
}
function addBlockToAutomation(stepId, blockDefinition) {
const newBlock = {
...blockDefinition,
inputs: blockDefinition.inputs || {},
stepId,
type: selectedTab,
}
automationStore.actions.addBlockToAutomation(newBlock)
analytics.captureEvent("Added Automation Block", {
name: blockDefinition.name,
})
closePopover()
}
</script>
<div class="tab-container">
{#each tabs as tab, idx}
<div
bind:this={anchors[idx]}
class="tab"
class:disabled={tab.disabled}
on:click={tab.disabled ? null : () => onChangeTab(idx)}
class:active={idx === selectedIndex}>
{#if tab.icon}<i class={tab.icon} />{/if}
<span>{tab.label}</span>
<i class="ri-arrow-down-s-line arrow" />
</div>
{/each}
</div>
<DropdownMenu
on:close={() => (selectedIndex = null)}
bind:this={popover}
{anchor}
align="left">
<DropdownContainer>
{#each blocks as [stepId, blockDefinition]}
<DropdownItem
icon={blockDefinition.icon}
title={blockDefinition.name}
subtitle={blockDefinition.description}
on:click={() => addBlockToAutomation(stepId, blockDefinition)} />
{/each}
</DropdownContainer>
</DropdownMenu>
<style>
.tab-container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-l);
min-height: 24px;
}
.tab {
color: var(--grey-7);
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xs);
font-size: var(--font-size-xs);
}
.tab span {
font-weight: 500;
user-select: none;
}
.tab.active,
.tab:not(.disabled):hover {
color: var(--ink);
cursor: pointer;
}
.tab.disabled {
color: var(--grey-5);
}
.tab i:not(:last-child) {
font-size: 16px;
}
</style>

View file

@ -18,16 +18,9 @@
blocks = blocks.concat(automation.definition.steps || [])
}
}
$: automationCount = $automationStore.automations?.length ?? 0
</script>
{#if automationCount === 0}
<i>Create your first automation to get started</i>
{:else if automation == null}
<i>Select an automation to edit</i>
{:else if !blocks.length}
<i>Add some steps to your automation to get started</i>
{/if}
{#if !blocks.length}<i>Add a trigger to your automation to get started</i>{/if}
<section class="canvas">
{#each blocks as block, idx (block.id)}
<div
@ -44,19 +37,18 @@
</section>
<style>
i {
font-size: var(--font-size-xl);
color: var(--grey-4);
padding: var(--spacing-xl) 40px;
align-self: flex-start;
}
section {
position: absolute;
padding: 40px;
margin: 0 -40px calc(-1 * var(--spacing-l)) -40px;
padding: var(--spacing-l) 40px 0 40px;
display: flex;
align-items: center;
flex-direction: column;
overflow-y: auto;
flex: 1 1 auto;
}
/* Fix for firefox not respecting bottom padding in scrolling containers */
section > *:last-child {
padding-bottom: 40px;
}
.block {
@ -65,4 +57,9 @@
justify-content: flex-start;
align-items: center;
}
i {
font-size: var(--font-size-m);
color: var(--grey-5);
}
</style>

View file

@ -9,7 +9,12 @@
$: selected = $automationStore.selectedBlock?.id === block.id
$: steps =
$automationStore.selectedAutomation?.automation?.definition?.steps ?? []
$: blockIdx = steps.findIndex(step => step.id === block.id)
$: blockIdx = steps.findIndex((step) => step.id === block.id)
$: allowDeleteTrigger = !steps.length
function deleteStep() {
automationStore.actions.deleteAutomationBlock(block)
}
</script>
<div
@ -30,6 +35,9 @@
<div class="label">
{#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
</div>
{#if block.type !== 'TRIGGER' || allowDeleteTrigger}
<i on:click|stopPropagation={deleteStep} class="delete ri-close-line" />
{/if}
</header>
<hr />
<p>
@ -61,6 +69,7 @@
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-xs);
}
header span {
flex: 1 1 auto;
@ -74,7 +83,13 @@
}
header i {
font-size: 20px;
margin-right: 5px;
}
header i.delete {
opacity: 0.5;
}
header i.delete:hover {
cursor: pointer;
opacity: 1;
}
.ACTION {

View file

@ -0,0 +1,34 @@
<script>
import { onMount } from "svelte"
import { automationStore } from "builderStore"
import NavItem from "components/common/NavItem.svelte"
import EditAutomationPopover from "./EditAutomationPopover.svelte"
$: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
onMount(() => {
automationStore.actions.fetch()
})
</script>
<div class="automations-list">
{#each $automationStore.automations as automation, idx}
<NavItem
border={idx > 0}
icon="ri-stackshare-line"
text={automation.name}
selected={automation._id === selectedAutomationId}
on:click={() => automationStore.actions.select(automation)}>
<EditAutomationPopover {automation} />
</NavItem>
{/each}
</div>
<style>
.automations-list {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
</style>

View file

@ -1,79 +0,0 @@
<script>
import { onMount } from "svelte"
import { automationStore } from "builderStore"
import CreateAutomationModal from "./CreateAutomationModal.svelte"
import { Button, Modal } from "@budibase/bbui"
let modal
$: selectedAutomationId = $automationStore.selectedAutomation?.automation?._id
onMount(() => {
automationStore.actions.fetch()
})
</script>
<section>
<Button primary wide on:click={modal.show}>Create New Automation</Button>
<ul>
{#each $automationStore.automations as automation}
<li
class="automation-item"
class:selected={automation._id === selectedAutomationId}
on:click={() => automationStore.actions.select(automation)}>
<i class="ri-stackshare-line" class:live={automation.live} />
{automation.name}
</li>
{/each}
</ul>
</section>
<Modal bind:this={modal}>
<CreateAutomationModal />
</Modal>
<style>
section {
display: flex;
flex-direction: column;
}
ul {
list-style-type: none;
padding: 0;
margin: var(--spacing-xl) 0 0 0;
flex: 1;
}
i {
color: var(--grey-6);
}
i.live {
color: var(--ink);
}
li {
font-size: 14px;
}
.automation-item {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
border-radius: var(--border-radius-m);
padding: var(--spacing-s) var(--spacing-m);
margin-bottom: var(--spacing-xs);
color: var(--ink);
}
.automation-item i {
font-size: 24px;
margin-right: var(--spacing-m);
}
.automation-item:hover {
cursor: pointer;
background: var(--grey-1);
}
.automation-item.selected {
background: var(--grey-2);
}
</style>

View file

@ -1,50 +1,41 @@
<script>
import { automationStore } from "builderStore"
import AutomationList from "./AutomationList/AutomationList.svelte"
import BlockList from "./BlockList/BlockList.svelte"
import { Heading } from "@budibase/bbui"
import { Spacer } from "@budibase/bbui"
import AutomationList from "./AutomationList.svelte"
import CreateAutomationModal from "./CreateAutomationModal.svelte"
import { Modal } from "@budibase/bbui"
import { automationStore, backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
let selectedTab = "AUTOMATIONS"
let modal
</script>
<Heading black small>
<span
data-cy="automation-list"
class="hoverable automation-header"
class:selected={selectedTab === 'AUTOMATIONS'}
on:click={() => (selectedTab = 'AUTOMATIONS')}>
Automations
</span>
{#if $automationStore.selectedAutomation}
<span
data-cy="add-automation-component"
class="hoverable"
class:selected={selectedTab === 'ADD'}
on:click={() => (selectedTab = 'ADD')}>
Steps
</span>
{/if}
</Heading>
<Spacer medium />
{#if selectedTab === 'AUTOMATIONS'}
<AutomationList />
{:else if selectedTab === 'ADD'}
<BlockList />
{/if}
<div class="title">
<h1>Automations</h1>
<i on:click={modal.show} class="ri-add-circle-fill" />
</div>
<AutomationList />
<Modal bind:this={modal}>
<CreateAutomationModal />
</Modal>
<style>
header {
font-size: 18px;
font-weight: 600;
background: none;
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xl);
}
.automation-header {
margin-right: var(--spacing-xl);
.title h1 {
font-size: var(--font-size-m);
font-weight: 500;
margin: 0;
}
.title i {
font-size: 20px;
}
.title i:hover {
cursor: pointer;
color: var(--blue);
}
span:not(.selected) {

View file

@ -1,68 +0,0 @@
<script>
import { automationStore } from "builderStore"
import analytics from "analytics"
export let blockDefinition
export let stepId
export let blockType
function addBlockToAutomation() {
automationStore.actions.addBlockToAutomation({
...blockDefinition,
inputs: blockDefinition.inputs || {},
stepId,
type: blockType,
})
analytics.captureEvent("Added Automation Block", {
name: blockDefinition.name,
})
}
</script>
<div
class="automation-block hoverable"
on:click={addBlockToAutomation}
data-cy={stepId}>
<div><i class={blockDefinition.icon} /></div>
<div class="automation-text">
<h4>{blockDefinition.name}</h4>
<p>{blockDefinition.description}</p>
</div>
</div>
<style>
.automation-block {
display: grid;
grid-template-columns: 20px auto;
align-items: center;
margin-top: var(--spacing-s);
padding: var(--spacing-m);
border-radius: var(--border-radius-m);
}
.automation-block:hover {
background-color: var(--grey-1);
}
.automation-block:first-child {
margin-top: 0;
}
i {
color: var(--grey-7);
font-size: 20px;
}
.automation-text {
margin-left: 16px;
}
.automation-text h4 {
font-size: 14px;
font-weight: 500;
margin-bottom: 5px;
margin-top: 0;
}
.automation-text p {
font-size: 12px;
color: var(--grey-7);
margin: 0;
}
</style>

View file

@ -1,48 +0,0 @@
<script>
import { sortBy } from "lodash/fp"
import { automationStore } from "builderStore"
import AutomationBlock from "./AutomationBlock.svelte"
import FlatButtonGroup from "components/userInterface/FlatButtonGroup.svelte"
let selectedTab = "TRIGGER"
let buttonProps = []
$: blocks = sortBy(entry => entry[1].name)(
Object.entries($automationStore.blockDefinitions[selectedTab])
)
$: {
if ($automationStore.selectedAutomation.hasTrigger()) {
buttonProps = [
{ value: "ACTION", text: "Action" },
{ value: "LOGIC", text: "Logic" },
]
if (selectedTab === "TRIGGER") {
selectedTab = "ACTION"
}
} else {
buttonProps = [{ value: "TRIGGER", text: "Trigger" }]
if (selectedTab !== "TRIGGER") {
selectedTab = "TRIGGER"
}
}
}
function onChangeTab(tab) {
selectedTab = tab
}
</script>
<section>
<FlatButtonGroup value={selectedTab} {buttonProps} onChange={onChangeTab} />
<div id="blocklist">
{#each blocks as [stepId, blockDefinition]}
<AutomationBlock {blockDefinition} {stepId} blockType={selectedTab} />
{/each}
</div>
</section>
<style>
#blocklist {
margin-top: var(--spacing-xl);
}
</style>

View file

@ -0,0 +1,86 @@
<script>
import { automationStore, backendUiStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let automation
let anchor
let dropdown
let confirmDeleteDialog
$: instanceId = $backendUiStore.selectedDatabase._id
function showModal() {
dropdown.hide()
confirmDeleteDialog.show()
}
async function deleteAutomation() {
await automationStore.actions.delete({
instanceId,
automation,
})
notifier.success("Automation deleted.")
}
</script>
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
<i class="ri-more-line" />
</div>
<DropdownMenu align="left" {anchor} bind:this={dropdown}>
<DropdownContainer>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={showModal} />
</DropdownContainer>
</DropdownMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
okText="Delete Automation"
onOk={deleteAutomation}
title="Confirm Delete">
Are you sure you wish to delete the automation
<i>{automation.name}?</i>
This action cannot be undone.
</ConfirmDialog>
<style>
div.icon {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
div.icon i {
font-size: 16px;
}
ul {
list-style: none;
margin: 0;
padding: var(--spacing-s) 0;
}
li {
display: flex;
font-family: var(--font-sans);
font-size: var(--font-size-xs);
color: var(--ink);
padding: var(--spacing-s) var(--spacing-m);
margin: auto 0;
align-items: center;
cursor: pointer;
}
li:hover {
background-color: var(--grey-2);
}
li:active {
color: var(--blue);
}
</style>

View file

@ -1,3 +0,0 @@
export { default as AutomationPanel } from "./AutomationPanel.svelte"
export { default as BlockList } from "./BlockList/BlockList.svelte"
export { default as AutomationList } from "./AutomationList/AutomationList.svelte"

View file

@ -1,6 +1,6 @@
<script>
import TableSelector from "./ParamInputs/TableSelector.svelte"
import RowSelector from "./ParamInputs/RowSelector.svelte"
import TableSelector from "./TableSelector.svelte"
import RowSelector from "./RowSelector.svelte"
import { Input, TextArea, Select, Label } from "@budibase/bbui"
import { automationStore } from "builderStore"
import BindableInput from "../../userInterface/BindableInput.svelte"
@ -22,7 +22,7 @@
if (automation.trigger) {
allSteps = [automation.trigger, ...allSteps]
}
const blockIdx = allSteps.findIndex(step => step.id === block.id)
const blockIdx = allSteps.findIndex((step) => step.id === block.id)
// Extract all outputs from all previous steps as available bindings
let bindings = []
@ -44,36 +44,34 @@
}
</script>
<div class="container" data-cy="automation-block-setup">
<div class="block-label">{block.name}</div>
{#each inputs as [key, value]}
<div class="bb-margin-xl block-field">
<Label extraSmall grey>{value.title}</Label>
{#if value.type === 'string' && value.enum}
<Select bind:value={block.inputs[key]} thin secondary>
<option value="">Choose an option</option>
{#each value.enum as option, idx}
<option value={option}>
{value.pretty ? value.pretty[idx] : option}
</option>
{/each}
</Select>
{:else if value.customType === 'password'}
<Input type="password" thin bind:value={block.inputs[key]} />
{:else if value.customType === 'table'}
<TableSelector bind:value={block.inputs[key]} />
{:else if value.customType === 'row'}
<RowSelector bind:value={block.inputs[key]} {bindings} />
{:else if value.type === 'string' || value.type === 'number'}
<BindableInput
type="string"
thin
bind:value={block.inputs[key]}
{bindings} />
{/if}
</div>
{/each}
</div>
<div class="block-label">{block.name}</div>
{#each inputs as [key, value]}
<div class="block-field">
<Label extraSmall grey>{value.title}</Label>
{#if value.type === 'string' && value.enum}
<Select bind:value={block.inputs[key]} extraThin secondary>
<option value="">Choose an option</option>
{#each value.enum as option, idx}
<option value={option}>
{value.pretty ? value.pretty[idx] : option}
</option>
{/each}
</Select>
{:else if value.customType === 'password'}
<Input type="password" extraThin bind:value={block.inputs[key]} />
{:else if value.customType === 'table'}
<TableSelector bind:value={block.inputs[key]} />
{:else if value.customType === 'row'}
<RowSelector bind:value={block.inputs[key]} {bindings} />
{:else if value.type === 'string' || value.type === 'number'}
<BindableInput
type="string"
extraThin
bind:value={block.inputs[key]}
{bindings} />
{/if}
</div>
{/each}
<style>
.block-field {
@ -82,7 +80,7 @@
.block-label {
font-weight: 500;
font-size: 14px;
font-size: var(--font-size-xs);
color: var(--grey-7);
}

View file

@ -1,12 +1,14 @@
<script>
import { backendUiStore } from "builderStore"
import { Input, Select, Label } from "@budibase/bbui"
import BindableInput from "../../../userInterface/BindableInput.svelte"
import BindableInput from "../../userInterface/BindableInput.svelte"
export let value
export let bindings
$: table = $backendUiStore.tables.find(table => table._id === value?.tableId)
$: table = $backendUiStore.tables.find(
(table) => table._id === value?.tableId
)
$: schemaFields = Object.entries(table?.schema ?? {})
// Ensure any nullish tableId values get set to empty string so
@ -19,7 +21,7 @@
</script>
<div class="block-field">
<Select bind:value={value.tableId} thin secondary>
<Select bind:value={value.tableId} extraThin secondary>
<option value="">Choose an option</option>
{#each $backendUiStore.tables as table}
<option value={table._id}>{table.name}</option>
@ -31,7 +33,7 @@
<div class="schema-fields">
{#each schemaFields as [field, schema]}
{#if schemaHasOptions(schema)}
<Select label={field} thin secondary bind:value={value[field]}>
<Select label={field} extraThin secondary bind:value={value[field]}>
<option value="">Choose an option</option>
{#each schema.constraints.inclusion as option}
<option value={option}>{option}</option>
@ -39,7 +41,7 @@
</Select>
{:else if schema.type === 'string' || schema.type === 'number'}
<BindableInput
thin
extraThin
bind:value={value[field]}
label={field}
type="string"

View file

@ -2,23 +2,27 @@
import { backendUiStore, automationStore } from "builderStore"
import { notifier } from "builderStore/store/notifications"
import AutomationBlockSetup from "./AutomationBlockSetup.svelte"
import { Button, Input, Label } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { Button } from "@budibase/bbui"
let selectedTab = "SETUP"
let confirmDeleteDialog
$: instanceId = $backendUiStore.selectedDatabase._id
$: automation = $automationStore.selectedAutomation?.automation
$: allowDeleteBlock =
$automationStore.selectedBlock?.type !== "TRIGGER" ||
!automation?.definition?.steps?.length
$: name = automation?.name ?? ""
$: automationLive = automation?.live
function deleteAutomationBlock() {
automationStore.actions.deleteAutomationBlock(
$automationStore.selectedBlock
)
function setAutomationLive(live) {
if (automation.live === live) {
return
}
automation.live = live
automationStore.actions.save({ instanceId, automation })
if (live) {
notifier.info(`Automation ${automation.name} enabled.`)
} else {
notifier.danger(`Automation ${automation.name} disabled.`)
}
}
async function testAutomation() {
@ -39,110 +43,74 @@
})
notifier.success(`Automation ${automation.name} saved.`)
}
async function deleteAutomation() {
await automationStore.actions.delete({
instanceId,
automation,
})
notifier.success("Automation deleted.")
}
</script>
<section>
<header>
<span
class="hoverable"
class:selected={selectedTab === 'SETUP'}
on:click={() => (selectedTab = 'SETUP')}>
Setup
</span>
</header>
<div class="content">
{#if $automationStore.selectedBlock}
<AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
{:else if $automationStore.selectedAutomation}
<div class="block-label">Automation <b>{automation.name}</b></div>
<Button secondary wide on:click={testAutomation}>Test Automation</Button>
{/if}
</div>
<div class="buttons">
{#if $automationStore.selectedBlock}
<Button
green
wide
data-cy="save-automation-setup"
on:click={saveAutomation}>
Save Automation
</Button>
<Button
disabled={!allowDeleteBlock}
red
wide
on:click={deleteAutomationBlock}>
Delete Step
</Button>
{:else if $automationStore.selectedAutomation}
<Button
green
wide
data-cy="save-automation-setup"
on:click={saveAutomation}>
Save Automation
</Button>
<Button red wide on:click={() => confirmDeleteDialog.show()}>
Delete Automation
</Button>
{/if}
</div>
</section>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Delete"
body={`Are you sure you wish to delete the automation '${name}'?`}
okText="Delete Automation"
onOk={deleteAutomation} />
<div class="title">
<h1>Setup</h1>
<i
class:highlighted={automationLive}
class:hoverable={automationLive}
on:click={() => setAutomationLive(false)}
class="ri-stop-circle-fill" />
<i
class:highlighted={!automationLive}
class:hoverable={!automationLive}
data-cy="activate-automation"
on:click={() => setAutomationLive(true)}
class="ri-play-circle-fill" />
</div>
{#if $automationStore.selectedBlock}
<AutomationBlockSetup bind:block={$automationStore.selectedBlock} />
{:else if $automationStore.selectedAutomation}
<div class="block-label">{automation.name}</div>
<Button secondary wide on:click={testAutomation}>Test Automation</Button>
{/if}
<Button
secondary
wide
data-cy="save-automation-setup"
on:click={saveAutomation}>
Save Automation
</Button>
<style>
section {
display: flex;
flex-direction: column;
height: 100%;
justify-content: flex-start;
align-items: stretch;
}
header {
font-size: 18px;
font-weight: 600;
font-family: inter, sans-serif;
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: var(--spacing-xl);
color: var(--ink);
gap: var(--spacing-xs);
}
header > span {
.title h1 {
font-size: var(--font-size-m);
font-weight: 500;
margin: 0;
flex: 1 1 auto;
}
.title i {
font-size: 20px;
color: var(--grey-5);
margin-right: var(--spacing-xl);
cursor: pointer;
}
.selected {
.title i.highlighted {
color: var(--ink);
}
.title i.hoverable:hover {
cursor: pointer;
color: var(--blue);
}
.block-label {
font-size: var(--font-size-xs);
font-weight: 500;
font-size: 14px;
color: var(--grey-7);
margin-bottom: var(--spacing-xl);
}
.content {
flex: 1 0 auto;
}
.buttons {
display: grid;
gap: var(--spacing-m);
.footer {
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: stretch;
}
</style>

View file

@ -6,7 +6,7 @@
</script>
<div class="block-field">
<Select bind:value secondary thin>
<Select bind:value secondary extraThin>
<option value="">Choose an option</option>
{#each $backendUiStore.tables as table}
<option value={table._id}>{table.name}</option>

View file

@ -1 +0,0 @@
export { default as SetupPanel } from "./SetupPanel.svelte"

View file

@ -43,7 +43,7 @@
width: 24px;
background: var(--grey-4);
right: var(--spacing-s);
bottom: 9px;
bottom: 5px;
}
button:hover {
background: var(--grey-5);

View file

@ -1,6 +1,7 @@
<script>
import { automationStore } from "builderStore"
import { AutomationPanel, SetupPanel } from "components/automation"
import AutomationPanel from "components/automation/AutomationPanel/AutomationPanel.svelte"
import SetupPanel from "components/automation/SetupPanel/SetupPanel.svelte"
</script>
<!-- routify:options index=3 -->
@ -19,21 +20,32 @@
</div>
<style>
.content {
position: relative;
}
.root {
height: calc(100% - 60px);
display: grid;
grid-template-columns: 300px minmax(510px, 1fr) 300px;
background: var(--grey-1);
line-height: 1;
grid-template-columns: 260px minmax(510px, 1fr) 260px;
background: var(--grey-2);
}
.nav {
overflow-y: auto;
background: var(--white);
padding: var(--spacing-xl) var(--spacing-xl);
padding: var(--spacing-l) var(--spacing-xl);
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-l);
}
.content {
position: relative;
padding: var(--spacing-l) 40px;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-l);
overflow: hidden;
}
</style>

View file

@ -1,5 +1,5 @@
<script>
import { AutomationBuilder } from "components/automation"
import AutomationBuilder from "components/automation/AutomationBuilder/AutomationBuilder.svelte"
</script>
<AutomationBuilder />

View file

@ -11,7 +11,7 @@
<style>
i {
font-size: var(--font-size-xl);
color: var(--grey-4);
font-size: var(--font-size-m);
color: var(--grey-5);
}
</style>

View file

@ -27,7 +27,7 @@
<style>
i {
font-size: var(--font-size-xl);
color: var(--grey-4);
font-size: var(--font-size-m);
color: var(--grey-5);
}
</style>

View file

@ -11,7 +11,7 @@
<style>
i {
font-size: var(--font-size-xl);
font-size: var(--font-size-m);
color: var(--grey-4);
}
</style>