events panel work - backup
This commit is contained in:
Michael Shanks
parent
b38c4c98fe
commit
2aae64521f
|
|
@ -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 CloseIcon } from "./Close.svelte"
|
||||
export { default as MoreIcon } from "./More.svelte"
|
||||
export { default as CloseCircleIcon } from "./CloseCircle.svelte"
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
Heading,
|
||||
DropdownMenu,
|
||||
} 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 actionTypes from "./actions"
|
||||
import { createEventDispatcher } from "svelte"
|
||||
|
|
@ -95,9 +95,11 @@
|
|||
{#each actions as action, index}
|
||||
<div class="action-container">
|
||||
<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]}
|
||||
</Body>
|
||||
</p>
|
||||
</div>
|
||||
{#if action === selectedAction}
|
||||
<div class="selected-action-container">
|
||||
|
|
@ -154,16 +156,25 @@
|
|||
.actions-container {
|
||||
flex: 1;
|
||||
min-height: 0px;
|
||||
padding: var(--spacing-xl);
|
||||
padding-bottom: var(--spacing-m);
|
||||
padding-top: var(--spacing-m);
|
||||
padding-bottom: var(--spacing-s);
|
||||
padding-top: 0;
|
||||
border: var(--border-light);
|
||||
border-width: 0 0 1px 0;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
border: var(--border-light);
|
||||
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 {
|
||||
|
|
@ -191,4 +202,8 @@
|
|||
.footer > a:hover {
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.rotate :global(svg) {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,12 +5,25 @@
|
|||
export let parameters
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<div class="root">
|
||||
<Label size="m" color="dark">Screen</Label>
|
||||
<Select outline bind:value={parameters.url}>
|
||||
<Select secondary bind:value={parameters.url}>
|
||||
<option value="" />
|
||||
{#each $store.screens as screen}
|
||||
<option value={screen.url}>{screen.props._instanceName}</option>
|
||||
<option value={screen.route}>{screen.props._instanceName}</option>
|
||||
{/each}
|
||||
</Select>
|
||||
</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>
|
||||
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>
|
||||
|
||||
<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