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

Merge branch 'master' into contributor-enhancements

This commit is contained in:
Andrew Kingston 2024-12-31 14:11:03 +00:00 committed by GitHub
parent 1db1e6f11d 1a438a7473
commit 4a13cd27e8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
29 changed files with 460 additions and 272 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/ProgressCircle/ProgressCircle.svelte
View File

@ -37,7 +37,7 @@
}
}
export let overBackground
export let overBackground = false
</script>
<!-- svelte-ignore a11y-no-static-element-interactions -->

2
packages/builder/src/dataBinding.js
View File

@ -900,7 +900,7 @@ export const getSchemaForDatasourcePlus = (resourceId, options) => {
* optional and only needed for "provider" datasource types.
* @param datasource the datasource definition
* @param options options for generating the schema
* @return {{schema: Object, table: Object}}
* @return {{schema: Object, table: Table}}
*/
export const getSchemaForDatasource = (asset, datasource, options) => {
options = options || {}

30
packages/builder/src/stores/BudiStore.ts
View File

@ -1,7 +1,21 @@
import { writable, Writable, Readable } from "svelte/store"
import {
createLocalStorageStore,
createSessionStorageStore,
} from "@budibase/frontend-core"
export enum PersistenceType {
NONE = "none",
LOCAL = "local",
SESSION = "session",
}
interface BudiStoreOpts {
debug?: boolean
persistence?: {
type: PersistenceType
key: string
}
}
export class BudiStore<T> {
@ -11,7 +25,21 @@ export class BudiStore<T> {
set: Writable<T>["set"]
constructor(init: T, opts?: BudiStoreOpts) {
this.store = writable<T>(init)
if (opts?.persistence) {
switch (opts.persistence.type) {
case PersistenceType.LOCAL:
this.store = createLocalStorageStore(opts.persistence.key, init)
break
case PersistenceType.SESSION:
this.store = createSessionStorageStore(opts.persistence.key, init)
break
default:
this.store = writable<T>(init)
}
} else {
this.store = writable<T>(init)
}
this.subscribe = this.store.subscribe
this.update = this.store.update
this.set = this.store.set

12
packages/builder/src/stores/builder/app.ts
View File

@ -86,7 +86,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
super(INITIAL_APP_META_STATE)
}
reset(): void {
reset() {
this.store.set({ ...INITIAL_APP_META_STATE })
}
@ -94,7 +94,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
application: App
clientLibPath: string
hasLock: boolean
}): void {
}) {
const { application: app, clientLibPath, hasLock } = pkg
this.update(state => ({
@ -121,7 +121,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
}))
}
syncClientFeatures(features: Partial<ClientFeatures>): void {
syncClientFeatures(features: Partial<ClientFeatures>) {
this.update(state => ({
...state,
clientFeatures: {
@ -131,14 +131,14 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
}))
}
syncClientTypeSupportPresets(typeSupportPresets: TypeSupportPresets): void {
syncClientTypeSupportPresets(typeSupportPresets: TypeSupportPresets) {
this.update(state => ({
...state,
typeSupportPresets,
}))
}
async syncAppRoutes(): Promise<void> {
async syncAppRoutes() {
const resp = await API.fetchAppRoutes()
this.update(state => ({
...state,
@ -147,7 +147,7 @@ export class AppMetaStore extends BudiStore<AppMetaState> {
}
// Returned from socket
syncMetadata(metadata: { name: string; url: string; icon?: AppIcon }): void {
syncMetadata(metadata: { name: string; url: string; icon?: AppIcon }) {
const { name, url, icon } = metadata
this.update(state => ({
...state,

28
packages/builder/src/stores/builder/builder.ts
View File

@ -54,7 +54,7 @@ export class BuilderStore extends BudiStore<BuilderState> {
this.startBuilderOnboarding = this.startBuilderOnboarding.bind(this)
}
init(app: App): void {
init(app: App) {
if (!app?.appId) {
console.error("BuilderStore: No appId supplied for websocket")
return
@ -64,46 +64,46 @@ export class BuilderStore extends BudiStore<BuilderState> {
}
}
refresh(): void {
refresh() {
const currentState = get(this.store)
this.store.set(currentState)
}
reset(): void {
reset() {
this.store.set({ ...INITIAL_BUILDER_STATE })
this.websocket?.disconnect()
this.websocket = undefined
}
highlightSetting(key?: string, type?: string): void {
highlightSetting(key?: string, type?: string) {
this.update(state => ({
...state,
highlightedSetting: key ? { key, type: type || "info" } : null,
}))
}
propertyFocus(key: string | null): void {
propertyFocus(key: string | null) {
this.update(state => ({
...state,
propertyFocus: key,
}))
}
showBuilderSidePanel(): void {
showBuilderSidePanel() {
this.update(state => ({
...state,
builderSidePanel: true,
}))
}
hideBuilderSidePanel(): void {
hideBuilderSidePanel() {
this.update(state => ({
...state,
builderSidePanel: false,
}))
}
setPreviousTopNavPath(route: string, url: string): void {
setPreviousTopNavPath(route: string, url: string) {
this.update(state => ({
...state,
previousTopNavPath: {
@ -113,13 +113,13 @@ export class BuilderStore extends BudiStore<BuilderState> {
}))
}
selectResource(id: string): void {
selectResource(id: string) {
this.websocket?.emit(BuilderSocketEvent.SelectResource, {
resourceId: id,
})
}
registerTourNode(tourStepKey: string, node: HTMLElement): void {
registerTourNode(tourStepKey: string, node: HTMLElement) {
this.update(state => {
const update = {
...state,
@ -132,7 +132,7 @@ export class BuilderStore extends BudiStore<BuilderState> {
})
}
destroyTourNode(tourStepKey: string): void {
destroyTourNode(tourStepKey: string) {
const store = get(this.store)
if (store.tourNodes?.[tourStepKey]) {
const nodes = { ...store.tourNodes }
@ -144,7 +144,7 @@ export class BuilderStore extends BudiStore<BuilderState> {
}
}
startBuilderOnboarding(): void {
startBuilderOnboarding() {
this.update(state => ({
...state,
onboarding: true,
@ -152,14 +152,14 @@ export class BuilderStore extends BudiStore<BuilderState> {
}))
}
endBuilderOnboarding(): void {
endBuilderOnboarding() {
this.update(state => ({
...state,
onboarding: false,
}))
}
setTour(tourKey?: string | null): void {
setTour(tourKey?: string | null) {
this.update(state => ({
...state,
tourStepKey: null,

67
packages/builder/src/stores/builder/componentTreeNodes.js
View File

@ -1,67 +0,0 @@
import { get } from "svelte/store"
import { createSessionStorageStore } from "@budibase/frontend-core"
import { selectedScreen as selectedScreenStore } from "./screens"
import { findComponentPath } from "@/helpers/components"
const baseStore = createSessionStorageStore("openNodes", {})
const toggleNode = componentId => {
baseStore.update(openNodes => {
openNodes[`nodeOpen-${componentId}`] = !openNodes[`nodeOpen-${componentId}`]
return openNodes
})
}
const expandNodes = componentIds => {
baseStore.update(openNodes => {
const newNodes = Object.fromEntries(
componentIds.map(id => [`nodeOpen-${id}`, true])
)
return { ...openNodes, ...newNodes }
})
}
const collapseNodes = componentIds => {
baseStore.update(openNodes => {
const newNodes = Object.fromEntries(
componentIds.map(id => [`nodeOpen-${id}`, false])
)
return { ...openNodes, ...newNodes }
})
}
// Will ensure all parents of a node are expanded so that it is visible in the tree
const makeNodeVisible = componentId => {
const selectedScreen = get(selectedScreenStore)
const path = findComponentPath(selectedScreen.props, componentId)
const componentIds = path.map(component => component._id)
baseStore.update(openNodes => {
const newNodes = Object.fromEntries(
componentIds.map(id => [`nodeOpen-${id}`, true])
)
return { ...openNodes, ...newNodes }
})
}
const isNodeExpanded = componentId => {
const openNodes = get(baseStore)
return !!openNodes[`nodeOpen-${componentId}`]
}
const store = {
subscribe: baseStore.subscribe,
toggleNode,
expandNodes,
makeNodeVisible,
collapseNodes,
isNodeExpanded,
}
export default store

73
packages/builder/src/stores/builder/componentTreeNodes.ts Normal file
View File

@ -0,0 +1,73 @@
import { get } from "svelte/store"
import { selectedScreen as selectedScreenStore } from "./screens"
import { findComponentPath } from "@/helpers/components"
import { Screen, Component } from "@budibase/types"
import { BudiStore, PersistenceType } from "@/stores/BudiStore"
interface OpenNodesState {
[key: string]: boolean
}
export class ComponentTreeNodesStore extends BudiStore<OpenNodesState> {
constructor() {
super({} as OpenNodesState, {
persistence: {
type: PersistenceType.SESSION,
key: "openNodes",
},
})
}
toggleNode(componentId: string) {
this.update((openNodes: OpenNodesState) => {
openNodes[`nodeOpen-${componentId}`] =
!openNodes[`nodeOpen-${componentId}`]
return openNodes
})
}
expandNodes(componentIds: string[]) {
this.update((openNodes: OpenNodesState) => {
const newNodes = Object.fromEntries(
componentIds.map(id => [`nodeOpen-${id}`, true])
)
return { ...openNodes, ...newNodes }
})
}
collapseNodes(componentIds: string[]) {
this.update((openNodes: OpenNodesState) => {
const newNodes = Object.fromEntries(
componentIds.map(id => [`nodeOpen-${id}`, false])
)
return { ...openNodes, ...newNodes }
})
}
// Will ensure all parents of a node are expanded so that it is visible in the tree
makeNodeVisible(componentId: string) {
const selectedScreen: Screen = get(selectedScreenStore)
const path = findComponentPath(selectedScreen.props, componentId)
const componentIds = path.map((component: Component) => component._id)
this.update((openNodes: OpenNodesState) => {
const newNodes = Object.fromEntries(
componentIds.map((id: string) => [`nodeOpen-${id}`, true])
)
return { ...openNodes, ...newNodes }
})
}
isNodeExpanded(componentId: string): boolean {
const openNodes = get(this)
return !!openNodes[`nodeOpen-${componentId}`]
}
}
export default new ComponentTreeNodesStore()

268
packages/builder/src/stores/builder/components.js → packages/builder/src/stores/builder/components.ts
View File

@ -30,10 +30,40 @@ import {
} from "@/constants/backend"
import { BudiStore } from "../BudiStore"
import { Utils } from "@budibase/frontend-core"
import { FieldType } from "@budibase/types"
import { Component, FieldType, Screen, Table } from "@budibase/types"
import { utils } from "@budibase/shared-core"
export const INITIAL_COMPONENTS_STATE = {
interface ComponentDefinition {
component: string
name: string
friendlyName?: string
hasChildren?: boolean
settings?: ComponentSetting[]
features?: Record<string, boolean>
typeSupportPresets?: Record<string, any>
}
interface ComponentSetting {
key: string
type: string
section?: string
name?: string
defaultValue?: any
selectAllFields?: boolean
resetOn?: string | string[]
settings?: ComponentSetting[]
}
interface ComponentState {
components: Record<string, ComponentDefinition>
customComponents: string[]
selectedComponentId: string | null
componentToPaste?: Component | null
settingsCache: Record<string, ComponentSetting[]>
selectedScreenId?: string | null
}
export const INITIAL_COMPONENTS_STATE: ComponentState = {
components: {},
customComponents: [],
selectedComponentId: null,
@ -41,7 +71,7 @@ export const INITIAL_COMPONENTS_STATE = {
settingsCache: {},
}
export class ComponentStore extends BudiStore {
export class ComponentStore extends BudiStore<ComponentState> {
constructor() {
super(INITIAL_COMPONENTS_STATE)
@ -89,14 +119,14 @@ export class ComponentStore extends BudiStore {
* @param {string} appId
* @returns
*/
async refreshDefinitions(appId) {
async refreshDefinitions(appId: string) {
if (!appId) {
return
}
// Fetch definitions and filter out custom component definitions so we
// can flag them
const components = await API.fetchComponentLibDefinitions(appId)
const components: any = await API.fetchComponentLibDefinitions(appId)
const customComponents = Object.keys(components).filter(key =>
key.startsWith("plugin/")
)
@ -122,7 +152,7 @@ export class ComponentStore extends BudiStore {
* '@budibase/standard-components/container'
* @returns {object}
*/
getDefinition(componentType) {
getDefinition(componentType: string) {
if (!componentType) {
return null
}
@ -169,7 +199,7 @@ export class ComponentStore extends BudiStore {
* @param {object} enrichedComponent
* @returns {object} migrated Component
*/
migrateSettings(enrichedComponent) {
migrateSettings(enrichedComponent: Component) {
const componentPrefix = "@budibase/standard-components"
let migrated = false
@ -224,7 +254,7 @@ export class ComponentStore extends BudiStore {
* @param {object} opts
* @returns
*/
enrichEmptySettings(component, opts) {
enrichEmptySettings(component: Component, opts: any) {
if (!component?._component) {
return
}
@ -235,7 +265,7 @@ export class ComponentStore extends BudiStore {
if (!screen) {
return
}
settings.forEach(setting => {
settings.forEach((setting: ComponentSetting) => {
const value = component[setting.key]
// Fill empty settings
@ -257,7 +287,7 @@ export class ComponentStore extends BudiStore {
} else if (setting.type === "dataProvider") {
// Pick closest data provider where required
const path = findComponentPath(screen.props, treeId)
const providers = path.filter(component =>
const providers = path.filter((component: Component) =>
component._component?.endsWith("/dataprovider")
)
if (providers.length) {
@ -278,7 +308,8 @@ export class ComponentStore extends BudiStore {
const form = findClosestMatchingComponent(
screen.props,
treeId,
x => x._component === "@budibase/standard-components/form"
(x: Component) =>
x._component === "@budibase/standard-components/form"
)
const usedFields = Object.keys(buildFormSchema(form) || {})
@ -302,7 +333,8 @@ export class ComponentStore extends BudiStore {
// Validate data provider exists, or else clear it
const providers = findAllMatchingComponents(
screen?.props,
x => x._component === "@budibase/standard-components/dataprovider"
(x: Component) =>
x._component === "@budibase/standard-components/dataprovider"
)
const valid = providers?.some(dp => value.includes?.(dp._id))
if (!valid) {
@ -325,10 +357,14 @@ export class ComponentStore extends BudiStore {
if (cardKeys.every(key => !component[key]) && !component.cardImageURL) {
const { _id, dataSource } = component
if (dataSource) {
const { schema, table } = getSchemaForDatasource(screen, dataSource)
const {
schema,
table,
}: { schema: Record<string, any>; table: Table } =
getSchemaForDatasource(screen, dataSource, {})
// Finds fields by types from the schema of the configured datasource
const findFieldTypes = fieldTypes => {
const findFieldTypes = (fieldTypes: any) => {
if (!Array.isArray(fieldTypes)) {
fieldTypes = [fieldTypes]
}
@ -345,7 +381,11 @@ export class ComponentStore extends BudiStore {
}
// Inserts a card binding for a certain setting
const addBinding = (key, fallback, ...parts) => {
const addBinding = (
key: string,
fallback: string | null,
...parts: any[]
) => {
if (parts.some(x => x == null)) {
component[key] = fallback
} else {
@ -363,7 +403,7 @@ export class ComponentStore extends BudiStore {
...findFieldTypes(FieldType.NUMBER),
]
const longFields = findFieldTypes(FieldType.LONGFORM)
if (schema?.[table?.primaryDisplay]) {
if (table?.primaryDisplay && schema?.[table.primaryDisplay]) {
shortFields.unshift(table.primaryDisplay)
}
@ -399,7 +439,7 @@ export class ComponentStore extends BudiStore {
* @param {object} parent
* @returns
*/
createInstance(componentName, presetProps, parent) {
createInstance(componentName: string, presetProps: any, parent: any) {
const definition = this.getDefinition(componentName)
if (!definition) {
return null
@ -433,7 +473,7 @@ export class ComponentStore extends BudiStore {
}
// Custom post processing for creation only
let extras = {}
let extras: any = {}
if (definition.hasChildren) {
extras._children = []
}
@ -443,10 +483,11 @@ export class ComponentStore extends BudiStore {
const parentForm = findClosestMatchingComponent(
get(selectedScreen).props,
get(selectedComponent)._id,
component => component._component.endsWith("/form")
(component: Component) => component._component.endsWith("/form")
)
const formSteps = findAllMatchingComponents(parentForm, component =>
component._component.endsWith("/formstep")
const formSteps = findAllMatchingComponents(
parentForm,
(component: Component) => component._component.endsWith("/formstep")
)
extras.step = formSteps.length + 1
extras._instanceName = `Step ${formSteps.length + 1}`
@ -466,7 +507,12 @@ export class ComponentStore extends BudiStore {
* @param {number} index
* @returns
*/
async create(componentName, presetProps, parent, index) {
async create(
componentName: string,
presetProps: any,
parent: any,
index: number
) {
const state = get(this.store)
const componentInstance = this.createInstance(
componentName,
@ -479,23 +525,23 @@ export class ComponentStore extends BudiStore {
// Insert in position if specified
if (parent && index != null) {
await screenStore.patch(screen => {
await screenStore.patch((screen: Screen) => {
let parentComponent = findComponent(screen.props, parent)
if (!parentComponent._children?.length) {
parentComponent._children = [componentInstance]
} else {
parentComponent._children.splice(index, 0, componentInstance)
}
})
}, null)
}
// Otherwise we work out where this component should be inserted
else {
await screenStore.patch(screen => {
await screenStore.patch((screen: Screen) => {
// Find the selected component
let selectedComponentId = state.selectedComponentId
if (selectedComponentId.startsWith(`${screen._id}-`)) {
selectedComponentId = screen?.props._id
if (selectedComponentId?.startsWith(`${screen._id}-`)) {
selectedComponentId = screen.props._id || null
}
const currentComponent = findComponent(
screen.props,
@ -533,7 +579,7 @@ export class ComponentStore extends BudiStore {
parentComponent._children = []
}
parentComponent._children.push(componentInstance)
})
}, null)
}
// Select new component
@ -559,18 +605,22 @@ export class ComponentStore extends BudiStore {
* @param {string} screenId
* @returns
*/
async patch(patchFn, componentId, screenId) {
async patch(
patchFn: (component: Component, screen: Screen) => any,
componentId?: string,
screenId?: string
) {
// Use selected component by default
if (!componentId || !screenId) {
const state = get(this.store)
componentId = componentId || state.selectedComponentId
componentId = componentId ?? state.selectedComponentId ?? undefined
const screenState = get(screenStore)
screenId = screenId || screenState.selectedScreenId
}
if (!componentId || !screenId || !patchFn) {
return
}
const patchScreen = screen => {
const patchScreen = (screen: Screen) => {
let component = findComponent(screen.props, componentId)
if (!component) {
return false
@ -594,7 +644,7 @@ export class ComponentStore extends BudiStore {
* @param {object} component
* @returns
*/
async delete(component) {
async delete(component: Component) {
if (!component) {
return
}
@ -602,7 +652,7 @@ export class ComponentStore extends BudiStore {
// Determine the next component to select, and select it before deletion
// to avoid an intermediate state of no component selection
const state = get(this.store)
let nextId
let nextId: string | null = ""
if (state.selectedComponentId === component._id) {
nextId = this.getNext()
if (!nextId) {
@ -621,7 +671,7 @@ export class ComponentStore extends BudiStore {
}
// Patch screen
await screenStore.patch(screen => {
await screenStore.patch((screen: Screen) => {
// Check component exists
component = findComponent(screen.props, component._id)
if (!component) {
@ -634,12 +684,12 @@ export class ComponentStore extends BudiStore {
return false
}
parent._children = parent._children.filter(
child => child._id !== component._id
(child: Component) => child._id !== component._id
)
})
}, null)
}
copy(component, cut = false, selectParent = true) {
copy(component: Component, cut = false, selectParent = true) {
// Update store with copied component
this.update(state => {
state.componentToPaste = cloneDeep(component)
@ -665,7 +715,7 @@ export class ComponentStore extends BudiStore {
*
* @param {string} componentId
*/
select(componentId) {
select(componentId: string) {
this.update(state => {
state.selectedComponentId = componentId
return state
@ -679,12 +729,17 @@ export class ComponentStore extends BudiStore {
* @param {object} targetScreen
* @returns
*/
async paste(targetComponent, mode, targetScreen, selectComponent = true) {
async paste(
targetComponent: Component,
mode: string,
targetScreen: Screen,
selectComponent = true
) {
const state = get(this.store)
if (!state.componentToPaste) {
return
}
let newComponentId
let newComponentId: string | null = ""
// Remove copied component if cutting, regardless if pasting works
let componentToPaste = cloneDeep(state.componentToPaste)
@ -696,7 +751,7 @@ export class ComponentStore extends BudiStore {
}
// Patch screen
const patch = screen => {
const patch = (screen: Screen) => {
// Get up to date ref to target
targetComponent = findComponent(screen.props, targetComponent._id)
if (!targetComponent) {
@ -712,7 +767,7 @@ export class ComponentStore extends BudiStore {
if (!cut) {
componentToPaste = makeComponentUnique(componentToPaste)
}
newComponentId = componentToPaste._id
newComponentId = componentToPaste._id!
// Strip grid position metadata if pasting into a new screen, but keep
// alignment metadata
@ -732,7 +787,7 @@ export class ComponentStore extends BudiStore {
const parent = findComponentParent(screen.props, originalId)
if (parent?._children) {
parent._children = parent._children.filter(
component => component._id !== originalId
(component: Component) => component._id !== originalId
)
}
}
@ -740,7 +795,7 @@ export class ComponentStore extends BudiStore {
// Check inside is valid
if (mode === "inside") {
const definition = this.getDefinition(targetComponent._component)
if (!definition.hasChildren) {
if (!definition?.hasChildren) {
mode = "below"
}
}
@ -758,14 +813,16 @@ export class ComponentStore extends BudiStore {
if (!parent?._children) {
return false
}
const targetIndex = parent._children.findIndex(component => {
return component._id === targetComponent._id
})
const targetIndex = parent._children.findIndex(
(component: Component) => {
return component._id === targetComponent._id
}
)
const index = mode === "above" ? targetIndex : targetIndex + 1
parent._children.splice(index, 0, componentToPaste)
}
}
const targetScreenId = targetScreen?._id || state.selectedScreenId
const targetScreenId = targetScreen?._id ?? state.selectedScreenId ?? null
await screenStore.patch(patch, targetScreenId)
// Select the new component
@ -785,7 +842,9 @@ export class ComponentStore extends BudiStore {
const componentId = state.selectedComponentId
const screen = get(selectedScreen)
const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex(x => x._id === componentId)
const index = parent?._children.findIndex(
(x: Component) => x._id === componentId
)
// Check for screen and navigation component edge cases
const screenComponentId = `${screen._id}-screen`
@ -832,7 +891,9 @@ export class ComponentStore extends BudiStore {
const componentId = component?._id
const screen = get(selectedScreen)
const parent = findComponentParent(screen.props, componentId)
const index = parent?._children.findIndex(x => x._id === componentId)
const index = parent?._children.findIndex(
(x: Component) => x._id === componentId
)
// Check for screen and navigation component edge cases
const screenComponentId = `${screen._id}-screen`
@ -862,7 +923,7 @@ export class ComponentStore extends BudiStore {
let target = parent
let targetParent = findComponentParent(screen.props, target._id)
let targetIndex = targetParent?._children.findIndex(
child => child._id === target._id
(child: Component) => child._id === target._id
)
while (
targetParent != null &&
@ -871,7 +932,7 @@ export class ComponentStore extends BudiStore {
target = targetParent
targetParent = findComponentParent(screen.props, target._id)
targetIndex = targetParent?._children.findIndex(
child => child._id === target._id
(child: Component) => child._id === target._id
)
}
if (targetParent) {
@ -901,13 +962,15 @@ export class ComponentStore extends BudiStore {
}
}
async moveUp(component) {
await screenStore.patch(screen => {
async moveUp(component: Component) {
await screenStore.patch((screen: Screen) => {
const componentId = component?._id
const parent = findComponentParent(screen.props, componentId)
// Check we aren't right at the top of the tree
const index = parent?._children.findIndex(x => x._id === componentId)
const index = parent?._children.findIndex(
(x: Component) => x._id === componentId
)
if (!parent || (index === 0 && parent._id === screen.props._id)) {
return
}
@ -915,7 +978,7 @@ export class ComponentStore extends BudiStore {
// Copy original component and remove it from the parent
const originalComponent = cloneDeep(parent._children[index])
parent._children = parent._children.filter(
component => component._id !== componentId
(component: Component) => component._id !== componentId
)
// If we have siblings above us, move up
@ -925,7 +988,7 @@ export class ComponentStore extends BudiStore {
const previousSibling = parent._children[index - 1]
const definition = this.getDefinition(previousSibling._component)
if (
definition.hasChildren &&
definition?.hasChildren &&
componentTreeNodesStore.isNodeExpanded(previousSibling._id)
) {
previousSibling._children.push(originalComponent)
@ -942,15 +1005,15 @@ export class ComponentStore extends BudiStore {
else if (parent._id !== screen.props._id) {
const grandParent = findComponentParent(screen.props, parent._id)
const parentIndex = grandParent._children.findIndex(
child => child._id === parent._id
(child: Component) => child._id === parent._id
)
grandParent._children.splice(parentIndex, 0, originalComponent)
}
})
}, null)
}
async moveDown(component) {
await screenStore.patch(screen => {
async moveDown(component: Component) {
await screenStore.patch((screen: Screen) => {
const componentId = component?._id
const parent = findComponentParent(screen.props, componentId)
@ -960,7 +1023,9 @@ export class ComponentStore extends BudiStore {
}
// Check we aren't right at the bottom of the tree
const index = parent._children.findIndex(x => x._id === componentId)
const index = parent._children.findIndex(
(x: Component) => x._id === componentId
)
if (
index === parent._children.length - 1 &&
parent._id === screen.props._id
@ -971,7 +1036,7 @@ export class ComponentStore extends BudiStore {
// Copy the original component and remove from parent
const originalComponent = cloneDeep(parent._children[index])
parent._children = parent._children.filter(
component => component._id !== componentId
(component: Component) => component._id !== componentId
)
// Move below the next sibling if we are not the last sibling
@ -980,7 +1045,7 @@ export class ComponentStore extends BudiStore {
const nextSibling = parent._children[index]
const definition = this.getDefinition(nextSibling._component)
if (
definition.hasChildren &&
definition?.hasChildren &&
componentTreeNodesStore.isNodeExpanded(nextSibling._id)
) {
nextSibling._children.splice(0, 0, originalComponent)
@ -996,15 +1061,15 @@ export class ComponentStore extends BudiStore {
else {
const grandParent = findComponentParent(screen.props, parent._id)
const parentIndex = grandParent._children.findIndex(
child => child._id === parent._id
(child: Component) => child._id === parent._id
)
grandParent._children.splice(parentIndex + 1, 0, originalComponent)
}
})
}, null)
}
async updateStyle(name, value) {
await this.patch(component => {
async updateStyle(name: string, value: string) {
await this.patch((component: Component) => {
if (value == null || value === "") {
delete component._styles.normal[name]
} else {
@ -1013,8 +1078,8 @@ export class ComponentStore extends BudiStore {
})
}
async updateStyles(styles, id) {
const patchFn = component => {
async updateStyles(styles: Record<string, string>, id: string) {
const patchFn = (component: Component) => {
component._styles.normal = {
...component._styles.normal,
...styles,
@ -1023,24 +1088,24 @@ export class ComponentStore extends BudiStore {
await this.patch(patchFn, id)
}
async updateCustomStyle(style) {
await this.patch(component => {
async updateCustomStyle(style: Record<string, string>) {
await this.patch((component: Component) => {
component._styles.custom = style
})
}
async updateConditions(conditions) {
await this.patch(component => {
async updateConditions(conditions: Record<string, any>) {
await this.patch((component: Component) => {
component._conditions = conditions
})
}
async updateSetting(name, value) {
async updateSetting(name: string, value: any) {
await this.patch(this.updateComponentSetting(name, value))
}
updateComponentSetting(name, value) {
return component => {
updateComponentSetting(name: string, value: any) {
return (component: Component) => {
if (!name || !component) {
return false
}
@ -1050,10 +1115,12 @@ export class ComponentStore extends BudiStore {
}
const settings = this.getComponentSettings(component._component)
const updatedSetting = settings.find(setting => setting.key === name)
const updatedSetting = settings.find(
(setting: ComponentSetting) => setting.key === name
)
// Reset dependent fields
settings.forEach(setting => {
settings.forEach((setting: ComponentSetting) => {
const needsReset =
name === setting.resetOn ||
(Array.isArray(setting.resetOn) && setting.resetOn.includes(name))
@ -1066,15 +1133,16 @@ export class ComponentStore extends BudiStore {
updatedSetting?.type === "dataSource" ||
updatedSetting?.type === "table"
) {
const { schema } = getSchemaForDatasource(null, value)
const { schema }: { schema: Record<string, any> } =
getSchemaForDatasource(null, value, null)
const columnNames = Object.keys(schema || {})
const multifieldKeysToSelectAll = settings
.filter(setting => {
.filter((setting: ComponentSetting) => {
return setting.type === "multifield" && setting.selectAllFields
})
.map(setting => setting.key)
.map((setting: ComponentSetting) => setting.key)
multifieldKeysToSelectAll.forEach(key => {
multifieldKeysToSelectAll.forEach((key: string) => {
component[key] = columnNames
})
}
@ -1083,14 +1151,14 @@ export class ComponentStore extends BudiStore {
}
}
requestEjectBlock(componentId) {
requestEjectBlock(componentId: string) {
previewStore.sendEvent("eject-block", componentId)
}
async handleEjectBlock(componentId, ejectedDefinition) {
let nextSelectedComponentId
async handleEjectBlock(componentId: string, ejectedDefinition: Component) {
let nextSelectedComponentId: string | null = null
await screenStore.patch(screen => {
await screenStore.patch((screen: Screen) => {
const block = findComponent(screen.props, componentId)
const parent = findComponentParent(screen.props, componentId)
@ -1108,7 +1176,7 @@ export class ComponentStore extends BudiStore {
// _containsSlot flag to know where to insert them
const slotContainer = findAllMatchingComponents(
ejectedDefinition,
x => x._containsSlot
(x: Component) => x._containsSlot
)[0]
if (slotContainer) {
delete slotContainer._containsSlot
@ -1120,10 +1188,12 @@ export class ComponentStore extends BudiStore {
// Replace block with ejected definition
ejectedDefinition = makeComponentUnique(ejectedDefinition)
const index = parent._children.findIndex(x => x._id === componentId)
const index = parent._children.findIndex(
(x: Component) => x._id === componentId
)
parent._children[index] = ejectedDefinition
nextSelectedComponentId = ejectedDefinition._id
})
nextSelectedComponentId = ejectedDefinition._id ?? null
}, null)
// Select new root component
if (nextSelectedComponentId) {
@ -1134,7 +1204,7 @@ export class ComponentStore extends BudiStore {
}
}
async addParent(componentId, parentType) {
async addParent(componentId: string, parentType: string) {
if (!componentId || !parentType) {
return
}
@ -1146,7 +1216,7 @@ export class ComponentStore extends BudiStore {
}
// Replace component with a version wrapped in a new parent
await screenStore.patch(screen => {
await screenStore.patch((screen: Screen) => {
// Get this component definition and parent definition
let definition = findComponent(screen.props, componentId)
let oldParentDefinition = findComponentParent(screen.props, componentId)
@ -1156,7 +1226,7 @@ export class ComponentStore extends BudiStore {
// Replace component with parent
const index = oldParentDefinition._children.findIndex(
component => component._id === componentId
(component: Component) => component._id === componentId
)
if (index === -1) {
return false
@ -1165,7 +1235,7 @@ export class ComponentStore extends BudiStore {
...newParentDefinition,
_children: [definition],
}
})
}, null)
// Select the new parent
this.update(state => {
@ -1181,7 +1251,7 @@ export class ComponentStore extends BudiStore {
* '@budibase/standard-components/container'
* @returns {boolean}
*/
isCached(componentType) {
isCached(componentType: string) {
const settings = get(this.store).settingsCache
return componentType in settings
}
@ -1194,8 +1264,8 @@ export class ComponentStore extends BudiStore {
* '@budibase/standard-components/container'
* @returns {array} the settings
*/
cacheSettings(componentType, definition) {
let settings = []
cacheSettings(componentType: string, definition: ComponentDefinition | null) {
let settings: ComponentSetting[] = []
if (definition) {
settings = definition.settings?.filter(setting => !setting.section) ?? []
definition.settings
@ -1229,7 +1299,7 @@ export class ComponentStore extends BudiStore {
* '@budibase/standard-components/container'
* @returns {Array<object>}
*/
getComponentSettings(componentType) {
getComponentSettings(componentType: string) {
if (!componentType) {
return []
}

18
packages/builder/src/stores/builder/integrations.js
View File

@ -1,18 +0,0 @@
import { writable } from "svelte/store"
import { API } from "@/api"
const createIntegrationsStore = () => {
const store = writable({})
const init = async () => {
const integrations = await API.getIntegrations()
store.set(integrations)
}
return {
...store,
init,
}
}
export const integrations = createIntegrationsStore()

34
packages/builder/src/stores/builder/integrations.ts Normal file
View File

@ -0,0 +1,34 @@
import { writable, type Writable } from "svelte/store"
import { API } from "@/api"
import { Integration } from "@budibase/types"
type IntegrationsState = Record<string, Integration>
const INITIAL_STATE: IntegrationsState = {}
const createIntegrationsStore = () => {
const store: Writable<IntegrationsState> = writable(INITIAL_STATE)
const init = async () => {
const response = await API.getIntegrations()
// Filter out undefineds
const integrations = Object.entries(response).reduce(
(acc, [key, value]) => {
if (value) {
acc[key] = value
}
return acc
},
{} as IntegrationsState
)
store.set(integrations)
}
return {
...store,
init,
}
}
export const integrations = createIntegrationsStore()

2
packages/builder/src/stores/builder/screens.js
View File

@ -274,7 +274,7 @@ export class ScreenStore extends BudiStore {
/**
* @param {function} patchFn
* @param {string} screenId
* @param {string | null} screenId
* @returns
*/
async patch(patchFn, screenId) {

7
packages/client/svelte.config.mjs Normal file
View File

@ -0,0 +1,7 @@
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte"
const config = {
preprocess: vitePreprocess(),
}
export default config

11
packages/frontend-core/src/components/grid/layout/Grid.svelte
View File

@ -1,4 +1,4 @@
<script>
<script lang="ts">
import { setContext, onMount } from "svelte"
import { writable, derived } from "svelte/store"
import { fade } from "svelte/transition"
@ -53,17 +53,16 @@
const gridID = `grid-${Math.random().toString().slice(2)}`
// Store props in a store for reference in other stores
const props = writable($$props)
const props: any = writable($$props)
// Build up context
let context = {
let context = attachStores({
API: API || createAPIClient(),
Constants,
gridID,
props,
}
context = { ...context, ...createEventManagers() }
context = attachStores(context)
...createEventManagers(),
})
// Reference some stores for local use
const {

6
packages/frontend-core/src/components/grid/lib/events.js → packages/frontend-core/src/components/grid/lib/events.ts
View File

@ -2,11 +2,11 @@ import { createEventDispatcher } from "svelte"
export const createEventManagers = () => {
const svelteDispatch = createEventDispatcher()
let subscribers = {}
let subscribers: Record<string, ((...params: any) => void)[]> = {}
// Dispatches an event, notifying subscribers and also emitting a normal
// svelte event
const dispatch = (event, payload) => {
const dispatch = (event: string, payload: any) => {
svelteDispatch(event, payload)
const subs = subscribers[event] || []
for (let i = 0; i < subs.length; i++) {
@ -15,7 +15,7 @@ export const createEventManagers = () => {
}
// Subscribes to events
const subscribe = (event, callback) => {
const subscribe = (event: string, callback: () => void) => {
const subs = subscribers[event] || []
subscribers[event] = [...subs, callback]

16
packages/frontend-core/src/components/grid/stores/bounds.js
View File

@ -1,16 +0,0 @@
import { derived, writable } from "svelte/store"
export const createStores = () => {
const bounds = writable({
left: 0,
top: 0,
width: 0,
height: 0,
})
// Derive height and width as primitives to avoid wasted computation
const width = derived(bounds, $bounds => $bounds.width, 0)
const height = derived(bounds, $bounds => $bounds.height, 0)
return { bounds, height, width }
}

29
packages/frontend-core/src/components/grid/stores/bounds.ts Normal file
View File

@ -0,0 +1,29 @@
import { derived, Readable, Writable, writable } from "svelte/store"
interface BoundsStore {
bounds: Writable<{
left: number
top: number
width: number
height: number
}>
height: Readable<number>
width: Readable<number>
}
export type Store = BoundsStore
export const createStores = (): BoundsStore => {
const bounds = writable({
left: 0,
top: 0,
width: 0,
height: 0,
})
// Derive height and width as primitives to avoid wasted computation
const width = derived(bounds, $bounds => $bounds.width, 0)
const height = derived(bounds, $bounds => $bounds.height, 0)
return { bounds, height, width }
}

27
packages/frontend-core/src/components/grid/stores/cache.js → packages/frontend-core/src/components/grid/stores/cache.ts
View File

@ -1,16 +1,31 @@
export const createActions = context => {
import { FindTableResponse } from "@budibase/types"
import { Store as StoreContext } from "."
interface CacheActionStore {
cache: {
actions: {
getPrimaryDisplayForTableId: (tableId: string) => Promise<string>
getTable: (tableId: string) => Promise<FindTableResponse>
resetCache: () => any
}
}
}
export type Store = CacheActionStore
export const createActions = (context: StoreContext): CacheActionStore => {
const { API } = context
// Cache for the primary display columns of different tables.
// If we ever need to cache table definitions for other purposes then we can
// expand this to be a more generic cache.
let tableCache = {}
let tableCache: Record<string, Promise<FindTableResponse>> = {}
const resetCache = () => {
tableCache = {}
}
const fetchTable = async tableId => {
const fetchTable = async (tableId: string) => {
// If we've never encountered this tableId before then store a promise that
// resolves to the primary display so that subsequent invocations before the
// promise completes can reuse this promise
@ -21,13 +36,13 @@ export const createActions = context => {
return await tableCache[tableId]
}
const getPrimaryDisplayForTableId = async tableId => {
const getPrimaryDisplayForTableId = async (tableId: string) => {
const table = await fetchTable(tableId)
const display = table?.primaryDisplay || table?.schema?.[0]?.name
return display
}
const getTable = async tableId => {
const getTable = async (tableId: string) => {
const table = await fetchTable(tableId)
return table
}
@ -43,7 +58,7 @@ export const createActions = context => {
}
}
export const initialise = context => {
export const initialise = (context: StoreContext) => {
const { datasource, cache } = context
// Wipe the caches whenever the datasource changes to ensure we aren't

7
packages/frontend-core/src/components/grid/stores/columns.ts
View File

@ -161,7 +161,7 @@ export const initialise = (context: StoreContext) => {
columns.set([])
return
}
const $columns = get(columns)
const $displayColumn = get(displayColumn)
// Find primary display
@ -176,16 +176,15 @@ export const initialise = (context: StoreContext) => {
Object.keys($enrichedSchema)
.map(field => {
const fieldSchema = $enrichedSchema[field]
const oldColumn = $columns?.find(col => col.name === field)
const column: UIColumn = {
type: fieldSchema.type,
name: field,
label: fieldSchema.displayName || field,
schema: fieldSchema,
width: fieldSchema.width || oldColumn?.width || DefaultColumnWidth,
width: fieldSchema.width || DefaultColumnWidth,
visible: fieldSchema.visible ?? true,
readonly: fieldSchema.readonly,
order: fieldSchema.order ?? oldColumn?.order,
order: fieldSchema.order,
conditions: fieldSchema.conditions,
related: fieldSchema.related,
calculationType: fieldSchema.calculationType,

2
packages/frontend-core/src/components/grid/stores/datasources/nonPlus.ts
View File

@ -122,7 +122,7 @@ export const initialise = (context: StoreContext) => {
}
$fetch?.update({
sortOrder: $sort.order || SortOrder.ASCENDING,
sortColumn: $sort.column,
sortColumn: $sort.column ?? undefined,
})
})
)

2
packages/frontend-core/src/components/grid/stores/datasources/table.ts
View File

@ -139,7 +139,7 @@ export const initialise = (context: StoreContext) => {
}
$fetch.update({
sortOrder: $sort.order || SortOrder.ASCENDING,
sortColumn: $sort.column,
sortColumn: $sort.column ?? undefined,
})
})
)

4
packages/frontend-core/src/components/grid/stores/datasources/viewV2.ts
View File

@ -173,7 +173,7 @@ export const initialise = (context: StoreContext) => {
await datasource.actions.saveDefinition({
...$view,
sort: {
field: $sort.column,
field: $sort.column!,
order: $sort.order || SortOrder.ASCENDING,
},
})
@ -187,7 +187,7 @@ export const initialise = (context: StoreContext) => {
}
$fetch.update({
sortOrder: $sort.order,
sortColumn: $sort.column,
sortColumn: $sort.column ?? undefined,
})
})
)

28
packages/frontend-core/src/components/grid/stores/index.ts
View File

@ -1,4 +1,4 @@
import { Readable, Writable } from "svelte/store"
import { Writable } from "svelte/store"
import type { APIClient } from "../../../api/types"
import * as Bounds from "./bounds"
@ -25,6 +25,7 @@ import * as NonPlus from "./datasources/nonPlus"
import * as Cache from "./cache"
import * as Conditions from "./conditions"
import { SortOrder, UIDatasource, UISearchFilter } from "@budibase/types"
import * as Constants from "../lib/constants"
const DependencyOrderedStores = [
Sort,
@ -73,12 +74,16 @@ export interface BaseStoreProps {
canEditColumns?: boolean
canExpandRows?: boolean
canSaveSchema?: boolean
minHeight?: number
}
export interface BaseStore {
API: APIClient
gridID: string
props: Writable<BaseStoreProps>
subscribe: any
dispatch: (event: string, data: any) => any
Constants: typeof Constants
}
export type Store = BaseStore &
@ -93,22 +98,19 @@ export type Store = BaseStore &
Filter.Store &
UI.Store &
Clipboard.Store &
Scroll.Store & {
// TODO while typing the rest of stores
sort: Writable<any>
subscribe: any
dispatch: (event: string, data: any) => any
notifications: Writable<any>
width: Writable<number>
bounds: Readable<any>
height: Readable<number>
} & Rows.Store &
Scroll.Store &
Rows.Store &
Reorder.Store &
Resize.Store &
Config.Store &
Conditions.Store
Conditions.Store &
Cache.Store &
Viewport.Store &
Notifications.Store &
Sort.Store &
Bounds.Store
export const attachStores = (context: Store): Store => {
export const attachStores = (context: BaseStore): Store => {
// Atomic store creation
for (let store of DependencyOrderedStores) {
if ("createStores" in store) {

14
packages/frontend-core/src/components/grid/stores/notifications.js → packages/frontend-core/src/components/grid/stores/notifications.ts
View File

@ -1,7 +1,17 @@
import { notifications as BBUINotifications } from "@budibase/bbui"
import { derived } from "svelte/store"
import { derived, Readable } from "svelte/store"
import { Store as StoreContext } from "."
export const createStores = context => {
interface NotificationStore {
notifications: Readable<{
success: (message: string) => void
error: (message: string) => void
}>
}
export type Store = NotificationStore
export const createStores = (context: StoreContext): NotificationStore => {
const { notifySuccess, notifyError } = context
// Normally we would not derive a store in "createStores" as it should be

3
packages/frontend-core/src/components/grid/stores/pagination.js → packages/frontend-core/src/components/grid/stores/pagination.ts
View File

@ -1,6 +1,7 @@
import { derived } from "svelte/store"
import { Store as StoreContext } from "."
export const initialise = context => {
export const initialise = (context: StoreContext) => {
const { scrolledRowCount, rows, visualRowCapacity } = context
// Derive how many rows we have in total

16
packages/frontend-core/src/components/grid/stores/sort.js → packages/frontend-core/src/components/grid/stores/sort.ts
View File

@ -1,8 +1,18 @@
import { derived, get } from "svelte/store"
import { derived, get, Writable } from "svelte/store"
import { memo } from "../../../utils"
import { SortOrder } from "@budibase/types"
import { Store as StoreContext } from "."
export const createStores = context => {
interface SortStore {
sort: Writable<{
column: string | null | undefined
order: SortOrder
}>
}
export type Store = SortStore
export const createStores = (context: StoreContext): SortStore => {
const { props } = context
const $props = get(props)
@ -17,7 +27,7 @@ export const createStores = context => {
}
}
export const initialise = context => {
export const initialise = (context: StoreContext) => {
const { sort, initialSortColumn, initialSortOrder, schema } = context
// Reset sort when initial sort props change

17
packages/frontend-core/src/components/grid/stores/viewport.js → packages/frontend-core/src/components/grid/stores/viewport.ts
View File

@ -1,7 +1,18 @@
import { derived } from "svelte/store"
import { derived, Readable } from "svelte/store"
import { MinColumnWidth } from "../lib/constants"
import { Store as StoreContext } from "."
import { Row } from "@budibase/types"
export const deriveStores = context => {
interface ViewportDerivedStore {
scrolledRowCount: Readable<number>
visualRowCapacity: Readable<number>
renderedRows: Readable<Row>
columnRenderMap: Readable<Record<string, true>>
}
export type Store = ViewportDerivedStore
export const deriveStores = (context: StoreContext): ViewportDerivedStore => {
const {
rowHeight,
scrollableColumns,
@ -77,7 +88,7 @@ export const deriveStores = context => {
leftEdge += $scrollableColumns[endColIdx].width
endColIdx++
}
let next = {}
let next: Record<string, true> = {}
$scrollableColumns
.slice(Math.max(0, startColIdx), endColIdx)
.forEach(col => {

2
packages/server/package.json
View File

@ -122,7 +122,7 @@
"server-destroy": "1.0.1",
"snowflake-sdk": "^1.15.0",
"socket.io": "4.8.1",
"svelte": "^4.2.10",
"svelte": "4.2.19",
"tar": "6.2.1",
"tmp": "0.2.3",
"to-json-schema": "0.2.5",

3
tsconfig.build.json
View File

@ -19,7 +19,8 @@
"@budibase/pro": ["./packages/pro/src"],
"@budibase/string-templates": ["./packages/string-templates/src"],
"@budibase/string-templates/*": ["./packages/string-templates/*"],
"@budibase/frontend-core": ["./packages/frontend-core/src"]
"@budibase/frontend-core": ["./packages/frontend-core/src"],
"@budibase/bbui": ["./packages/bbui/src"]
}
},
"exclude": []

2
yarn.lock
View File

@ -18991,7 +18991,7 @@ svelte-spa-router@^4.0.1:
dependencies:
regexparam "2.0.2"
svelte@4.2.19, svelte@^4.2.10:
svelte@4.2.19:
version "4.2.19"
resolved "https://registry.yarnpkg.com/svelte/-/svelte-4.2.19.tgz#4e6e84a8818e2cd04ae0255fcf395bc211e61d4c"
integrity sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==