forked from tsai/budibase
Martin McKeaveney
7 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"; |
export { default } from "./EventsEditor.svelte"; |
||||
Loading…
Reference in new issue