Merge pull request #13527 from Budibase/prefill-cards
Prefill card blocks
This commit is contained in:
Andrew Kingston
GitHub
commit
868989d4c6
4 changed files with 168 additions and 14 deletions
|
|
@ -20,7 +20,7 @@ import {
|
|||
previewStore,
|
||||
tables,
|
||||
componentTreeNodesStore,
|
||||
} from "stores/builder/index"
|
||||
} from "stores/builder"
|
||||
import { buildFormSchema, getSchemaForDatasource } from "dataBinding"
|
||||
import {
|
||||
BUDIBASE_INTERNAL_DB_ID,
|
||||
|
|
@ -30,6 +30,7 @@ import {
|
|||
} from "constants/backend"
|
||||
import BudiStore from "../BudiStore"
|
||||
import { Utils } from "@budibase/frontend-core"
|
||||
import { FieldType } from "@budibase/types"
|
||||
|
||||
export const INITIAL_COMPONENTS_STATE = {
|
||||
components: {},
|
||||
|
|
@ -296,6 +297,80 @@ export class ComponentStore extends BudiStore {
|
|||
}
|
||||
}
|
||||
})
|
||||
|
||||
// Add default bindings to card blocks
|
||||
if (component._component.endsWith("/cardsblock")) {
|
||||
// Only proceed if the card is empty, i.e. we just changed datasource or
|
||||
// just created the card
|
||||
const cardKeys = ["cardTitle", "cardSubtitle", "cardDescription"]
|
||||
if (cardKeys.every(key => !component[key]) && !component.cardImageURL) {
|
||||
const { _id, dataSource } = component
|
||||
if (dataSource) {
|
||||
const { schema, table } = getSchemaForDatasource(screen, dataSource)
|
||||
|
||||
// Finds fields by types from the schema of the configured datasource
|
||||
const findFieldTypes = fieldTypes => {
|
||||
if (!Array.isArray(fieldTypes)) {
|
||||
fieldTypes = [fieldTypes]
|
||||
}
|
||||
return Object.entries(schema || {})
|
||||
.filter(([name, fieldSchema]) => {
|
||||
return (
|
||||
fieldTypes.includes(fieldSchema.type) &&
|
||||
!fieldSchema.autoColumn &&
|
||||
name !== table?.primaryDisplay &&
|
||||
!name.startsWith("_")
|
||||
)
|
||||
})
|
||||
.map(([name]) => name)
|
||||
}
|
||||
|
||||
// Inserts a card binding for a certain setting
|
||||
const addBinding = (key, fallback, ...parts) => {
|
||||
if (parts.some(x => x == null)) {
|
||||
component[key] = fallback
|
||||
} else {
|
||||
parts.unshift(`${_id}-repeater`)
|
||||
component[key] = `{{ ${parts.map(safe).join(".")} }}`
|
||||
}
|
||||
}
|
||||
|
||||
// Extract good field candidates to prefill our cards with.
|
||||
// Use the primary display as the best field, if it exists.
|
||||
const shortFields = [
|
||||
...findFieldTypes(FieldType.STRING),
|
||||
...findFieldTypes(FieldType.OPTIONS),
|
||||
...findFieldTypes(FieldType.ARRAY),
|
||||
...findFieldTypes(FieldType.NUMBER),
|
||||
]
|
||||
const longFields = findFieldTypes(FieldType.LONGFORM)
|
||||
if (schema?.[table?.primaryDisplay]) {
|
||||
shortFields.unshift(table.primaryDisplay)
|
||||
}
|
||||
|
||||
// Fill title and subtitle with short fields
|
||||
addBinding("cardTitle", "Title", shortFields[0])
|
||||
addBinding("cardSubtitle", "Subtitle", shortFields[1])
|
||||
|
||||
// Fill description with a long field if possible
|
||||
const longField = longFields[0] ?? shortFields[2]
|
||||
addBinding("cardDescription", "Description", longField)
|
||||
|
||||
// Attempt to fill the image setting.
|
||||
// Check single attachment fields first.
|
||||
let imgField = findFieldTypes(FieldType.ATTACHMENT_SINGLE)[0]
|
||||
if (imgField) {
|
||||
addBinding("cardImageURL", null, imgField, "url")
|
||||
} else {
|
||||
// Then try multi-attachment fields if no single ones exist
|
||||
imgField = findFieldTypes(FieldType.ATTACHMENTS)[0]
|
||||
if (imgField) {
|
||||
addBinding("cardImageURL", null, imgField, 0, "url")
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -324,21 +399,21 @@ export class ComponentStore extends BudiStore {
|
|||
...presetProps,
|
||||
}
|
||||
|
||||
// Enrich empty settings
|
||||
// Standard post processing
|
||||
this.enrichEmptySettings(instance, {
|
||||
parent,
|
||||
screen: get(selectedScreen),
|
||||
useDefaultValues: true,
|
||||
})
|
||||
|
||||
// Migrate nested component settings
|
||||
this.migrateSettings(instance)
|
||||
|
||||
// Add any extra properties the component needs
|
||||
// Custom post processing for creation only
|
||||
let extras = {}
|
||||
if (definition.hasChildren) {
|
||||
extras._children = []
|
||||
}
|
||||
|
||||
// Add step name to form steps
|
||||
if (componentName.endsWith("/formstep")) {
|
||||
const parentForm = findClosestMatchingComponent(
|
||||
get(selectedScreen).props,
|
||||
|
|
@ -351,6 +426,7 @@ export class ComponentStore extends BudiStore {
|
|||
extras.step = formSteps.length + 1
|
||||
extras._instanceName = `Step ${formSteps.length + 1}`
|
||||
}
|
||||
|
||||
return {
|
||||
...cloneDeep(instance),
|
||||
...extras,
|
||||
|
|
@ -463,7 +539,6 @@ export class ComponentStore extends BudiStore {
|
|||
if (!componentId || !screenId) {
|
||||
const state = get(this.store)
|
||||
componentId = componentId || state.selectedComponentId
|
||||
|
||||
const screenState = get(screenStore)
|
||||
screenId = screenId || screenState.selectedScreenId
|
||||
}
|
||||
|
|
@ -471,7 +546,6 @@ export class ComponentStore extends BudiStore {
|
|||
return
|
||||
}
|
||||
const patchScreen = screen => {
|
||||
// findComponent looks in the tree not comp.settings[0]
|
||||
let component = findComponent(screen.props, componentId)
|
||||
if (!component) {
|
||||
return false
|
||||
|
|
@ -480,7 +554,7 @@ export class ComponentStore extends BudiStore {
|
|||
// Mutates the fetched component with updates
|
||||
const patchResult = patchFn(component, screen)
|
||||
|
||||
// Mutates the component with any required settings updates
|
||||
// Post processing
|
||||
const migrated = this.migrateSettings(component)
|
||||
|
||||
// Returning an explicit false signifies that we should skip this
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ import {
|
|||
DB_TYPE_EXTERNAL,
|
||||
DEFAULT_BB_DATASOURCE_ID,
|
||||
} from "constants/backend"
|
||||
import { makePropSafe as safe } from "@budibase/string-templates"
|
||||
|
||||
// Could move to fixtures
|
||||
const COMP_PREFIX = "@budibase/standard-components"
|
||||
|
|
@ -360,8 +361,30 @@ describe("Component store", () => {
|
|||
resourceId: internalTableDoc._id,
|
||||
type: "table",
|
||||
})
|
||||
|
||||
return comp
|
||||
}
|
||||
|
||||
it("enrichEmptySettings - initialise cards blocks with correct fields", async ctx => {
|
||||
const comp = enrichSettingsDS("cardsblock", ctx)
|
||||
const expectBinding = (setting, ...parts) => {
|
||||
expect(comp[setting]).toStrictEqual(
|
||||
`{{ ${safe(`${comp._id}-repeater`)}.${parts.map(safe).join(".")} }}`
|
||||
)
|
||||
}
|
||||
expectBinding("cardTitle", internalTableDoc.schema.MediaTitle.name)
|
||||
expectBinding("cardSubtitle", internalTableDoc.schema.MediaVersion.name)
|
||||
expectBinding(
|
||||
"cardDescription",
|
||||
internalTableDoc.schema.MediaDescription.name
|
||||
)
|
||||
expectBinding(
|
||||
"cardImageURL",
|
||||
internalTableDoc.schema.MediaImage.name,
|
||||
"url"
|
||||
)
|
||||
})
|
||||
|
||||
it("enrichEmptySettings - set default datasource for 'table' setting type", async ctx => {
|
||||
enrichSettingsDS("formblock", ctx)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import {
|
|||
DB_TYPE_EXTERNAL,
|
||||
DEFAULT_BB_DATASOURCE_ID,
|
||||
} from "constants/backend"
|
||||
import { FieldType } from "@budibase/types"
|
||||
|
||||
const getDocId = () => {
|
||||
return v4().replace(/-/g, "")
|
||||
|
|
@ -45,6 +46,52 @@ export const COMPONENT_DEFINITIONS = {
|
|||
},
|
||||
],
|
||||
},
|
||||
cardsblock: {
|
||||
block: true,
|
||||
name: "Cards Block",
|
||||
settings: [
|
||||
{
|
||||
type: "dataSource",
|
||||
label: "Data",
|
||||
key: "dataSource",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
section: true,
|
||||
name: "Cards",
|
||||
settings: [
|
||||
{
|
||||
type: "text",
|
||||
key: "cardTitle",
|
||||
label: "Title",
|
||||
nested: true,
|
||||
resetOn: "dataSource",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
key: "cardSubtitle",
|
||||
label: "Subtitle",
|
||||
nested: true,
|
||||
resetOn: "dataSource",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
key: "cardDescription",
|
||||
label: "Description",
|
||||
nested: true,
|
||||
resetOn: "dataSource",
|
||||
},
|
||||
{
|
||||
type: "text",
|
||||
key: "cardImageURL",
|
||||
label: "Image URL",
|
||||
nested: true,
|
||||
resetOn: "dataSource",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
container: {
|
||||
name: "Container",
|
||||
},
|
||||
|
|
@ -262,14 +309,23 @@ export const internalTableDoc = {
|
|||
name: "Media",
|
||||
sourceId: BUDIBASE_INTERNAL_DB_ID,
|
||||
sourceType: DB_TYPE_INTERNAL,
|
||||
primaryDisplay: "MediaTitle",
|
||||
schema: {
|
||||
MediaTitle: {
|
||||
name: "MediaTitle",
|
||||
type: "string",
|
||||
type: FieldType.STRING,
|
||||
},
|
||||
MediaVersion: {
|
||||
name: "MediaVersion",
|
||||
type: "string",
|
||||
type: FieldType.STRING,
|
||||
},
|
||||
MediaDescription: {
|
||||
name: "MediaDescription",
|
||||
type: FieldType.LONGFORM,
|
||||
},
|
||||
MediaImage: {
|
||||
name: "MediaImage",
|
||||
type: FieldType.ATTACHMENT_SINGLE,
|
||||
},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6243,27 +6243,28 @@
|
|||
"key": "cardTitle",
|
||||
"label": "Title",
|
||||
"nested": true,
|
||||
"defaultValue": "Title"
|
||||
"resetOn": "dataSource"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "cardSubtitle",
|
||||
"label": "Subtitle",
|
||||
"nested": true,
|
||||
"defaultValue": "Subtitle"
|
||||
"resetOn": "dataSource"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "cardDescription",
|
||||
"label": "Description",
|
||||
"nested": true,
|
||||
"defaultValue": "Description"
|
||||
"resetOn": "dataSource"
|
||||
},
|
||||
{
|
||||
"type": "text",
|
||||
"key": "cardImageURL",
|
||||
"label": "Image URL",
|
||||
"nested": true
|
||||
"nested": true,
|
||||
"resetOn": "dataSource"
|
||||
},
|
||||
{
|
||||
"type": "boolean",
|
||||
|
|
|
|||
Loading…
Reference in a new issue