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

Move multi step button config into frontend core and fix button config setting layout

This commit is contained in:
Andrew Kingston 2023-12-08 14:15:23 +00:00
parent ece410c623
commit 5a8c12c91b
7 changed files with 79 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/builder/src/builderStore/store/frontend.js
View File

@ -609,12 +609,12 @@ export const getFrontendStore = () => {
// Use default config if the 'buttons' prop has never been initialised
if (!("buttons" in enrichedComponent)) {
enrichedComponent["buttons"] =
Utils.buildDynamicButtonConfig(enrichedComponent)
Utils.buildFormBlockButtonConfig(enrichedComponent)
migrated = true
} else if (enrichedComponent["buttons"] == null) {
// Ignore legacy config if 'buttons' has been reset by 'resetOn'
const { _id, actionType, dataSource } = enrichedComponent
enrichedComponent["buttons"] = Utils.buildDynamicButtonConfig({
enrichedComponent["buttons"] = Utils.buildFormBlockButtonConfig({
_id,
actionType,
dataSource,

75
packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte
View File

@ -1,18 +1,16 @@
<script>
// import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
// import { getComponentForSetting } from "components/design/settings/componentSettings"
import { createEventDispatcher } from "svelte"
import { createEventDispatcher, setContext } from "svelte"
import ComponentSettingsSection from "../../../../pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Component/ComponentSettingsSection.svelte"
import { getDatasourceForProvider } from "builderStore/dataBinding"
import { currentAsset, store } from "builderStore"
import { Helpers } from "@budibase/bbui"
import FormStepControls from "./FormStepControls.svelte"
import { setContext } from "svelte"
import { writable } from "svelte/store"
import { buildMultiStepFormBlockButtonConfig } from "@budibase/frontend-core/src/utils/utils"
export let componentInstance
export let componentBindings
export let value //steps
export let value
export let bindings
const dispatch = createEventDispatcher()
@ -27,14 +25,17 @@
setContext("step-form-block", stepStore)
$: ({ currentStep } = $stepStore)
$: lastIdx = stepState?.length - 1
$: if (stepState.length) {
stepStore.update(state => ({
...state,
stepsCount: stepState.length || 0,
}))
}
$: defaultButtonConfig = buildMultiStepFormBlockButtonConfig({
_id: componentInstance._id,
steps: value,
currentStep,
})
// Step Definition Settings
let compSettings = [
@ -171,69 +172,11 @@
}
}
// Multistep button generation
// This kind of behaviour should be shifted to frontend-core
/*
Also, look at this unicorn
\
\_
/.(((
(,/"(((__,--.
\ ) _( /{
|| " ||
|| ||
'' ''
*/
const generateButtons = () => {
const buttons = []
if (stepState.length > 1) {
if (currentStep > 0) {
buttons.push({
_id: Helpers.uuid(),
_component: "@budibase/standard-components/button",
_instanceName: Helpers.uuid(),
text: "Back",
type: "secondary",
size: "M",
onClick: [
{
parameters: {
type: "prev",
componentId: `${componentInstance._id}-form`,
},
"##eventHandlerType": "Change Form Step",
},
],
})
}
buttons.push({
_id: Helpers.uuid(),
_component: "@budibase/standard-components/button",
_instanceName: Helpers.uuid(),
text: "Next",
type: "cta",
size: "M",
disabled: lastIdx === currentStep,
onClick: [
{
parameters: {
type: "next",
componentId: `${componentInstance._id}-form`,
},
"##eventHandlerType": "Change Form Step",
},
],
})
}
return buttons
}
const buildPseudoInstance = ({ buttons, fields, title, desc }) => {
return {
_id: Helpers.uuid(),
_component: "@budibase/standard-components/multistepformblock-step",
buttons: buttons || generateButtons(),
buttons: buttons || defaultButtonConfig,
fields,
title,
desc,

14
packages/builder/src/components/design/settings/controls/PropertyControl.svelte
View File

@ -148,6 +148,12 @@
.control {
position: relative;
}
.text {
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-6);
grid-column: 2 / 2;
}
.property-control.wide .control {
flex: 1;
}
@ -160,12 +166,10 @@
.property-control.wide > * {
width: 100%;
}
.text {
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-6);
grid-column: 2 / 2;
}
.property-control.wide .text {
grid-column: 1 / -1;
}
.property-control.wide .label {
margin-bottom: -8px;
}
</style>

3
packages/client/manifest.json
View File

@ -6060,7 +6060,8 @@
"key": "steps",
"nested": true,
"labelHidden": true,
"resetOn": ["dataSource", "actionType"]
"resetOn": ["dataSource", "actionType"],
"defaultValue": [{}]
}
]
}

4
packages/client/src/components/app/blocks/TableBlock.svelte
View File

@ -265,7 +265,7 @@
props={{
dataSource,
buttonPosition: "top",
buttons: Utils.buildDynamicButtonConfig({
buttons: Utils.buildFormBlockButtonConfig({
_id: $component.id + "-form-edit",
showDeleteButton: deleteLabel !== "",
showSaveButton: true,
@ -299,7 +299,7 @@
props={{
dataSource,
buttonPosition: "top",
buttons: Utils.buildDynamicButtonConfig({
buttons: Utils.buildFormBlockButtonConfig({
_id: $component.id + "-form-new",
showDeleteButton: false,
showSaveButton: true,

2
packages/client/src/components/app/blocks/form/FormBlock.svelte
View File

@ -106,7 +106,7 @@
notificationOverride,
buttons:
buttons ||
Utils.buildDynamicButtonConfig({
Utils.buildFormBlockButtonConfig({
_id: $component.id,
showDeleteButton,
showSaveButton,

56
packages/frontend-core/src/utils/utils.js
View File

@ -116,7 +116,7 @@ export const domDebounce = callback => {
*
* @param {any} props
* */
export const buildDynamicButtonConfig = props => {
export const buildFormBlockButtonConfig = props => {
const {
_id,
actionType,
@ -130,7 +130,6 @@ export const buildDynamicButtonConfig = props => {
} = props || {}
if (!_id) {
console.log("MISSING ID")
return
}
const formId = `${_id}-form`
@ -241,3 +240,56 @@ export const buildDynamicButtonConfig = props => {
return defaultButtons
}
export const buildMultiStepFormBlockButtonConfig = props => {
const { _id, steps, currentStep } = props || {}
// Sanity check
if (!_id || !steps?.length) {
return
}
let buttons = []
// Add previous step button if we aren't the first step
buttons.push({
_id: Helpers.uuid(),
_component: "@budibase/standard-components/button",
_instanceName: Helpers.uuid(),
text: "Back",
type: "secondary",
size: "M",
disabled: currentStep === 0,
onClick: [
{
parameters: {
type: "prev",
componentId: `${_id}-form`,
},
"##eventHandlerType": "Change Form Step",
},
],
})
// Add a next button if we aren't the last step
buttons.push({
_id: Helpers.uuid(),
_component: "@budibase/standard-components/button",
_instanceName: Helpers.uuid(),
text: "Next",
type: "cta",
size: "M",
disabled: currentStep === steps.length - 1,
onClick: [
{
parameters: {
type: "next",
componentId: `${_id}-form`,
},
"##eventHandlerType": "Change Form Step",
},
],
})
return buttons
}