mirror of https://github.com/Budibase/budibase.git
Martin McKeaveney
6 years ago
6 changed files with 294 additions and 156 deletions
@ -0,0 +1,23 @@ |
|||
<style> |
|||
button { |
|||
cursor: pointer; |
|||
outline: none; |
|||
border: none; |
|||
border-radius: 5px; |
|||
background: var(--background-button); |
|||
|
|||
width: 1.8rem; |
|||
height: 1.8rem; |
|||
padding-bottom: 10px; |
|||
|
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
font-size: 1.2rem; |
|||
font-weight: 700; |
|||
color: var(--button-text); |
|||
} |
|||
</style> |
|||
|
|||
<button on:click>+</button> |
|||
@ -1,110 +0,0 @@ |
|||
<script> |
|||
import IconButton from "../../common/IconButton.svelte"; |
|||
import StateBindingControl from "./StateBindingControl.svelte"; |
|||
import { find, map, keys, reduce, keyBy } from "lodash/fp"; |
|||
import { pipe, userWithFullAccess } from "../../common/core"; |
|||
import { |
|||
EVENT_TYPE_MEMBER_NAME, |
|||
allHandlers |
|||
} from "../../common/eventHandlers"; |
|||
import { store } from "../../builderStore"; |
|||
|
|||
export let event; |
|||
export let onChanged; |
|||
export let onRemoved; |
|||
|
|||
let events; |
|||
let eventType; |
|||
let parameters = []; |
|||
|
|||
store.subscribe(s => { |
|||
events = allHandlers( |
|||
{ hierarchy: s.hierarchy }, |
|||
userWithFullAccess({ |
|||
hierarchy: s.hierarchy, |
|||
actions: keyBy("name")(s.actions) |
|||
}) |
|||
); |
|||
}); |
|||
|
|||
// TODO: refactor |
|||
$: { |
|||
if (event) { |
|||
eventType = event[EVENT_TYPE_MEMBER_NAME]; |
|||
|
|||
parameters = pipe( |
|||
event.parameters, |
|||
[keys, map(key => ({ name: key, value: event.parameters[key] }))] |
|||
); |
|||
} else { |
|||
eventType = ""; |
|||
parameters = []; |
|||
} |
|||
} |
|||
|
|||
// TODO: refactor |
|||
const eventChanged = (type, parameters) => { |
|||
const paramsAsObject = reduce((obj, p) => { |
|||
obj[p.name] = p.value; |
|||
return obj; |
|||
}, {})(parameters); |
|||
|
|||
const ev = {}; |
|||
ev[EVENT_TYPE_MEMBER_NAME] = type; |
|||
ev.parameters = paramsAsObject; |
|||
|
|||
onChanged(ev); |
|||
}; |
|||
|
|||
// TODO: refactor |
|||
const eventTypeChanged = ev => { |
|||
const eType = find(e => e.name === ev.target.value)(events); |
|||
const emptyParameters = map(p => ({ name: p, value: "" }))( |
|||
eType.parameters |
|||
); |
|||
eventChanged(eType.name, emptyParameters); |
|||
}; |
|||
|
|||
const onParameterChanged = index => val => { |
|||
const newparameters = [...parameters]; |
|||
newparameters[index].value = val; |
|||
eventChanged(eventType, newparameters); |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.type-selector-container { |
|||
display: flex; |
|||
} |
|||
|
|||
.type-selector { |
|||
border-color: var(--primary50); |
|||
border-radius: 2px; |
|||
width: 50px; |
|||
flex: 1 0 auto; |
|||
} |
|||
</style> |
|||
|
|||
<div class="type-selector-container"> |
|||
<select |
|||
class="type-selector uk-select uk-form-small " |
|||
value={eventType} |
|||
on:change={eventTypeChanged}> |
|||
<option /> |
|||
{#each events as ev} |
|||
<option value={ev.name}>{ev.name}</option> |
|||
{/each} |
|||
</select> |
|||
|
|||
<IconButton icon="trash" size="12" on:click={onRemoved} /> |
|||
|
|||
</div> |
|||
|
|||
{#if parameters} |
|||
{#each parameters as p, index} |
|||
<div>{p.name}</div> |
|||
<StateBindingControl |
|||
onChanged={onParameterChanged(index)} |
|||
value={p.value} /> |
|||
{/each} |
|||
{/if} |
|||
@ -0,0 +1,112 @@ |
|||
<script> |
|||
import IconButton from "../../common/IconButton.svelte"; |
|||
import StateBindingControl from "./StateBindingControl.svelte"; |
|||
import { find, map, keys, reduce, keyBy } from "lodash/fp"; |
|||
import { pipe, userWithFullAccess } from "../../common/core"; |
|||
import { |
|||
EVENT_TYPE_MEMBER_NAME, |
|||
allHandlers |
|||
} from "../../common/eventHandlers"; |
|||
import { store } from "../../builderStore"; |
|||
|
|||
export let handler; |
|||
export let onChanged; |
|||
export let onRemoved; |
|||
export let index; |
|||
|
|||
let eventOptions; |
|||
let handlerType; |
|||
let parameters = []; |
|||
|
|||
$: eventOptions = allHandlers( |
|||
{ hierarchy: $store.hierarchy }, |
|||
userWithFullAccess({ |
|||
hierarchy: $store.hierarchy, |
|||
actions: keyBy("name")($store.actions) |
|||
}) |
|||
); |
|||
|
|||
// TODO: refactor |
|||
$: { |
|||
if (handler) { |
|||
handlerType = handler[EVENT_TYPE_MEMBER_NAME]; |
|||
parameters = Object.entries(handler.parameters).map(([name, value]) => ({ |
|||
name, |
|||
value |
|||
})); |
|||
} else { |
|||
handlerType = ""; |
|||
parameters = []; |
|||
} |
|||
} |
|||
|
|||
const handlerChanged = (type, params) => { |
|||
const handlerParams = {}; |
|||
for (let param of params) { |
|||
handlerParams[param.name] = param.value; |
|||
} |
|||
|
|||
const updatedHandler = { |
|||
[EVENT_TYPE_MEMBER_NAME]: type, |
|||
parameters: handlerParams |
|||
}; |
|||
|
|||
onChanged(updatedHandler, index); |
|||
}; |
|||
|
|||
const handlerTypeChanged = e => { |
|||
const handlerType = eventOptions.find( |
|||
handler => handler.name === e.target.value |
|||
); |
|||
// Set default params for handler |
|||
const defaultParams = handlerType.parameters.map(param => ({ |
|||
name: param, |
|||
value: "" |
|||
})); |
|||
handlerChanged(handlerType.name, defaultParams); |
|||
}; |
|||
|
|||
const onParameterChanged = index => value => { |
|||
const newParams = [...parameters]; |
|||
newParams[index].value = value; |
|||
handlerChanged(handlerType, newParams); |
|||
}; |
|||
</script> |
|||
|
|||
<style> |
|||
.type-selector-container { |
|||
display: grid; |
|||
grid-template-rows: repeat(3, 1fr); |
|||
background: #fafafa; |
|||
padding: 22px; |
|||
border: 1px solid var(--primary75); |
|||
} |
|||
|
|||
.type-selector { |
|||
border-color: var(--primary50); |
|||
border-radius: 2px; |
|||
width: 50px; |
|||
flex: 1 0 auto; |
|||
} |
|||
</style> |
|||
|
|||
<div class="type-selector-container"> |
|||
Action |
|||
<select |
|||
class="type-selector uk-select uk-form-small " |
|||
value={handlerType} |
|||
on:change={handlerTypeChanged}> |
|||
<option /> |
|||
{#each eventOptions as option} |
|||
<option value={option.name}>{option.name}</option> |
|||
{/each} |
|||
</select> |
|||
{#if parameters} |
|||
{#each parameters as param, index} |
|||
<div>{param.name}</div> |
|||
<StateBindingControl |
|||
onChanged={onParameterChanged(index)} |
|||
value={param.value} /> |
|||
{/each} |
|||
{/if} |
|||
</div> |
|||
@ -1 +1,7 @@ |
|||
export const deleteElement = (array, index) => { |
|||
const arr = [...array]; |
|||
array.splice(index, 1); |
|||
return arr; |
|||
}; |
|||
|
|||
export { default } from "./EventsEditor.svelte"; |
|||
Loading…
Reference in new issue