CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 04:21:06 +12:00
Code Issues Projects Releases Wiki Activity

styling, bug fixes, client library state updates

Browse source
This commit is contained in:
Martin McKeaveney 2020-05-29 16:06:23 +01:00
parent bba7b93b75
commit 385bcfe51f
11 changed files with 166 additions and 146 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
packages/builder/src/builderStore/store/workflow/Workflow.js
View file

@ -40,8 +40,13 @@ export default class Workflow {
block = block.next
}
// delete the block found
previous.next = block.next || {}
// delete the block matching your id
if (!block.next) {
delete previous.next
} else {
previous.next = block.next
}
}
createUiTree() {

42
packages/builder/src/pages/[application]/workflow/SetupPanel/SetupPanel.svelte
View file

@ -1,14 +1,15 @@
<script>
import { onMount, getContext } from "svelte"
import { backendUiStore, workflowStore } from "builderStore"
import { notifier } from "@beyonk/svelte-notifications";
import { notifier } from "@beyonk/svelte-notifications"
import api from "builderStore/api"
import WorkflowBlockSetup from "./WorkflowBlockSetup.svelte"
import DeleteWorkflowModal from "./DeleteWorkflowModal.svelte"
const { open, close } = getContext("simple-modal")
$: workflow = $workflowStore.currentWorkflow && $workflowStore.currentWorkflow.workflow
$: workflow =
$workflowStore.currentWorkflow && $workflowStore.currentWorkflow.workflow
$: workflowBlock = $workflowStore.selectedWorkflowBlock
function deleteWorkflow() {
@ -23,7 +24,7 @@
function deleteWorkflowBlock() {
workflowStore.actions.deleteWorkflowBlock(workflowBlock)
notifier.info("Workflow block deleted.");
notifier.info("Workflow block deleted.")
}
</script>
@ -31,15 +32,15 @@
<header>
<span>Setup</span>
</header>
<div class="panel-body">
{#if workflowBlock}
<WorkflowBlockSetup {workflowBlock} />
<button
class="delete-workflow-button hoverable"
on:click={deleteWorkflowBlock}>
Delete Block
</button>
{:else if $workflowStore.currentWorkflow}
{#if workflowBlock}
<WorkflowBlockSetup {workflowBlock} />
<button
class="delete-workflow-button hoverable"
on:click={deleteWorkflowBlock}>
Delete Block
</button>
{:else if $workflowStore.currentWorkflow}
<div class="panel-body">
<label class="uk-form-label">Workflow: {workflow.name}</label>
<div class="uk-margin">
<label class="uk-form-label">Name</label>
@ -54,19 +55,22 @@
<label class="uk-form-label">User Access</label>
Some User Access Stuff Here
</div>
<button
class="delete-workflow-button hoverable"
on:click={deleteWorkflow}>
Delete Workflow
</button>
{/if}
</div>
</div>
<button class="delete-workflow-button hoverable" on:click={deleteWorkflow}>
Delete Workflow
</button>
{/if}
</section>
<style>
section {
display: flex;
flex-direction: column;
height: 100%;
}
.panel-body {
flex: 1;
}
header {

10
packages/builder/src/pages/[application]/workflow/WorkflowBuilder/WorkflowBuilder.svelte
View file

@ -14,16 +14,10 @@
$: workflowLive = selectedWorkflow && selectedWorkflow.workflow.live
$: if (selectedWorkflow)
uiTree = selectedWorkflow ? selectedWorkflow.createUiTree() : []
$: uiTree = selectedWorkflow ? selectedWorkflow.createUiTree() : []
$: instanceId = $backendUiStore.selectedDatabase._id
function onDelete(block) {
// TODO finish
workflowStore.actions.deleteWorkflowBlock(block)
}
function onSelect(block) {
workflowStore.update(state => {
state.selectedWorkflowBlock = block
@ -44,7 +38,7 @@
</script>
<section>
<Flowchart blocks={uiTree} {onSelect} on:delete={onDelete} />
<Flowchart blocks={uiTree} {onSelect} />
<footer>
{#if selectedWorkflow}
<button

6
packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowList/WorkflowList.svelte
View file

@ -59,6 +59,11 @@
</section>
<style>
section {
display: flex;
flex-direction: column;
}
i {
color: #adaec4;
}
@ -70,6 +75,7 @@
ul {
list-style-type: none;
padding: 0;
flex: 1;
}
.live {

36
packages/builder/src/pages/[application]/workflow/WorkflowPanel/WorkflowPanel.svelte
View file

@ -9,29 +9,27 @@
let definitions = []
</script>
<section>
<header>
<header>
<span
class="hoverable"
class:selected={selectedTab === 'WORKFLOWS'}
on:click={() => (selectedTab = 'WORKFLOWS')}>
Workflows
</span>
{#if $workflowStore.currentWorkflow}
<span
class="hoverable"
class:selected={selectedTab === 'WORKFLOWS'}
on:click={() => (selectedTab = 'WORKFLOWS')}>
Workflows
class:selected={selectedTab === 'ADD'}
on:click={() => (selectedTab = 'ADD')}>
Add
</span>
{#if $workflowStore.currentWorkflow}
<span
class="hoverable"
class:selected={selectedTab === 'ADD'}
on:click={() => (selectedTab = 'ADD')}>
Add
</span>
{/if}
</header>
{#if selectedTab === 'WORKFLOWS'}
<WorkflowList />
{:else if selectedTab === 'ADD'}
<BlockList />
{/if}
</section>
</header>
{#if selectedTab === 'WORKFLOWS'}
<WorkflowList />
{:else if selectedTab === 'ADD'}
<BlockList />
{/if}
<style>
header {

8
packages/builder/src/pages/[application]/workflow/_layout.svelte
View file

@ -22,11 +22,6 @@
background: var(--background);
}
.nav {
padding: 20px;
height: 100%;
}
.root {
height: 100%;
display: flex;
@ -39,10 +34,9 @@
}
.nav {
padding: 20px;
overflow: auto;
flex: 0 1 auto;
width: 275px;
height: 100%;
border: 1px solid var(--medium-grey);
background: var(--white);
}

19
packages/client/src/api/workflow/orchestrator.js
View file

@ -91,6 +91,25 @@ export const clientStrategy = {
if (block.actionId === "DELAY") {
await this.delay(block.args.time)
}
if (block.actionId === "FILTER") {
const { field, condition, value } = block.args;
switch (condition) {
case "=":
if (field !== value) return;
break;
case "!=":
if (field === value) return;
break;
case "gt":
if (field < value) return;
break;
case "lt":
if (field > value) return;
default:
return;
}
}
}
// this workflow block gets executed on the server

24
packages/client/src/createApp.js
View file

@ -24,9 +24,8 @@ export const createApp = ({
routeTo,
appRootPath: frontendDefinition.appRootPath,
})
const getAttachChildrenParams = attachChildrenParams(stateManager)
screenSlotNode.props._children = [screen.props]
const initialiseChildParams = getAttachChildrenParams(screenSlotNode)
const initialiseChildParams = attachChildrenParams(stateManager, screenSlotNode)
attachChildren(initialiseChildParams)(screenSlotNode.rootElement, {
hydrate: true,
force: true,
@ -48,17 +47,13 @@ export const createApp = ({
routeTo(currentUrl || fallbackPath)
}
const attachChildrenParams = stateManager => {
const getInitialiseParams = treeNode => ({
componentLibraries,
treeNode,
onScreenSlotRendered,
setupState: stateManager.setup,
getCurrentState: stateManager.getCurrentState,
})
return getInitialiseParams
}
const attachChildrenParams = (stateManager, treeNode) => ({
componentLibraries,
treeNode,
onScreenSlotRendered,
setupState: stateManager.setup,
getCurrentState: stateManager.getCurrentState,
});
let rootTreeNode
const pageStateManager = createStateManager({
@ -79,8 +74,7 @@ export const createApp = ({
_children: [page.props],
}
rootTreeNode.rootElement = target
const getInitialiseParams = attachChildrenParams(pageStateManager)
const initChildParams = getInitialiseParams(rootTreeNode)
const initChildParams = attachChildrenParams(pageStateManager, rootTreeNode)
attachChildren(initChildParams)(target, {
hydrate: true,

9
packages/client/src/state/bbComponentApi.js
View file

@ -40,6 +40,13 @@ export const bbFactory = ({
delete: apiCall("DELETE"),
}
const safeCallEvent = (event, context) => {
const isFunction = obj =>
!!(obj && obj.constructor && obj.call && obj.apply)
if (isFunction(event)) event(context)
}
return (treeNode, setupState) => {
const attachParams = {
componentLibraries,
@ -53,7 +60,7 @@ export const bbFactory = ({
attachChildren: attachChildren(attachParams),
context: treeNode.context,
props: treeNode.props,
call: (event, context) => event(context),
call: safeCallEvent,
setStateFromBinding: (binding, value) =>
setStateFromBinding(store, binding, value),
setState: (path, value) => setState(store, path, value),

6
packages/client/src/state/eventHandlers.js
View file

@ -29,12 +29,8 @@ export const eventHandlers = (store, rootPath, routeTo) => {
return {
"Set State": handler(["path", "value"], setStateHandler),
"Load Record": handler(["recordKey", "statePath"], api.loadRecord),
"List Records": handler(["indexKey", "statePath"], api.listRecords),
"Save Record": handler(["statePath"], api.saveRecord),
"Navigate To": handler(["url"], param => routeTo(param && param.url)),
"Trigger Workflow": handler(["workflow"], api.triggerWorkflow),
Authenticate: handler(["username", "password"], api.authenticate),
"Trigger Workflow": handler(["workflow"], api.triggerWorkflow)
}
}

143
packages/client/src/state/stateManager.js
View file

@ -4,6 +4,7 @@ import {
EVENT_TYPE_MEMBER_NAME,
} from "./eventHandlers"
import { bbFactory } from "./bbComponentApi"
import { createTreeNode } from "../render/prepareRenderComponent"
import { getState } from "./getState"
import { attachChildren } from "../render/attachChildren"
import mustache from "mustache"
@ -34,16 +35,16 @@ export const createStateManager = ({
let currentState
// any nodes that have props that are bound to the store
let nodesBoundByProps = []
// let nodesBoundByProps = []
// any node whose children depend on code, that uses the store
let nodesWithCodeBoundChildren = []
// let nodesWithCodeBoundChildren = []
const getCurrentState = () => currentState
const registerBindings = _registerBindings(
nodesBoundByProps,
nodesWithCodeBoundChildren
)
// const registerBindings = _registerBindings(
// nodesBoundByProps,
// nodesWithCodeBoundChildren
// )
const bb = bbFactory({
store,
getCurrentState,
@ -52,14 +53,14 @@ export const createStateManager = ({
onScreenSlotRendered,
})
const setup = _setup(handlerTypes, getCurrentState, registerBindings, bb)
const setup = _setup(handlerTypes, getCurrentState, bb)
const unsubscribe = store.subscribe(
onStoreStateUpdated({
setCurrentState: s => (currentState = s),
setCurrentState: state => (currentState = state),
getCurrentState,
nodesWithCodeBoundChildren,
nodesBoundByProps,
// nodesWithCodeBoundChildren,
// nodesBoundByProps,
componentLibraries,
onScreenSlotRendered,
setupState: setup,
@ -77,91 +78,93 @@ export const createStateManager = ({
const onStoreStateUpdated = ({
setCurrentState,
getCurrentState,
nodesWithCodeBoundChildren,
// nodesBoundByProps,
componentLibraries,
onScreenSlotRendered,
setupState,
}) => state => {
setCurrentState(state)
// the original array gets changed by components' destroy()
// so we make a clone and check if they are still in the original
const nodesWithBoundChildren_clone = [...nodesWithCodeBoundChildren]
for (let node of nodesWithBoundChildren_clone) {
if (!nodesWithCodeBoundChildren.includes(node)) continue
setCurrentState(state)
attachChildren({
componentLibraries,
treeNode: node,
treeNode: createTreeNode(),
onScreenSlotRendered,
setupState,
getCurrentState,
})(node.rootElement, { hydrate: true, force: true })
}
})(document.querySelector("#app"), { hydrate: true, force: true })
// for (let node of nodesBoundByProps) {
// setNodeState(state, node)
// // the original array gets changed by components' destroy()
// // so we make a clone and check if they are still in the original
// const nodesWithBoundChildren_clone = [...nodesWithCodeBoundChildren]
// for (let node of nodesWithBoundChildren_clone) {
// if (!nodesWithCodeBoundChildren.includes(node)) continue
// attachChildren({
// componentLibraries,
// treeNode: node,
// onScreenSlotRendered,
// setupState,
// getCurrentState,
// })(node.rootElement, { hydrate: true, force: true })
// }
}
const _registerBindings = (nodesBoundByProps, nodesWithCodeBoundChildren) => (
node,
bindings
) => {
if (bindings.length > 0) {
node.bindings = bindings
nodesBoundByProps.push(node)
const onDestroy = () => {
nodesBoundByProps = nodesBoundByProps.filter(n => n === node)
node.onDestroy = node.onDestroy.filter(d => d === onDestroy)
}
node.onDestroy.push(onDestroy)
}
if (
node.props._children &&
node.props._children.filter(c => c._codeMeta && c._codeMeta.dependsOnStore)
.length > 0
) {
nodesWithCodeBoundChildren.push(node)
const onDestroy = () => {
nodesWithCodeBoundChildren = nodesWithCodeBoundChildren.filter(
n => n === node
)
node.onDestroy = node.onDestroy.filter(d => d === onDestroy)
}
node.onDestroy.push(onDestroy)
}
}
// const _registerBindings = (nodesBoundByProps, nodesWithCodeBoundChildren) => (
// node,
// bindings
// ) => {
// if (bindings.length > 0) {
// node.bindings = bindings
// nodesBoundByProps.push(node)
// const onDestroy = () => {
// nodesBoundByProps = nodesBoundByProps.filter(n => n === node)
// node.onDestroy = node.onDestroy.filter(d => d === onDestroy)
// }
// node.onDestroy.push(onDestroy)
// }
// if (
// node.props._children &&
// node.props._children.filter(c => c._codeMeta && c._codeMeta.dependsOnStore)
// .length > 0
// ) {
// nodesWithCodeBoundChildren.push(node)
// const onDestroy = () => {
// nodesWithCodeBoundChildren = nodesWithCodeBoundChildren.filter(
// n => n === node
// )
// node.onDestroy = node.onDestroy.filter(d => d === onDestroy)
// }
// node.onDestroy.push(onDestroy)
// }
// }
const setNodeState = (storeState, node) => {
if (!node.component) return
const newProps = { ...node.bindings.initialProps }
// const setNodeState = (storeState, node) => {
// if (!node.component) return
// const newProps = { ...node.bindings.initialProps }
for (let binding of node.bindings) {
const val = getState(storeState, binding.path, binding.fallback)
// for (let binding of node.bindings) {
// const val = getState(storeState, binding.path, binding.fallback)
if (val === undefined && newProps[binding.propName] !== undefined) {
delete newProps[binding.propName]
}
// if (val === undefined && newProps[binding.propName] !== undefined) {
// delete newProps[binding.propName]
// }
if (val !== undefined) {
newProps[binding.propName] = val
}
}
// if (val !== undefined) {
// newProps[binding.propName] = val
// }
// }
node.component.$set(newProps)
}
// node.component.$set(newProps)
// }
const _setup = (
handlerTypes,
getCurrentState,
registerBindings,
bb
) => node => {
console.log(node);
const props = node.props
const context = node.context || {}
const initialProps = { ...props }
const storeBoundProps = []
// const storeBoundProps = []
const currentStoreState = getCurrentState()
for (let propName in props) {
@ -249,9 +252,9 @@ const _setup = (
}
}
registerBindings(node, storeBoundProps)
// registerBindings(node, storeBoundProps)
const setup = _setup(handlerTypes, getCurrentState, registerBindings, bb)
const setup = _setup(handlerTypes, getCurrentState, bb)
initialProps._bb = bb(node, setup)
return initialProps