CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-13 00:51:22 +12:00
Code Issues Projects Releases Wiki Activity

Button action for user prompt (#8676)

Browse source 
* Commit for enhancement #7762

Added Question option for buttons which acts as a dialog prompting the user to confirm or cancel before continuing.

* Fixes

* Made changes to allow custom modal title

Changed Question to User Prompt
Allows custom title

* Revert "Made changes to allow custom modal title"

This reverts commit 42a43bef4914cd52b07a2b6964bf78aa50eb2707.

* Revert "Fixes"

This reverts commit 915a8718e5ac6dd32a6c3d377d5edb02fc8a3138.

* Adds custom title

Adds custom title

* Wrong version of buttonActions was commited

* Delete index.js

* refactor

* lint

Co-authored-by: Mel O'Hagan <mel@budibase.com>
This commit is contained in:
FlaminWrap 2022-12-15 16:21:24 +00:00 committed by GitHub
parent 9566e832d4
commit a1ee10c1c6
4 changed files with 66 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/PromptUser.svelte Normal file
View file

@ -0,0 +1,50 @@
<script>
import { Body, Label, Input } from "@budibase/bbui"
import { onMount } from "svelte"
export let parameters
onMount(() => {
if (!parameters.confirm) {
parameters.confirm = true
}
})
</script>
<div class="root">
<Body size="S">Enter the message you wish to display to the user.</Body>
<div class="params">
<Label small>Title</Label>
<Input placeholder="Prompt User" bind:value={parameters.customTitleText} />
<Label small>Message</Label>
<Input
placeholder="Are you sure you want to continue?"
bind:value={parameters.confirmText}
/>
</div>
</div>
<style>
.root {
width: 100%;
max-width: 800px;
margin: 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-xl);
}
.root :global(p) {
line-height: 1.5;
}
.params {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
}
</style>

1
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/index.js
View file

@ -16,5 +16,6 @@ export { default as ExportData } from "./ExportData.svelte"
export { default as ContinueIf } from "./ContinueIf.svelte"
export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
export { default as ShowNotification } from "./ShowNotification.svelte"
export { default as PromptUser } from "./PromptUser.svelte"
export { default as OpenSidePanel } from "./OpenSidePanel.svelte"
export { default as CloseSidePanel } from "./CloseSidePanel.svelte"

5
packages/builder/src/components/design/settings/controls/ButtonActionEditor/manifest.json
View file

@ -117,6 +117,11 @@
"component": "ShowNotification",
"dependsOnFeature": "showNotificationAction"
},
{
"name": "Prompt User",
"type": "application",
"component": "PromptUser"
},
{
"name": "Open Side Panel",
"type": "application",

12
packages/client/src/utils/buttonActions.js
View file

@ -327,6 +327,8 @@ const showNotificationHandler = action => {
notificationStore.actions[type]?.(message, autoDismiss)
}
const promptUserHandler = () => {}
const OpenSidePanelHandler = action => {
const { id } = action.parameters
if (id) {
@ -357,6 +359,7 @@ const handlerMap = {
["Export Data"]: exportDataHandler,
["Continue if / Stop if"]: continueIfHandler,
["Show Notification"]: showNotificationHandler,
["Prompt User"]: promptUserHandler,
["Open Side Panel"]: OpenSidePanelHandler,
["Close Side Panel"]: CloseSidePanelHandler,
}
@ -366,6 +369,7 @@ const confirmTextMap = {
["Save Row"]: "Are you sure you want to save this row?",
["Execute Query"]: "Are you sure you want to execute this query?",
["Trigger Automation"]: "Are you sure you want to trigger this automation?",
["Prompt User"]: "Are you sure you want to contiune?",
}
/**
@ -417,8 +421,12 @@ export const enrichButtonActions = (actions, context) => {
return new Promise(resolve => {
const defaultText = confirmTextMap[action["##eventHandlerType"]]
const confirmText = action.parameters?.confirmText || defaultText
const defaultTitleText = action["##eventHandlerType"]
const customTitleText =
action.parameters?.customTitleText || defaultTitleText
confirmationStore.actions.showConfirmation(
action["##eventHandlerType"],
customTitleText,
confirmText,
async () => {
// When confirmed, execute this action immediately,
@ -429,7 +437,7 @@ export const enrichButtonActions = (actions, context) => {
buttonContext.push(result)
const newContext = { ...context, actions: buttonContext }
// Enrich and call the next button action
// Enrich and call the next button action if there is more than one action remaining
const next = enrichButtonActions(
actions.slice(i + 1),
newContext