From 0553da5a0374a94aaf07554e2a6bdca8ca44895e Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Mon, 26 Oct 2020 12:18:34 +0000 Subject: [PATCH] Update styles across entire automations page --- .../builderStore/store/automation/index.js | 30 ++-- .../AutomationBuilder.svelte | 84 ++------- .../AutomationBuilder/BlockList.svelte | 129 ++++++++++++++ .../{flowchart => FlowChart}/Arrow.svelte | 0 .../AutomationBlockTagline.svelte | 0 .../{flowchart => FlowChart}/FlowChart.svelte | 31 ++-- .../{flowchart => FlowChart}/FlowItem.svelte | 19 +- .../AutomationBuilder/flowchart/api.js | 0 .../AutomationBuilder/flowchart/index.js | 0 .../AutomationPanel/AutomationList.svelte | 34 ++++ .../AutomationList/AutomationList.svelte | 79 --------- .../AutomationPanel/AutomationPanel.svelte | 65 +++---- .../BlockList/AutomationBlock.svelte | 68 -------- .../BlockList/BlockList.svelte | 48 ------ .../EditAutomationPopover.svelte | 86 ++++++++++ .../automation/AutomationPanel/index.js | 3 - .../SetupPanel/AutomationBlockSetup.svelte | 66 ++++--- .../{ParamInputs => }/RowSelector.svelte | 12 +- .../automation/SetupPanel/SetupPanel.svelte | 162 +++++++----------- .../{ParamInputs => }/TableSelector.svelte | 2 +- .../components/automation/SetupPanel/index.js | 1 - .../userInterface/BindableInput.svelte | 2 +- .../[application]/automate/_layout.svelte | 30 +++- .../pages/[application]/automate/index.svelte | 2 +- .../data/table/[selectedTable]/index.svelte | 4 +- .../[application]/data/table/index.svelte | 4 +- .../data/view/[selectedView]/index.svelte | 2 +- 27 files changed, 467 insertions(+), 496 deletions(-) create mode 100644 packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/Arrow.svelte (100%) rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/AutomationBlockTagline.svelte (100%) rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/FlowChart.svelte (69%) rename packages/builder/src/components/automation/AutomationBuilder/{flowchart => FlowChart}/FlowItem.svelte (82%) delete mode 100644 packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js delete mode 100644 packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js create mode 100644 packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte delete mode 100644 packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte delete mode 100644 packages/builder/src/components/automation/AutomationPanel/BlockList/AutomationBlock.svelte delete mode 100644 packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte create mode 100644 packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte delete mode 100644 packages/builder/src/components/automation/AutomationPanel/index.js rename packages/builder/src/components/automation/SetupPanel/{ParamInputs => }/RowSelector.svelte (82%) rename packages/builder/src/components/automation/SetupPanel/{ParamInputs => }/TableSelector.svelte (88%) delete mode 100644 packages/builder/src/components/automation/SetupPanel/index.js diff --git a/packages/builder/src/builderStore/store/automation/index.js b/packages/builder/src/builderStore/store/automation/index.js index e1db07053e..2c1636b359 100644 --- a/packages/builder/src/builderStore/store/automation/index.js +++ b/packages/builder/src/builderStore/store/automation/index.js @@ -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) diff --git a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte index c832ddd8bc..a598c6831e 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/AutomationBuilder.svelte @@ -1,93 +1,31 @@ -
+{#if automation} + -
- +{:else if automationCount === 0} + Create your first automation to get started +{:else}Select an automation to edit{/if} diff --git a/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte new file mode 100644 index 0000000000..d791f7f98a --- /dev/null +++ b/packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte @@ -0,0 +1,129 @@ + + +
+ {#each tabs as tab, idx} +
onChangeTab(idx)} + class:active={idx === selectedIndex}> + {#if tab.icon}{/if} + {tab.label} + +
+ {/each} +
+ (selectedIndex = null)} + bind:this={popover} + {anchor} + align="left"> + + {#each blocks as [stepId, blockDefinition]} + addBlockToAutomation(stepId, blockDefinition)} /> + {/each} + + + + diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte similarity index 100% rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/Arrow.svelte rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/Arrow.svelte diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte similarity index 100% rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/AutomationBlockTagline.svelte rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/AutomationBlockTagline.svelte diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte similarity index 69% rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte index 09a0d097de..b7e3f11bcf 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowChart.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowChart.svelte @@ -18,16 +18,9 @@ blocks = blocks.concat(automation.definition.steps || []) } } - $: automationCount = $automationStore.automations?.length ?? 0 -{#if automationCount === 0} - Create your first automation to get started -{:else if automation == null} - Select an automation to edit -{:else if !blocks.length} - Add some steps to your automation to get started -{/if} +{#if !blocks.length}Add a trigger to your automation to get started{/if}
{#each blocks as block, idx (block.id)}
diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte similarity index 82% rename from packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte rename to packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte index 2c78875eb1..85fdcf1a1d 100644 --- a/packages/builder/src/components/automation/AutomationBuilder/flowchart/FlowItem.svelte +++ b/packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte @@ -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) + }
{#if block.type === 'TRIGGER'}Trigger{:else}Step {blockIdx + 1}{/if}
+ {#if block.type !== 'TRIGGER' || allowDeleteTrigger} + + {/if}

@@ -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 { diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/api.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js b/packages/builder/src/components/automation/AutomationBuilder/flowchart/index.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte new file mode 100644 index 0000000000..c4a39d69b9 --- /dev/null +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationList.svelte @@ -0,0 +1,34 @@ + + +

+ {#each $automationStore.automations as automation, idx} + 0} + icon="ri-stackshare-line" + text={automation.name} + selected={automation._id === selectedAutomationId} + on:click={() => automationStore.actions.select(automation)}> + + + {/each} +
+ + diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte deleted file mode 100644 index 328c0d6122..0000000000 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationList/AutomationList.svelte +++ /dev/null @@ -1,79 +0,0 @@ - - -
- -
    - {#each $automationStore.automations as automation} -
  • automationStore.actions.select(automation)}> - - {automation.name} -
    • - {/each} -
-
- - - - - diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte index 9a29025d56..b6a2298a22 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte @@ -1,50 +1,41 @@ - - (selectedTab = 'AUTOMATIONS')}> - Automations - - {#if $automationStore.selectedAutomation} - (selectedTab = 'ADD')}> - Steps - - {/if} - - -{#if selectedTab === 'AUTOMATIONS'} - -{:else if selectedTab === 'ADD'} - -{/if} +
+

Automations

+ +
+ + + + diff --git a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte b/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte deleted file mode 100644 index 1455f60ef1..0000000000 --- a/packages/builder/src/components/automation/AutomationPanel/BlockList/BlockList.svelte +++ /dev/null @@ -1,48 +0,0 @@ - - -
- -
- {#each blocks as [stepId, blockDefinition]} - - {/each} -
-
- - diff --git a/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte new file mode 100644 index 0000000000..38cc4d0069 --- /dev/null +++ b/packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte @@ -0,0 +1,86 @@ + + +
+ +
+ + + + + + + Are you sure you wish to delete the automation + {automation.name}? + This action cannot be undone. + + + diff --git a/packages/builder/src/components/automation/AutomationPanel/index.js b/packages/builder/src/components/automation/AutomationPanel/index.js deleted file mode 100644 index 3ba95ab3b6..0000000000 --- a/packages/builder/src/components/automation/AutomationPanel/index.js +++ /dev/null @@ -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" diff --git a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte index 896652dbb7..9165c8411a 100644 --- a/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte +++ b/packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte @@ -1,6 +1,6 @@ -
-
{block.name}
- {#each inputs as [key, value]} -
- - {#if value.type === 'string' && value.enum} - - {:else if value.customType === 'password'} - - {:else if value.customType === 'table'} - - {:else if value.customType === 'row'} - - {:else if value.type === 'string' || value.type === 'number'} - - {/if} -
- {/each} -
+
{block.name}
+{#each inputs as [key, value]} +
+ + {#if value.type === 'string' && value.enum} + + {:else if value.customType === 'password'} + + {:else if value.customType === 'table'} + + {:else if value.customType === 'row'} + + {:else if value.type === 'string' || value.type === 'number'} + + {/if} +
+{/each} diff --git a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte similarity index 88% rename from packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte rename to packages/builder/src/components/automation/SetupPanel/TableSelector.svelte index ba0b55cc85..9727fa1d51 100644 --- a/packages/builder/src/components/automation/SetupPanel/ParamInputs/TableSelector.svelte +++ b/packages/builder/src/components/automation/SetupPanel/TableSelector.svelte @@ -6,7 +6,7 @@
- {#each $backendUiStore.tables as table} diff --git a/packages/builder/src/components/automation/SetupPanel/index.js b/packages/builder/src/components/automation/SetupPanel/index.js deleted file mode 100644 index ccfbddaf1c..0000000000 --- a/packages/builder/src/components/automation/SetupPanel/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as SetupPanel } from "./SetupPanel.svelte" diff --git a/packages/builder/src/components/userInterface/BindableInput.svelte b/packages/builder/src/components/userInterface/BindableInput.svelte index 5ba0798718..bb73dfd80d 100644 --- a/packages/builder/src/components/userInterface/BindableInput.svelte +++ b/packages/builder/src/components/userInterface/BindableInput.svelte @@ -43,7 +43,7 @@ width: 24px; background: var(--grey-4); right: var(--spacing-s); - bottom: 9px; + bottom: 5px; } button:hover { background: var(--grey-5); diff --git a/packages/builder/src/pages/[application]/automate/_layout.svelte b/packages/builder/src/pages/[application]/automate/_layout.svelte index 95cf31e2c8..29915e7bd2 100644 --- a/packages/builder/src/pages/[application]/automate/_layout.svelte +++ b/packages/builder/src/pages/[application]/automate/_layout.svelte @@ -1,6 +1,7 @@ @@ -19,21 +20,32 @@
diff --git a/packages/builder/src/pages/[application]/automate/index.svelte b/packages/builder/src/pages/[application]/automate/index.svelte index 36d04677cd..1a15ed48c6 100644 --- a/packages/builder/src/pages/[application]/automate/index.svelte +++ b/packages/builder/src/pages/[application]/automate/index.svelte @@ -1,5 +1,5 @@ diff --git a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte index b7ee09a4f3..5491f7b884 100644 --- a/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte +++ b/packages/builder/src/pages/[application]/data/table/[selectedTable]/index.svelte @@ -11,7 +11,7 @@ diff --git a/packages/builder/src/pages/[application]/data/table/index.svelte b/packages/builder/src/pages/[application]/data/table/index.svelte index 15ed1e299b..d1e2062f5c 100644 --- a/packages/builder/src/pages/[application]/data/table/index.svelte +++ b/packages/builder/src/pages/[application]/data/table/index.svelte @@ -27,7 +27,7 @@ diff --git a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte index 3f592e6148..c1f7abc014 100644 --- a/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte +++ b/packages/builder/src/pages/[application]/data/view/[selectedView]/index.svelte @@ -11,7 +11,7 @@