MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 b18aacc922.

* Revert "Fixes"

This reverts commit de613925dc.

* 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 9ed49221bd
commit 31615347ec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
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 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"

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

@ -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",

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

@ -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