2021-01-09 07:22:03 +13:00
|
|
|
<script>
|
2021-03-11 06:56:16 +13:00
|
|
|
import { flip } from "svelte/animate"
|
|
|
|
import { dndzone } from "svelte-dnd-action"
|
2021-04-29 00:33:40 +12:00
|
|
|
import {
|
|
|
|
Icon,
|
|
|
|
Button,
|
|
|
|
Popover,
|
|
|
|
Spacer,
|
|
|
|
DrawerContentWithSidebar,
|
|
|
|
} from "@budibase/bbui"
|
2021-01-09 07:22:03 +13:00
|
|
|
import actionTypes from "./actions"
|
2021-04-20 01:37:04 +12:00
|
|
|
import { generate } from "shortid"
|
2021-01-09 07:22:03 +13:00
|
|
|
|
2021-03-11 06:56:16 +13:00
|
|
|
const flipDurationMs = 150
|
2021-02-27 02:21:05 +13:00
|
|
|
|
2021-01-16 02:11:51 +13:00
|
|
|
const EVENT_TYPE_KEY = "##eventHandlerType"
|
2021-01-09 07:22:03 +13:00
|
|
|
|
2021-01-22 03:52:59 +13:00
|
|
|
export let actions
|
2021-02-27 05:11:14 +13:00
|
|
|
|
|
|
|
// dndzone needs an id on the array items, so this adds some temporary ones.
|
2021-04-20 01:37:04 +12:00
|
|
|
$: {
|
|
|
|
if (actions) {
|
2021-04-24 00:03:34 +12:00
|
|
|
actions.forEach((action) => {
|
2021-04-20 01:37:04 +12:00
|
|
|
if (!action.id) {
|
|
|
|
action.id = generate()
|
|
|
|
}
|
|
|
|
})
|
|
|
|
}
|
2021-02-27 05:11:14 +13:00
|
|
|
}
|
2021-01-09 07:22:03 +13:00
|
|
|
|
|
|
|
let addActionButton
|
|
|
|
let addActionDropdown
|
2021-02-19 06:44:56 +13:00
|
|
|
let selectedAction = actions?.length ? actions[0] : null
|
2021-01-09 07:22:03 +13:00
|
|
|
|
|
|
|
$: selectedActionComponent =
|
|
|
|
selectedAction &&
|
2021-04-24 00:03:34 +12:00
|
|
|
actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_KEY]).component
|
2021-01-09 07:22:03 +13:00
|
|
|
|
2021-02-19 06:44:56 +13:00
|
|
|
// Select the first action if we delete an action
|
|
|
|
$: {
|
|
|
|
if (selectedAction && !actions?.includes(selectedAction)) {
|
|
|
|
selectedAction = actions?.[0]
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-04-24 00:03:34 +12:00
|
|
|
const deleteAction = (index) => {
|
2021-01-09 07:22:03 +13:00
|
|
|
actions.splice(index, 1)
|
|
|
|
actions = actions
|
|
|
|
}
|
|
|
|
|
2021-04-24 00:03:34 +12:00
|
|
|
const addAction = (actionType) => () => {
|
2021-01-09 07:22:03 +13:00
|
|
|
const newAction = {
|
|
|
|
parameters: {},
|
2021-01-16 02:11:51 +13:00
|
|
|
[EVENT_TYPE_KEY]: actionType.name,
|
2021-04-20 01:37:04 +12:00
|
|
|
id: generate(),
|
2021-01-09 07:22:03 +13:00
|
|
|
}
|
2021-01-28 06:29:30 +13:00
|
|
|
if (!actions) {
|
|
|
|
actions = []
|
|
|
|
}
|
2021-02-27 02:21:05 +13:00
|
|
|
actions = [...actions, newAction]
|
2021-01-09 07:22:03 +13:00
|
|
|
selectedAction = newAction
|
|
|
|
addActionDropdown.hide()
|
|
|
|
}
|
|
|
|
|
2021-04-24 00:03:34 +12:00
|
|
|
const selectAction = (action) => () => {
|
2021-01-09 07:22:03 +13:00
|
|
|
selectedAction = action
|
|
|
|
}
|
2021-02-27 02:21:05 +13:00
|
|
|
|
|
|
|
function handleDndConsider(e) {
|
2021-03-11 06:56:16 +13:00
|
|
|
actions = e.detail.items
|
|
|
|
}
|
|
|
|
function handleDndFinalize(e) {
|
|
|
|
actions = e.detail.items
|
|
|
|
}
|
2021-01-09 07:22:03 +13:00
|
|
|
</script>
|
|
|
|
|
2021-04-29 00:33:40 +12:00
|
|
|
<DrawerContentWithSidebar>
|
|
|
|
<div class="actions-list" slot="sidebar">
|
2021-01-09 07:22:03 +13:00
|
|
|
<div>
|
|
|
|
<div bind:this={addActionButton}>
|
2021-01-27 11:42:31 +13:00
|
|
|
<Button wide secondary on:click={addActionDropdown.show}>
|
2021-01-09 07:22:03 +13:00
|
|
|
Add Action
|
2021-01-27 11:42:31 +13:00
|
|
|
</Button>
|
2021-02-19 06:44:56 +13:00
|
|
|
<Spacer small />
|
2021-01-09 07:22:03 +13:00
|
|
|
</div>
|
2021-04-22 02:03:12 +12:00
|
|
|
<Popover
|
2021-01-09 07:22:03 +13:00
|
|
|
bind:this={addActionDropdown}
|
|
|
|
anchor={addActionButton}
|
2021-04-24 00:03:34 +12:00
|
|
|
align="right"
|
|
|
|
>
|
2021-01-09 07:22:03 +13:00
|
|
|
<div class="available-actions-container">
|
|
|
|
{#each actionTypes as actionType}
|
|
|
|
<div class="available-action" on:click={addAction(actionType)}>
|
|
|
|
<span>{actionType.name}</span>
|
|
|
|
</div>
|
|
|
|
{/each}
|
|
|
|
</div>
|
2021-04-22 02:03:12 +12:00
|
|
|
</Popover>
|
2021-01-09 07:22:03 +13:00
|
|
|
</div>
|
|
|
|
|
|
|
|
{#if actions && actions.length > 0}
|
2021-03-11 06:56:16 +13:00
|
|
|
<div
|
|
|
|
class="action-dnd-container"
|
2021-04-24 00:03:34 +12:00
|
|
|
use:dndzone={{
|
|
|
|
items: actions,
|
|
|
|
flipDurationMs,
|
|
|
|
dropTargetStyle: { outline: "none" },
|
|
|
|
}}
|
2021-03-11 06:56:16 +13:00
|
|
|
on:consider={handleDndConsider}
|
2021-04-24 00:03:34 +12:00
|
|
|
on:finalize={handleDndFinalize}
|
|
|
|
>
|
2021-02-27 02:21:05 +13:00
|
|
|
{#each actions as action, index (action.id)}
|
2021-03-11 06:56:16 +13:00
|
|
|
<div
|
|
|
|
class="action-container"
|
2021-04-24 00:03:34 +12:00
|
|
|
animate:flip={{ duration: flipDurationMs }}
|
|
|
|
>
|
2021-02-27 02:21:05 +13:00
|
|
|
<div
|
|
|
|
class="action-header"
|
|
|
|
class:selected={action === selectedAction}
|
2021-04-24 00:03:34 +12:00
|
|
|
on:click={selectAction(action)}
|
|
|
|
>
|
2021-02-27 02:21:05 +13:00
|
|
|
{index + 1}.
|
|
|
|
{action[EVENT_TYPE_KEY]}
|
|
|
|
</div>
|
2021-04-24 00:03:34 +12:00
|
|
|
<div
|
|
|
|
on:click={() => deleteAction(index)}
|
2021-02-27 02:21:05 +13:00
|
|
|
style="margin-left: auto;"
|
2021-04-24 00:03:34 +12:00
|
|
|
>
|
2021-04-28 02:30:13 +12:00
|
|
|
<Icon size="S" hoverable name="Close" />
|
2021-04-24 00:03:34 +12:00
|
|
|
</div>
|
2021-01-09 07:22:03 +13:00
|
|
|
</div>
|
2021-02-27 02:21:05 +13:00
|
|
|
{/each}
|
|
|
|
</div>
|
2021-01-09 07:22:03 +13:00
|
|
|
{/if}
|
|
|
|
</div>
|
2021-04-29 00:33:40 +12:00
|
|
|
</DrawerContentWithSidebar>
|
|
|
|
<div class="actions-container">
|
2021-01-09 07:22:03 +13:00
|
|
|
<div class="action-config">
|
|
|
|
{#if selectedAction}
|
|
|
|
<div class="selected-action-container">
|
|
|
|
<svelte:component
|
|
|
|
this={selectedActionComponent}
|
2021-04-24 00:03:34 +12:00
|
|
|
parameters={selectedAction.parameters}
|
|
|
|
/>
|
2021-01-09 07:22:03 +13:00
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.action-header {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
2021-01-12 09:17:56 +13:00
|
|
|
margin-top: var(--spacing-m);
|
2021-01-09 07:22:03 +13:00
|
|
|
}
|
|
|
|
|
2021-02-19 06:44:56 +13:00
|
|
|
.action-header {
|
2021-01-09 07:22:03 +13:00
|
|
|
margin-bottom: var(--spacing-m);
|
2021-01-27 11:42:31 +13:00
|
|
|
font-size: var(--font-size-xs);
|
2021-02-19 06:44:56 +13:00
|
|
|
color: var(--grey-7);
|
|
|
|
font-weight: 500;
|
2021-01-09 07:22:03 +13:00
|
|
|
}
|
|
|
|
|
2021-02-19 06:44:56 +13:00
|
|
|
.action-header:hover,
|
|
|
|
.action-header.selected {
|
2021-01-09 07:22:03 +13:00
|
|
|
cursor: pointer;
|
2021-02-19 06:44:56 +13:00
|
|
|
color: var(--ink);
|
2021-01-09 07:22:03 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
.actions-list {
|
2021-01-27 22:44:58 +13:00
|
|
|
border-right: var(--border-light);
|
2021-02-19 06:44:56 +13:00
|
|
|
padding: var(--spacing-l);
|
2021-01-09 07:22:03 +13:00
|
|
|
}
|
|
|
|
|
|
|
|
.available-action {
|
|
|
|
padding: var(--spacing-s);
|
2021-01-27 11:42:31 +13:00
|
|
|
font-size: var(--font-size-xs);
|
2021-01-09 07:22:03 +13:00
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
|
|
|
|
.available-action:hover {
|
|
|
|
background: var(--grey-2);
|
|
|
|
}
|
|
|
|
|
|
|
|
.actions-container {
|
2021-01-12 09:17:56 +13:00
|
|
|
height: 40vh;
|
2021-01-09 07:22:03 +13:00
|
|
|
display: grid;
|
2021-01-27 11:42:31 +13:00
|
|
|
grid-template-columns: 260px 1fr;
|
2021-01-09 07:22:03 +13:00
|
|
|
grid-auto-flow: column;
|
|
|
|
min-height: 0;
|
|
|
|
padding-top: 0;
|
|
|
|
overflow-y: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-container {
|
2021-02-19 06:44:56 +13:00
|
|
|
border-bottom: 1px solid var(--grey-1);
|
2021-01-13 05:49:11 +13:00
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
2021-01-09 07:22:03 +13:00
|
|
|
}
|
2021-02-19 06:44:56 +13:00
|
|
|
.action-container:last-child {
|
|
|
|
border-bottom: none;
|
|
|
|
}
|
2021-01-09 07:22:03 +13:00
|
|
|
|
|
|
|
.selected-action-container {
|
2021-02-19 06:44:56 +13:00
|
|
|
padding: var(--spacing-l);
|
2021-01-09 07:22:03 +13:00
|
|
|
}
|
|
|
|
|
2021-01-27 22:44:58 +13:00
|
|
|
i:hover {
|
|
|
|
color: var(--red);
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2021-01-09 07:22:03 +13:00
|
|
|
</style>
|