From 21b1165463d0f0fdcab3b3f68acbe6b3b345cf1a Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Fri, 22 May 2020 16:32:23 +0100 Subject: [PATCH] workflow charts --- packages/builder/src/builderStore/api.js | 2 + .../src/builderStore/store/workflow.js | 62 ++++++++++++------- packages/builder/src/flowy.css | 7 +++ .../workflow/BlockPanel/BlockPanel.svelte | 11 ++-- .../workflow/BlockPanel/blockDefinitions.js | 27 +++++--- .../WorkflowList/CreateWorkflowModal.svelte | 1 + .../workflow/WorkflowList/WorkflowList.svelte | 18 ++++-- .../[application]/workflow/_layout.svelte | 7 ++- .../workflow/flowy/WorkflowBuilder.svelte | 28 +++++---- .../materialdesign-components/src/index.js | 2 - packages/server/package.json | 2 +- .../server/src/api/controllers/workflow.js | 18 +++++- .../src/api/routes/tests/workflow.spec.js | 19 ++++++ packages/server/src/api/routes/workflow.js | 2 +- 14 files changed, 146 insertions(+), 60 deletions(-) diff --git a/packages/builder/src/builderStore/api.js b/packages/builder/src/builderStore/api.js index 7440fd7031..c9327a98f2 100644 --- a/packages/builder/src/builderStore/api.js +++ b/packages/builder/src/builderStore/api.js @@ -18,10 +18,12 @@ const post = apiCall("POST") const get = apiCall("GET") const patch = apiCall("PATCH") const del = apiCall("DELETE") +const put = apiCall("PUT") export default { post, get, patch, delete: del, + put } diff --git a/packages/builder/src/builderStore/store/workflow.js b/packages/builder/src/builderStore/store/workflow.js index b6aef38c72..6ce68e2fa9 100644 --- a/packages/builder/src/builderStore/store/workflow.js +++ b/packages/builder/src/builderStore/store/workflow.js @@ -1,6 +1,46 @@ import { writable } from "svelte/store" import api from "../api" +const workflowActions = store => ({ + fetch: async instanceId => { + const WORKFLOWS_URL = `/api/${instanceId}/workflows`; + const workflowResponse = await api.get(WORKFLOWS_URL); + const json = await workflowResponse.json(); + store.update(state => { + state.workflows = json + return state + }) + }, + create: async ({ instanceId, name }) => { + const workflow = { name } + const CREATE_WORKFLOW_URL = `/api/${instanceId}/workflows`; + const response = await api.post(CREATE_WORKFLOW_URL, workflow) + const json = await response.json(); + store.update(state => { + state.workflows = state.workflows.concat(json.workflow) + state.selectedWorkflowId = json.workflow._id + return state + }) + }, + update: async ({ instanceId, workflow }) => { + const UPDATE_WORKFLOW_URL = `/api/${instanceId}/workflows`; + const response = await api.put(UPDATE_WORKFLOW_URL, workflow) + const json = await response.json(); + store.update(state => { + const existingIdx = state.workflows.findIndex(existing => existing._id === workflow._id); + state.workflows.splice(existingIdx, 1, json.workflow); + state.workflows = state.workflows + return state + }) + }, + select: workflow => { + store.update(state => { + state.selectedWorkflowId = workflow._id + return state; + }) + } +}); + export const getWorkflowStore = () => { const INITIAL_WORKFLOW_STATE = { workflows: [] @@ -8,27 +48,7 @@ export const getWorkflowStore = () => { const store = writable(INITIAL_WORKFLOW_STATE) - store.actions = { - fetch: async instanceId => { - const WORKFLOWS_URL = `/api/${instanceId}/workflows`; - const workflowResponse = await api.get(WORKFLOWS_URL); - const json = await workflowResponse.json(); - store.update(state => { - state.workflows = json - return state - }) - }, - create: async ({ instanceId, name }) => { - const workflow = { name } - const CREATE_WORKFLOW_URL = `/api/${instanceId}/workflows`; - const response = await api.post(CREATE_WORKFLOW_URL, workflow) - const json = await response.json(); - store.update(state => { - state.workflows = state.workflows.concat(json.workflow) - return state - }) - }, - } + store.actions = workflowActions(store); return store } \ No newline at end of file diff --git a/packages/builder/src/flowy.css b/packages/builder/src/flowy.css index 647f404730..1fc6d12b3e 100644 --- a/packages/builder/src/flowy.css +++ b/packages/builder/src/flowy.css @@ -293,6 +293,7 @@ body, html { .grabme, .blockico { display: inline-block; } + .grabme { margin-top: 10px; margin-left: 10px; @@ -322,6 +323,12 @@ body, html { text-align: center; white-space: nowrap; } + +.blockico i { + font-size: 24px; + color: var(--dark-grey); +} + .blockico span { height: 100%; width: 0px; diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte b/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte index f66cdcc580..4f2bc3c5cc 100644 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte +++ b/packages/builder/src/pages/[application]/workflow/BlockPanel/BlockPanel.svelte @@ -42,19 +42,18 @@
{#each definitions as blockDefinition} -
+
-
- -
- - +

{blockDefinition.name}

diff --git a/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js b/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js index d13f317a2b..2a90c8eeda 100644 --- a/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js +++ b/packages/builder/src/pages/[application]/workflow/BlockPanel/blockDefinitions.js @@ -7,44 +7,55 @@ const ACTIONS = { }, NAVIGATE: { name: "Navigate", - icon: "", + icon: "ri-navigation-line", description: "Navigate to another page.", type: "CLIENT" }, - CREATE_RECORD: { + SAVE_RECORD: { name: "Save Record", - icon: "", + icon: "ri-save-3-fill", description: "Save a record to your database.", type: "SERVER", }, DELETE_RECORD: { description: "Delete a record from your database.", - icon: "", + icon: "ri-delete-bin-line", name: "Delete Record", type: "SERVER", } }; const TRIGGERS = { + SAVE_RECORD: { + name: "Record Saved", + icon: "ri-delete-bin-line", + description: "Save a record to your database.", + type: "SERVER", + }, CLICK: { name: "Click", - icon: "", + icon: "ri-cursor-line", description: "Trigger when you click on an element in the UI." }, LOAD: { name: "Load", - icon: "", + icon: "ri-loader-line", description: "Trigger an element has finished loading." }, INPUT: { name: "Input", - icon: "", + icon: "ri-text", description: "Trigger when you type into an input box." }, }; const UTILITIES = { - + IFELSE: { + name: "If/Else", + icon: "ri-git-branch-line", + description: "Perform different actions based on a condition", + type: "CLIENT" + }, } export default { diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte index 510b21704e..4420ab4db3 100644 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowList/CreateWorkflowModal.svelte @@ -16,6 +16,7 @@ name, instanceId, }) + flowy.deleteBlocks(); onClosed() } diff --git a/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte b/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte index c611143f78..5e1efe6868 100644 --- a/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte +++ b/packages/builder/src/pages/[application]/workflow/WorkflowList/WorkflowList.svelte @@ -1,10 +1,9 @@ @@ -30,7 +29,10 @@
    {#each $workflowStore.workflows as workflow} -
  • +
  • workflowStore.actions.select(workflow)}> {workflow.name}
  • @@ -71,7 +73,7 @@ border-radius: 3px; height: 40px; } - + .workflow-item i { font-size: 24px; margin-right: 10px; @@ -81,4 +83,8 @@ cursor: pointer; background: var(--secondary); } + + .workflow-item.selected { + background: var(--secondary); + } diff --git a/packages/builder/src/pages/[application]/workflow/_layout.svelte b/packages/builder/src/pages/[application]/workflow/_layout.svelte index ec0a7d4ef9..7b546e0397 100644 --- a/packages/builder/src/pages/[application]/workflow/_layout.svelte +++ b/packages/builder/src/pages/[application]/workflow/_layout.svelte @@ -1,6 +1,7 @@
    @@ -11,7 +12,9 @@
diff --git a/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte b/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte index 0d596915c3..2990eb9e86 100644 --- a/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte +++ b/packages/builder/src/pages/[application]/workflow/flowy/WorkflowBuilder.svelte @@ -1,25 +1,31 @@