Button action for user prompt (#8676)
* 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:
parent
9566e832d4
commit
a1ee10c1c6
4 changed files with 66 additions and 2 deletions
|
@ -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>
|
|
@ -16,5 +16,6 @@ export { default as ExportData } from "./ExportData.svelte"
|
||||||
export { default as ContinueIf } from "./ContinueIf.svelte"
|
export { default as ContinueIf } from "./ContinueIf.svelte"
|
||||||
export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
|
export { default as UpdateFieldValue } from "./UpdateFieldValue.svelte"
|
||||||
export { default as ShowNotification } from "./ShowNotification.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 OpenSidePanel } from "./OpenSidePanel.svelte"
|
||||||
export { default as CloseSidePanel } from "./CloseSidePanel.svelte"
|
export { default as CloseSidePanel } from "./CloseSidePanel.svelte"
|
||||||
|
|
|
@ -117,6 +117,11 @@
|
||||||
"component": "ShowNotification",
|
"component": "ShowNotification",
|
||||||
"dependsOnFeature": "showNotificationAction"
|
"dependsOnFeature": "showNotificationAction"
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"name": "Prompt User",
|
||||||
|
"type": "application",
|
||||||
|
"component": "PromptUser"
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"name": "Open Side Panel",
|
"name": "Open Side Panel",
|
||||||
"type": "application",
|
"type": "application",
|
||||||
|
|
|
@ -327,6 +327,8 @@ const showNotificationHandler = action => {
|
||||||
notificationStore.actions[type]?.(message, autoDismiss)
|
notificationStore.actions[type]?.(message, autoDismiss)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const promptUserHandler = () => {}
|
||||||
|
|
||||||
const OpenSidePanelHandler = action => {
|
const OpenSidePanelHandler = action => {
|
||||||
const { id } = action.parameters
|
const { id } = action.parameters
|
||||||
if (id) {
|
if (id) {
|
||||||
|
@ -357,6 +359,7 @@ const handlerMap = {
|
||||||
["Export Data"]: exportDataHandler,
|
["Export Data"]: exportDataHandler,
|
||||||
["Continue if / Stop if"]: continueIfHandler,
|
["Continue if / Stop if"]: continueIfHandler,
|
||||||
["Show Notification"]: showNotificationHandler,
|
["Show Notification"]: showNotificationHandler,
|
||||||
|
["Prompt User"]: promptUserHandler,
|
||||||
["Open Side Panel"]: OpenSidePanelHandler,
|
["Open Side Panel"]: OpenSidePanelHandler,
|
||||||
["Close Side Panel"]: CloseSidePanelHandler,
|
["Close Side Panel"]: CloseSidePanelHandler,
|
||||||
}
|
}
|
||||||
|
@ -366,6 +369,7 @@ const confirmTextMap = {
|
||||||
["Save Row"]: "Are you sure you want to save this row?",
|
["Save Row"]: "Are you sure you want to save this row?",
|
||||||
["Execute Query"]: "Are you sure you want to execute this query?",
|
["Execute Query"]: "Are you sure you want to execute this query?",
|
||||||
["Trigger Automation"]: "Are you sure you want to trigger this automation?",
|
["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 => {
|
return new Promise(resolve => {
|
||||||
const defaultText = confirmTextMap[action["##eventHandlerType"]]
|
const defaultText = confirmTextMap[action["##eventHandlerType"]]
|
||||||
const confirmText = action.parameters?.confirmText || defaultText
|
const confirmText = action.parameters?.confirmText || defaultText
|
||||||
|
|
||||||
|
const defaultTitleText = action["##eventHandlerType"]
|
||||||
|
const customTitleText =
|
||||||
|
action.parameters?.customTitleText || defaultTitleText
|
||||||
confirmationStore.actions.showConfirmation(
|
confirmationStore.actions.showConfirmation(
|
||||||
action["##eventHandlerType"],
|
customTitleText,
|
||||||
confirmText,
|
confirmText,
|
||||||
async () => {
|
async () => {
|
||||||
// When confirmed, execute this action immediately,
|
// When confirmed, execute this action immediately,
|
||||||
|
@ -429,7 +437,7 @@ export const enrichButtonActions = (actions, context) => {
|
||||||
buttonContext.push(result)
|
buttonContext.push(result)
|
||||||
const newContext = { ...context, actions: buttonContext }
|
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(
|
const next = enrichButtonActions(
|
||||||
actions.slice(i + 1),
|
actions.slice(i + 1),
|
||||||
newContext
|
newContext
|
||||||
|
|
Loading…
Reference in a new issue