CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-25 17:40:38 +12:00
Code Issues Projects Releases Wiki Activity

Add single button action for changing form step

Browse source
This commit is contained in:
Andrew Kingston 2021-08-20 09:54:54 +01:00
parent 10066bf3e0
commit 7f07390277
14 changed files with 93 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

@ -33,7 +33,7 @@
$: selectedActionComponent =
selectedAction &&
actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY])?.component
// Select the first action if we delete an action
$: {
@ -116,7 +116,7 @@
</ActionMenu>
</Layout>
<Layout noPadding>
{#if selectedAction}
{#if selectedActionComponent}
<div class="selected-action-container">
<svelte:component
this={selectedActionComponent}

68
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ChangeFormStep.svelte Normal file
View file

@ -0,0 +1,68 @@
<script>
import { Select, Label, Stepper } from "@budibase/bbui"
import { currentAsset, store } from "builderStore"
import { getActionProviderComponents } from "builderStore/dataBinding"
import { onMount } from "svelte"
export let parameters
$: actionProviders = getActionProviderComponents(
$currentAsset,
$store.selectedComponentId,
"ChangeFormStep"
)
const typeOptions = [
{
label: "Next step",
value: "next",
},
{
label: "Previous step",
value: "prev",
},
{
label: "First step",
value: "first",
},
{
label: "Specific step",
value: "specific",
},
]
onMount(() => {
if (!parameters.type) {
parameters.type = "next"
}
})
</script>
<div class="root">
<Label small>Form</Label>
<Select
placeholder={null}
bind:value={parameters.componentId}
options={actionProviders}
getOptionLabel={x => x._instanceName}
getOptionValue={x => x._id}
/>
<Label small>Step</Label>
<Select bind:value={parameters.type} options={typeOptions} />
{#if parameters.type === "specific"}
<Label small>Number</Label>
<Stepper bind:value={parameters.number} />
{/if}
</div>
<style>
.root {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 400px;
margin: 0 auto;
}
</style>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ClearForm.svelte
View file

@ -29,7 +29,7 @@
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 800px;
max-width: 400px;
margin: 0 auto;
}
</style>

1
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/CloseScreenModal.svelte
View file

@ -11,7 +11,6 @@
<style>
.root {
max-width: 800px;
margin: 0 auto;
}
</style>

1
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
View file

@ -8,7 +8,6 @@
<style>
.root {
max-width: 800px;
margin: 0 auto;
}
</style>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
View file

@ -25,7 +25,7 @@
align-items: center;
gap: var(--spacing-m);
grid-template-columns: auto 1fr;
max-width: 800px;
max-width: 400px;
margin: 0 auto;
}
</style>

35
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NextFormStep.svelte
View file

@ -1,35 +0,0 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { currentAsset, store } from "builderStore"
import { getActionProviderComponents } from "builderStore/dataBinding"
export let parameters
$: actionProviders = getActionProviderComponents(
$currentAsset,
$store.selectedComponentId,
"NextFormStep"
)
</script>
<div class="root">
<Label small>Form</Label>
<Select
bind:value={parameters.componentId}
options={actionProviders}
getOptionLabel={x => x._instanceName}
getOptionValue={x => x._id}
/>
</div>
<style>
.root {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 800px;
margin: 0 auto;
}
</style>

35
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/PrevFormStep.svelte
View file

@ -1,35 +0,0 @@
<script>
import { Select, Label } from "@budibase/bbui"
import { currentAsset, store } from "builderStore"
import { getActionProviderComponents } from "builderStore/dataBinding"
export let parameters
$: actionProviders = getActionProviderComponents(
$currentAsset,
$store.selectedComponentId,
"PrevFormStep"
)
</script>
<div class="root">
<Label small>Form</Label>
<Select
bind:value={parameters.componentId}
options={actionProviders}
getOptionLabel={x => x._instanceName}
getOptionValue={x => x._id}
/>
</div>
<style>
.root {
display: grid;
column-gap: var(--spacing-l);
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 800px;
margin: 0 auto;
}
</style>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
View file

@ -34,7 +34,7 @@
row-gap: var(--spacing-s);
grid-template-columns: 60px 1fr;
align-items: center;
max-width: 800px;
max-width: 400px;
margin: 0 auto;
}
</style>

11
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
View file

@ -7,8 +7,7 @@ import ValidateForm from "./ValidateForm.svelte"
import LogOut from "./LogOut.svelte"
import ClearForm from "./ClearForm.svelte"
import CloseScreenModal from "./CloseScreenModal.svelte"
import NextFormStep from "./NextFormStep.svelte"
import PrevFormStep from "./PrevFormStep.svelte"
import ChangeFormStep from "./ChangeFormStep.svelte"
// Defines which actions are available to configure in the front end.
// Unfortunately the "name" property is used as the identifier so please don't
@ -55,11 +54,7 @@ export default [
component: CloseScreenModal,
},
{
name: "Next Form Step",
component: NextFormStep,
},
{
name: "Previous Form Step",
component: PrevFormStep,
name: "Change Form Step",
component: ChangeFormStep,
},
]

3
packages/client/src/constants.js
View file

@ -7,8 +7,7 @@ export const ActionTypes = {
RefreshDatasource: "RefreshDatasource",
SetDataProviderQuery: "SetDataProviderQuery",
ClearForm: "ClearForm",
NextFormStep: "NextFormStep",
PrevFormStep: "PrevFormStep",
ChangeFormStep: "ChangeFormStep",
}
export const ApiVersion = "1"

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

@ -105,19 +105,12 @@ const clearFormHandler = async (action, context) => {
)
}
const nextFormStepHandler = async (action, context) => {
const changeFormStepHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.NextFormStep
)
}
const prevFormStepHandler = async (action, context) => {
return await executeActionHandler(
context,
action.parameters.componentId,
ActionTypes.PrevFormStep
ActionTypes.ChangeFormStep,
action.parameters
)
}
@ -138,8 +131,7 @@ const handlerMap = {
["Log Out"]: logoutHandler,
["Clear Form"]: clearFormHandler,
["Close Screen Modal"]: closeScreenModalHandler,
["Next Form Step"]: nextFormStepHandler,
["Previous Form Step"]: prevFormStepHandler,
["Change Form Step"]: changeFormStepHandler,
}
const confirmTextMap = {

6
packages/standard-components/manifest.json
View file

@ -1706,8 +1706,7 @@
"actions": [
"ValidateForm",
"ClearForm",
"NextFormStep",
"PrevFormStep"
"ChangeFormStep"
],
"styles": ["size"],
"settings": [
@ -1768,9 +1767,6 @@
"icon": "Form",
"hasChildren": true,
"illegalChildren": ["section"],
"actions": [
"ValidateFormStep"
],
"styles": ["size"],
"settings": [
{

18
packages/standard-components/src/forms/InnerForm.svelte
View file

@ -140,11 +140,16 @@
get(field).fieldApi.clearValue()
})
},
nextStep: () => {
currentStep.update(step => step + 1)
},
prevStep: () => {
currentStep.update(step => Math.max(1, step - 1))
changeStep: ({ type, number }) => {
if (type === "next") {
currentStep.update(step => step + 1)
} else if (type === "prev") {
currentStep.update(step => Math.max(1, step - 1))
} else if (type === "first") {
currentStep.set(1)
} else if (type === "specific" && number && !isNaN(number)) {
currentStep.set(number)
}
},
setStep: step => {
if (step) {
@ -249,8 +254,7 @@
const actions = [
{ type: ActionTypes.ValidateForm, callback: formApi.validate },
{ type: ActionTypes.ClearForm, callback: formApi.clear },
{ type: ActionTypes.NextFormStep, callback: formApi.nextStep },
{ type: ActionTypes.PrevFormStep, callback: formApi.prevStep },
{ type: ActionTypes.ChangeFormStep, callback: formApi.changeStep },
]
</script>