Merge pull request #6676 from Budibase/feature/app-action-ui-updates
Feature/app action UI updates
This commit is contained in:
deanhannigan
GitHub
commit
998f48e171
|
|
@ -6,8 +6,8 @@
|
|||
Button,
|
||||
Layout,
|
||||
DrawerContent,
|
||||
ActionMenu,
|
||||
MenuItem,
|
||||
ActionButton,
|
||||
Search,
|
||||
} from "@budibase/bbui"
|
||||
import { getAvailableActions } from "./index"
|
||||
import { generate } from "shortid"
|
||||
|
|
@ -22,8 +22,24 @@
|
|||
export let actions
|
||||
export let bindings = []
|
||||
|
||||
$: showAvailableActions = !actions?.length
|
||||
|
||||
let actionQuery
|
||||
$: parsedQuery =
|
||||
typeof actionQuery === "string" ? actionQuery.toLowerCase().trim() : ""
|
||||
|
||||
let selectedAction = actions?.length ? actions[0] : null
|
||||
|
||||
$: mappedActionTypes = actionTypes.reduce((acc, action) => {
|
||||
let parsedName = action.name.toLowerCase().trim()
|
||||
if (parsedQuery.length && parsedName.indexOf(parsedQuery) < 0) {
|
||||
return acc
|
||||
}
|
||||
acc[action.type] = acc[action.type] || []
|
||||
acc[action.type].push(action)
|
||||
return acc
|
||||
}, {})
|
||||
|
||||
// These are ephemeral bindings which only exist while executing actions
|
||||
$: buttonContextBindings = getButtonContextBindings(
|
||||
$currentAsset,
|
||||
|
|
@ -61,7 +77,12 @@
|
|||
actions = actions
|
||||
}
|
||||
|
||||
const addAction = actionType => () => {
|
||||
const toggleActionList = () => {
|
||||
actionQuery = null
|
||||
showAvailableActions = !showAvailableActions
|
||||
}
|
||||
|
||||
const addAction = actionType => {
|
||||
const newAction = {
|
||||
parameters: {},
|
||||
[EVENT_TYPE_KEY]: actionType.name,
|
||||
|
|
@ -78,6 +99,11 @@
|
|||
selectedAction = action
|
||||
}
|
||||
|
||||
const onAddAction = actionType => {
|
||||
addAction(actionType)
|
||||
toggleActionList()
|
||||
}
|
||||
|
||||
function handleDndConsider(e) {
|
||||
actions = e.detail.items
|
||||
}
|
||||
|
|
@ -88,7 +114,39 @@
|
|||
|
||||
<DrawerContent>
|
||||
<Layout noPadding gap="S" slot="sidebar">
|
||||
{#if actions && actions.length > 0}
|
||||
{#if showAvailableActions || !actions?.length}
|
||||
<div class="actions-list">
|
||||
{#if actions?.length > 0}
|
||||
<div>
|
||||
<ActionButton
|
||||
secondary
|
||||
icon={"ArrowLeft"}
|
||||
on:click={toggleActionList}
|
||||
>
|
||||
Back
|
||||
</ActionButton>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="search-wrap">
|
||||
<Search placeholder="Search" bind:value={actionQuery} />
|
||||
</div>
|
||||
{#each Object.entries(mappedActionTypes) as [categoryId, category], idx}
|
||||
<div class="heading" class:top-entry={idx === 0}>{categoryId}</div>
|
||||
<ul>
|
||||
{#each category as actionType}
|
||||
<li on:click={onAddAction(actionType)}>
|
||||
<span class="action-name">{actionType.name}</span>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if actions && actions.length > 0 && !showAvailableActions}
|
||||
<div>
|
||||
<Button secondary on:click={toggleActionList}>Add Action</Button>
|
||||
</div>
|
||||
<div
|
||||
class="actions"
|
||||
use:dndzone={{
|
||||
|
|
@ -120,17 +178,9 @@
|
|||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
<ActionMenu>
|
||||
<Button slot="control" secondary>Add Action</Button>
|
||||
{#each actionTypes as actionType}
|
||||
<MenuItem on:click={addAction(actionType)}>
|
||||
{actionType.name}
|
||||
</MenuItem>
|
||||
{/each}
|
||||
</ActionMenu>
|
||||
</Layout>
|
||||
<Layout noPadding>
|
||||
{#if selectedActionComponent}
|
||||
{#if selectedActionComponent && !showAvailableActions}
|
||||
{#key selectedAction.id}
|
||||
<div class="selected-action-container">
|
||||
<svelte:component
|
||||
|
|
@ -152,13 +202,10 @@
|
|||
align-items: stretch;
|
||||
gap: var(--spacing-s);
|
||||
}
|
||||
|
||||
.action-header {
|
||||
color: var(--spectrum-global-color-gray-700);
|
||||
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.action-container {
|
||||
background-color: var(--background);
|
||||
padding: var(--spacing-s) var(--spacing-m);
|
||||
|
|
@ -182,4 +229,55 @@
|
|||
.action-container.selected .action-header {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
}
|
||||
|
||||
.actions-list > * {
|
||||
padding-bottom: var(--spectrum-global-dimension-static-size-200);
|
||||
}
|
||||
|
||||
.actions-list .heading {
|
||||
padding-bottom: var(--spectrum-global-dimension-static-size-100);
|
||||
padding-top: var(--spectrum-global-dimension-static-size-50);
|
||||
}
|
||||
|
||||
.actions-list .heading.top-entry {
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
font-size: var(--font-size-s);
|
||||
padding: var(--spacing-m);
|
||||
border-radius: 4px;
|
||||
background-color: var(--spectrum-global-color-gray-200);
|
||||
transition: background-color 130ms ease-in-out, color 130ms ease-in-out,
|
||||
border-color 130ms ease-in-out;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
li:not(:last-of-type) {
|
||||
margin-bottom: var(--spacing-s);
|
||||
}
|
||||
li :global(*) {
|
||||
transition: color 130ms ease-in-out;
|
||||
}
|
||||
li:hover {
|
||||
color: var(--spectrum-global-color-gray-900);
|
||||
background-color: var(--spectrum-global-color-gray-50);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-name {
|
||||
font-weight: 600;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
.heading {
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -69,9 +69,16 @@
|
|||
notifications.error("Error creating automation")
|
||||
}
|
||||
}
|
||||
|
||||
$: actionCount = value?.length
|
||||
$: actionText = `${actionCount || "No"} action${
|
||||
actionCount !== 1 ? "s" : ""
|
||||
} set`
|
||||
</script>
|
||||
|
||||
<div class="action-count">{actionText}</div>
|
||||
<ActionButton on:click={openDrawer}>Define actions</ActionButton>
|
||||
|
||||
<Drawer bind:this={drawer} title={"Actions"}>
|
||||
<svelte:fragment slot="description">
|
||||
Define what actions to run.
|
||||
|
|
@ -85,3 +92,10 @@
|
|||
{key}
|
||||
/>
|
||||
</Drawer>
|
||||
|
||||
<style>
|
||||
.action-count {
|
||||
padding-bottom: var(--spacing-s);
|
||||
font-weight: 600;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
"actions": [
|
||||
{
|
||||
"name": "Save Row",
|
||||
"type": "data",
|
||||
"component": "SaveRow",
|
||||
"context": [
|
||||
{
|
||||
|
|
@ -12,6 +13,7 @@
|
|||
},
|
||||
{
|
||||
"name": "Duplicate Row",
|
||||
"type": "data",
|
||||
"component": "DuplicateRow",
|
||||
"context": [
|
||||
{
|
||||
|
|
@ -22,14 +24,17 @@
|
|||
},
|
||||
{
|
||||
"name": "Delete Row",
|
||||
"type": "data",
|
||||
"component": "DeleteRow"
|
||||
},
|
||||
{
|
||||
"name": "Navigate To",
|
||||
"type": "application",
|
||||
"component": "NavigateTo"
|
||||
},
|
||||
{
|
||||
"name": "Execute Query",
|
||||
"type": "data",
|
||||
"component": "ExecuteQuery",
|
||||
"context": [
|
||||
{
|
||||
|
|
@ -40,43 +45,53 @@
|
|||
},
|
||||
{
|
||||
"name": "Trigger Automation",
|
||||
"type": "application",
|
||||
"component": "TriggerAutomation"
|
||||
},
|
||||
{
|
||||
"name": "Update Field Value",
|
||||
"type": "form",
|
||||
"component": "UpdateFieldValue"
|
||||
},
|
||||
{
|
||||
"name": "Validate Form",
|
||||
"type": "form",
|
||||
"component": "ValidateForm"
|
||||
},
|
||||
{
|
||||
"name": "Change Form Step",
|
||||
"type": "form",
|
||||
"component": "ChangeFormStep"
|
||||
},
|
||||
{
|
||||
"name": "Clear Form",
|
||||
"type": "form",
|
||||
"component": "ClearForm"
|
||||
},
|
||||
{
|
||||
"name": "Log Out",
|
||||
"type": "application",
|
||||
"component": "LogOut"
|
||||
},
|
||||
{
|
||||
"name": "Close Screen Modal",
|
||||
"type": "application",
|
||||
"component": "CloseScreenModal"
|
||||
},
|
||||
{
|
||||
"name": "Refresh Data Provider",
|
||||
"type": "data",
|
||||
"component": "RefreshDataProvider"
|
||||
},
|
||||
{
|
||||
"name": "Update State",
|
||||
"type": "data",
|
||||
"component": "UpdateState",
|
||||
"dependsOnFeature": "state"
|
||||
},
|
||||
{
|
||||
"name": "Upload File to S3",
|
||||
"type": "data",
|
||||
"component": "S3Upload",
|
||||
"context": [
|
||||
{
|
||||
|
|
@ -87,12 +102,14 @@
|
|||
},
|
||||
{
|
||||
"name": "Export Data",
|
||||
"type": "data",
|
||||
"component": "ExportData"
|
||||
},
|
||||
{
|
||||
"name": "Continue if / Stop if",
|
||||
"type": "logic",
|
||||
"component": "ContinueIf",
|
||||
"dependsOnFeature": "continueIfAction"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue