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

Commit for enhancement #7762 

Added Question option for buttons which acts as a dialog prompting the user to confirm or cancel before continuing.
This commit is contained in:
FlaminWrap 2022-11-13 23:08:24 +00:00
parent e63afd560a
commit 7188d06124
4 changed files with 69 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/builder/src/components/design/settings/controls/ButtonActionEditor/actions/QuestionPrompt.svelte Normal file
View File

@ -0,0 +1,49 @@
<script>
import { Body, Label, Input } from "@budibase/bbui"
import DrawerBindableInput from "components/common/bindings/DrawerBindableInput.svelte"
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>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,3 +16,4 @@ 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 QuestionPrompt } from "./QuestionPrompt.svelte"

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

@ -116,6 +116,11 @@
"type": "application", "type": "application",
"component": "ShowNotification", "component": "ShowNotification",
"dependsOnFeature": "showNotificationAction" "dependsOnFeature": "showNotificationAction"
},
{
"name": "Question",
"type": "application",
"component": "QuestionPrompt"
} }
] ]
} }

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

@ -312,6 +312,10 @@ const showNotificationHandler = action => {
notificationStore.actions[type]?.(message, autoDismiss) notificationStore.actions[type]?.(message, autoDismiss)
} }
const questionHandler = action => {
return
}
const handlerMap = { const handlerMap = {
["Save Row"]: saveRowHandler, ["Save Row"]: saveRowHandler,
["Duplicate Row"]: duplicateRowHandler, ["Duplicate Row"]: duplicateRowHandler,
@ -331,6 +335,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,
["Question"]: questionHandler,
} }
const confirmTextMap = { const confirmTextMap = {
@ -338,6 +343,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?",
["Question"]: "Are you sure you want to contiune?",
} }
/** /**
@ -401,12 +407,14 @@ 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( if (actions.length > 1) {
actions.slice(i + 1), const next = enrichButtonActions(
newContext actions.slice(i + 1),
) newContext
resolve(await next()) )
resolve(await next())
}
} else { } else {
resolve(false) resolve(false)
} }