events panel work - backup
This commit is contained in:
Michael Shanks
parent
14b8db9854
commit
e0671104d4
|
|
@ -0,0 +1,12 @@
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="24"
|
||||||
|
height="24">
|
||||||
|
<path fill="none" d="M0 0h24v24H0z" />
|
||||||
|
<path
|
||||||
|
fill="currentColor"
|
||||||
|
d="M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10
|
||||||
|
10zm0-11.414L9.172 7.757 7.757 9.172 10.586 12l-2.829 2.828 1.415 1.415L12
|
||||||
|
13.414l2.828 2.829 1.415-1.415L13.414 12l2.829-2.828-1.415-1.415L12 10.586z" />
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 412 B |
|
|
@ -32,3 +32,4 @@ export { default as TwitterIcon } from "./Twitter.svelte"
|
||||||
export { default as InfoIcon } from "./Info.svelte"
|
export { default as InfoIcon } from "./Info.svelte"
|
||||||
export { default as CloseIcon } from "./Close.svelte"
|
export { default as CloseIcon } from "./Close.svelte"
|
||||||
export { default as MoreIcon } from "./More.svelte"
|
export { default as MoreIcon } from "./More.svelte"
|
||||||
|
export { default as CloseCircleIcon } from "./CloseCircle.svelte"
|
||||||
|
|
|
||||||
|
|
@ -7,7 +7,7 @@
|
||||||
Heading,
|
Heading,
|
||||||
DropdownMenu,
|
DropdownMenu,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { AddIcon } from "components/common/Icons/"
|
import { AddIcon, ArrowDownIcon } from "components/common/Icons/"
|
||||||
import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
|
import { EVENT_TYPE_MEMBER_NAME } from "../../common/eventHandlers"
|
||||||
import actionTypes from "./actions"
|
import actionTypes from "./actions"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
|
|
@ -95,9 +95,11 @@
|
||||||
{#each actions as action, index}
|
{#each actions as action, index}
|
||||||
<div class="action-container">
|
<div class="action-container">
|
||||||
<div on:click={selectAction(action)}>
|
<div on:click={selectAction(action)}>
|
||||||
<Body size="medium">
|
<p
|
||||||
|
class="bb-body bb-body--small bb-body--color-dark"
|
||||||
|
style="margin: var(--spacing-s) 0;">
|
||||||
{index + 1}. {action[EVENT_TYPE_MEMBER_NAME]}
|
{index + 1}. {action[EVENT_TYPE_MEMBER_NAME]}
|
||||||
</Body>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
{#if action === selectedAction}
|
{#if action === selectedAction}
|
||||||
<div class="selected-action-container">
|
<div class="selected-action-container">
|
||||||
|
|
@ -154,16 +156,25 @@
|
||||||
.actions-container {
|
.actions-container {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
min-height: 0px;
|
min-height: 0px;
|
||||||
padding: var(--spacing-xl);
|
padding-bottom: var(--spacing-s);
|
||||||
padding-bottom: var(--spacing-m);
|
padding-top: 0;
|
||||||
padding-top: var(--spacing-m);
|
|
||||||
border: var(--border-light);
|
border: var(--border-light);
|
||||||
border-width: 0 0 1px 0;
|
border-width: 0 0 1px 0;
|
||||||
|
overflow-y: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.action-container {
|
.action-container {
|
||||||
border: var(--border-light);
|
border: var(--border-light);
|
||||||
border-width: 1px 0 0 0;
|
border-width: 1px 0 0 0;
|
||||||
|
padding-left: var(--spacing-xl);
|
||||||
|
padding-right: var(--spacing-xl);
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selected-action-container {
|
||||||
|
padding-bottom: var(--spacing-s);
|
||||||
|
padding-top: var(--spacing-s);
|
||||||
}
|
}
|
||||||
|
|
||||||
.delete-action-button {
|
.delete-action-button {
|
||||||
|
|
@ -191,4 +202,8 @@
|
||||||
.footer > a:hover {
|
.footer > a:hover {
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.rotate :global(svg) {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -5,12 +5,25 @@
|
||||||
export let parameters
|
export let parameters
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>
|
<div class="root">
|
||||||
<Label size="m" color="dark">Screen</Label>
|
<Label size="m" color="dark">Screen</Label>
|
||||||
<Select outline bind:value={parameters.url}>
|
<Select secondary bind:value={parameters.url}>
|
||||||
<option value="" />
|
<option value="" />
|
||||||
{#each $store.screens as screen}
|
{#each $store.screens as screen}
|
||||||
<option value={screen.url}>{screen.props._instanceName}</option>
|
<option value={screen.route}>{screen.props._instanceName}</option>
|
||||||
{/each}
|
{/each}
|
||||||
</Select>
|
</Select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.root {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root :global(.relative) {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: var(--spacing-l);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,101 @@
|
||||||
<script>
|
<script>
|
||||||
|
import { Select, Label, TextButton } from "@budibase/bbui"
|
||||||
|
import { store, backendUiStore } from "builderStore"
|
||||||
|
import fetchBindableProperties from "builderStore/fetchBindableProperties"
|
||||||
|
import { CloseCircleIcon } from "components/common/icons"
|
||||||
|
|
||||||
|
export let parameters
|
||||||
|
|
||||||
|
const emptyField = () => ({ name: "", value: "" })
|
||||||
|
|
||||||
|
$: fields = Object.keys(parameters.fields || emptyField()).map(name => ({
|
||||||
|
name,
|
||||||
|
value: (parameters.fields && parameters.fields[name]) || "",
|
||||||
|
}))
|
||||||
|
|
||||||
|
$: bindableProperties = fetchBindableProperties({
|
||||||
|
componentInstanceId: $store.currentComponentInfo._id,
|
||||||
|
components: $store.components,
|
||||||
|
screen: $store.currentPreviewItem,
|
||||||
|
models: $backendUiStore.models,
|
||||||
|
})
|
||||||
|
|
||||||
|
const addField = () => {
|
||||||
|
const newFields = fields.filter(f => f.name)
|
||||||
|
newFields.push(emptyField())
|
||||||
|
fields = newFields
|
||||||
|
}
|
||||||
|
|
||||||
|
const bindablePropertyName = prop => {
|
||||||
|
if (prop.type === "instance") return prop.instance._instanceName
|
||||||
|
return instance.readableBinding.split(".")[
|
||||||
|
instance.readableBinding.lastIndexOf(".")
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
let fieldNames
|
||||||
|
$: {
|
||||||
|
fieldNames =
|
||||||
|
parameters.model &&
|
||||||
|
Object.keys(
|
||||||
|
$backendUiStore.models.find(model => model._id === parameters.model)
|
||||||
|
.schema
|
||||||
|
)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div>Update Record</div>
|
<div class="root">
|
||||||
|
<Label size="m" color="dark">Table</Label>
|
||||||
|
<Select secondary bind:value={parameters.model}>
|
||||||
|
<option value="" />
|
||||||
|
{#each $backendUiStore.models as model}
|
||||||
|
<option value={model._id}>{model.name}</option>
|
||||||
|
{/each}
|
||||||
|
</Select>
|
||||||
|
|
||||||
|
{#if parameters.model && fields}
|
||||||
|
{#each fields as field}
|
||||||
|
<Label size="m" color="dark">Field</Label>
|
||||||
|
<Select secondary bind:value={field.name}>
|
||||||
|
<option value="" />
|
||||||
|
{#each fieldNames as fieldName}
|
||||||
|
<option value={fieldName}>{fieldName}</option>
|
||||||
|
{/each}
|
||||||
|
</Select>
|
||||||
|
<Label size="m" color="dark">Value</Label>
|
||||||
|
<Select secondary bind:value={field.value}>
|
||||||
|
<option value="" />
|
||||||
|
{#each bindableProperties as bindableProp}
|
||||||
|
<option value={bindableProp.runtimeBinding}>
|
||||||
|
{bindablePropertyName(bindableProp)}
|
||||||
|
</option>
|
||||||
|
{/each}
|
||||||
|
</Select>
|
||||||
|
<div class="remove-field-container">
|
||||||
|
<TextButton text small>
|
||||||
|
<CloseCircleIcon />
|
||||||
|
</TextButton>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.root {
|
||||||
|
display: grid;
|
||||||
|
column-gap: var(--spacing-s);
|
||||||
|
row-gap: var(--spacing-s);
|
||||||
|
grid-template-columns: auto 1fr auto 1fr auto;
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.root :global(.relative:nth-child(2)) {
|
||||||
|
grid-column-start: 2;
|
||||||
|
grid-column-end: 6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remove-field-container :global(button) {
|
||||||
|
vertical-align: bottom;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue