component store refactor - remove concept of currentPreviewItem and currentComponentInfo

This commit is contained in:
Martin McKeaveney 2020-12-07 15:27:46 +00:00
parent a8c715efa5
commit 81fe27f8f3
22 changed files with 153 additions and 133 deletions

View File

@ -3,6 +3,7 @@ import { get_capitalised_name } from "../helpers"
import { get } from "svelte/store" import { get } from "svelte/store"
import { allScreens } from "builderStore" import { allScreens } from "builderStore"
import { FrontendTypes } from "../constants" import { FrontendTypes } from "../constants"
import { currentAsset } from "."
export default function(component, state) { export default function(component, state) {
const capitalised = get_capitalised_name( const capitalised = get_capitalised_name(
@ -27,7 +28,7 @@ export default function(component, state) {
// if viewing screen, check current screen for duplicate // if viewing screen, check current screen for duplicate
if (state.currentFrontEndType === FrontendTypes.SCREEN) { if (state.currentFrontEndType === FrontendTypes.SCREEN) {
findMatches(state.currentPreviewItem.props) findMatches(get(currentAsset).props)
} else { } else {
// viewing a layout - need to find against all screens // viewing a layout - need to find against all screens
for (let screen of get(allScreens)) { for (let screen of get(allScreens)) {

View File

@ -5,6 +5,7 @@ import { getThemeStore } from "./store/theme"
import { derived } from "svelte/store" import { derived } from "svelte/store"
import analytics from "analytics" import analytics from "analytics"
import { LAYOUT_NAMES } from "../constants" import { LAYOUT_NAMES } from "../constants"
import { makePropsSafe } from "components/userInterface/assetParsing/createProps"
export const store = getFrontendStore() export const store = getFrontendStore()
export const backendUiStore = getBackendUiStore() export const backendUiStore = getBackendUiStore()
@ -27,6 +28,37 @@ export const currentAsset = derived(store, $store => {
return null return null
}) })
export const selectedComponent = derived(
[store, currentAsset],
([$store, $currentAsset]) => {
if (!$currentAsset || !$store.selectedComponentId) return null
function traverse(node, callback) {
if (node._id === $store.selectedComponentId) return callback(node)
if (node._children) {
node._children.forEach(child => traverse(child, callback))
}
if (node.props) {
traverse(node.props, callback)
}
}
let component
traverse($currentAsset, found => {
const componentIdentifier = found._component ?? found.props._component
const componentDef = componentIdentifier.startsWith("##")
? found
: $store.components[componentIdentifier]
component = makePropsSafe(componentDef, found)
})
return component
}
)
export const currentAssetName = derived(store, () => { export const currentAssetName = derived(store, () => {
return currentAsset.name return currentAsset.name
}) })

View File

@ -10,6 +10,7 @@ import {
backendUiStore, backendUiStore,
currentAsset, currentAsset,
mainLayout, mainLayout,
selectedComponent,
} from "builderStore" } from "builderStore"
import { fetchComponentLibDefinitions } from "../loadComponentLibraries" import { fetchComponentLibDefinitions } from "../loadComponentLibraries"
import api from "../api" import api from "../api"
@ -20,7 +21,7 @@ import {
findChildComponentType, findChildComponentType,
generateNewIdsForComponent, generateNewIdsForComponent,
getComponentDefinition, getComponentDefinition,
getParent, findParent,
} from "../storeUtils" } from "../storeUtils"
const INITIAL_FRONTEND_STATE = { const INITIAL_FRONTEND_STATE = {
@ -29,14 +30,10 @@ const INITIAL_FRONTEND_STATE = {
description: "", description: "",
layouts: [], layouts: [],
screens: [], screens: [],
mainUi: {},
unauthenticatedUi: {},
components: [], components: [],
currentPreviewItem: null,
currentComponentInfo: null,
currentFrontEndType: "none", currentFrontEndType: "none",
currentAssetId: "", currentAssetId: "",
currentComponentProps: null, selectedComponentId: "",
errors: [], errors: [],
hasAppPackage: false, hasAppPackage: false,
libraries: null, libraries: null,
@ -74,18 +71,6 @@ export const getFrontendStore = () => {
await backendUiStore.actions.database.select(pkg.application.instance) await backendUiStore.actions.database.select(pkg.application.instance)
}, },
selectAssetType: type => {
store.update(state => {
state.currentFrontEndType = type
const asset = get(currentAsset)
state.currentComponentInfo = asset && asset.props ? asset.props : null
state.currentPreviewItem = asset
state.currentView = "detail"
return state
})
},
routing: { routing: {
fetch: async () => { fetch: async () => {
const response = await api.get("/api/routing") const response = await api.get("/api/routing")
@ -102,7 +87,6 @@ export const getFrontendStore = () => {
let promise let promise
store.update(state => { store.update(state => {
const screen = get(allScreens).find(screen => screen._id === screenId) const screen = get(allScreens).find(screen => screen._id === screenId)
state.currentPreviewItem = screen
state.currentFrontEndType = FrontendTypes.SCREEN state.currentFrontEndType = FrontendTypes.SCREEN
state.currentAssetId = screenId state.currentAssetId = screenId
state.currentView = "detail" state.currentView = "detail"
@ -113,7 +97,7 @@ export const getFrontendStore = () => {
screen.props screen.props
) )
screen.props = safeProps screen.props = safeProps
state.currentComponentInfo = safeProps state.selectedComponentId = safeProps._id
return state return state
}) })
await promise await promise
@ -121,8 +105,8 @@ export const getFrontendStore = () => {
create: async screen => { create: async screen => {
screen = await store.actions.screens.save(screen) screen = await store.actions.screens.save(screen)
store.update(state => { store.update(state => {
state.currentPreviewItem = screen state.selectedComponentId = screen._id
state.currentComponentInfo = screen.props state.selectedAssetId = screen._id
state.currentFrontEndType = FrontendTypes.SCREEN state.currentFrontEndType = FrontendTypes.SCREEN
return state return state
}) })
@ -143,12 +127,11 @@ export const getFrontendStore = () => {
state.screens.push(screen) state.screens.push(screen)
if (creatingNewScreen) { if (creatingNewScreen) {
state.currentPreviewItem = screen
const safeProps = makePropsSafe( const safeProps = makePropsSafe(
state.components[screen.props._component], state.components[screen.props._component],
screen.props screen.props
) )
state.currentComponentInfo = safeProps state.selectedComponentId = safeProps._id
screen.props = safeProps screen.props = safeProps
} }
return state return state
@ -160,9 +143,9 @@ export const getFrontendStore = () => {
asset._css = (await response.json())?.css asset._css = (await response.json())?.css
}, },
regenerateCssForCurrentScreen: async () => { regenerateCssForCurrentScreen: async () => {
const { currentPreviewItem } = get(store) const asset = get(currentAsset)
if (currentPreviewItem) { if (asset) {
await store.actions.screens.regenerateCss(currentPreviewItem) await store.actions.screens.regenerateCss(asset)
} }
}, },
delete: async screens => { delete: async screens => {
@ -186,9 +169,9 @@ export const getFrontendStore = () => {
}, },
}, },
preview: { preview: {
saveSelected: async () => { saveSelected: async asset => {
const state = get(store) const state = get(store)
const selectedAsset = get(currentAsset) const selectedAsset = asset || get(currentAsset)
if (state.currentFrontEndType !== FrontendTypes.LAYOUT) { if (state.currentFrontEndType !== FrontendTypes.LAYOUT) {
await store.actions.screens.save(selectedAsset) await store.actions.screens.save(selectedAsset)
} else { } else {
@ -203,19 +186,9 @@ export const getFrontendStore = () => {
state.currentFrontEndType = FrontendTypes.LAYOUT state.currentFrontEndType = FrontendTypes.LAYOUT
state.currentView = "detail" state.currentView = "detail"
state.currentAssetId = layout._id
// This is the root of many problems. state.currentAssetId = layout._id
// Uncaught (in promise) TypeError: Cannot read property '_component' of undefined state.selectedComponentId = layout._id
// it appears that the currentLayout sometimes has _props instead of props
// why
const safeProps = makePropsSafe(
state.components[layout.props._component],
layout.props
)
state.currentComponentInfo = safeProps
layout.props = safeProps
state.currentPreviewItem = layout
return state return state
}) })
@ -284,15 +257,14 @@ export const getFrontendStore = () => {
components: { components: {
select: component => { select: component => {
store.update(state => { store.update(state => {
const componentDef = component._component.startsWith("##") state.selectedComponentId = component._id
? component
: state.components[component._component]
state.currentComponentInfo = makePropsSafe(componentDef, component)
state.currentView = "component" state.currentView = "component"
return state return state
}) })
}, },
create: (componentToAdd, presetProps) => { create: (componentToAdd, presetProps) => {
const selectedAsset = get(currentAsset)
store.update(state => { store.update(state => {
function findSlot(component_array) { function findSlot(component_array) {
if (!component_array) { if (!component_array) {
@ -310,7 +282,7 @@ export const getFrontendStore = () => {
if ( if (
componentToAdd.startsWith("##") && componentToAdd.startsWith("##") &&
findSlot(get(currentAsset)?.props._children) findSlot(selectedAsset?.props._children)
) { ) {
return state return state
} }
@ -326,29 +298,34 @@ export const getFrontendStore = () => {
_instanceName: instanceName, _instanceName: instanceName,
}) })
const currentComponent = const selected = get(selectedComponent)
state.components[state.currentComponentInfo._component]
const targetParent = currentComponent.children const currentComponentDefinition =
? state.currentComponentInfo state.components[selected._component]
: getParent(
state.currentPreviewItem.props,
state.currentComponentInfo
)
// Don't continue if there's no parent const allowsChildren = currentComponentDefinition.children
if (!targetParent) {
return state // Determine where to put the new component.
let targetParent
if (allowsChildren) {
// Child of the selected component
targetParent = selected
} else {
// Sibling of selected component
targetParent = findParent(selectedAsset.props, selected)
} }
targetParent._children = targetParent._children.concat( // Don't continue if there's no parent
newComponent.props if (!targetParent) return state
)
// Push the new component
targetParent._children.push(newComponent.props)
store.actions.preview.saveSelected() store.actions.preview.saveSelected()
state.currentView = "component" state.currentView = "component"
state.currentComponentInfo = newComponent.props state.selectedComponentId = newComponent.props._id
analytics.captureEvent("Added Component", { analytics.captureEvent("Added Component", {
name: newComponent.props._component, name: newComponent.props._component,
}) })
@ -356,14 +333,12 @@ export const getFrontendStore = () => {
}) })
}, },
copy: (component, cut = false) => { copy: (component, cut = false) => {
const selectedAsset = get(currentAsset)
store.update(state => { store.update(state => {
state.componentToPaste = cloneDeep(component) state.componentToPaste = cloneDeep(component)
state.componentToPaste.isCut = cut state.componentToPaste.isCut = cut
if (cut) { if (cut) {
const parent = getParent( const parent = findParent(selectedAsset.props, component._id)
state.currentPreviewItem.props,
component._id
)
parent._children = parent._children.filter( parent._children = parent._children.filter(
child => child._id !== component._id child => child._id !== component._id
) )
@ -374,6 +349,7 @@ export const getFrontendStore = () => {
}) })
}, },
paste: async (targetComponent, mode) => { paste: async (targetComponent, mode) => {
const selectedAsset = get(currentAsset)
let promises = [] let promises = []
store.update(state => { store.update(state => {
if (!state.componentToPaste) return state if (!state.componentToPaste) return state
@ -393,10 +369,7 @@ export const getFrontendStore = () => {
return state return state
} }
const parent = getParent( const parent = findParent(selectedAsset.props, targetComponent)
state.currentPreviewItem.props,
targetComponent
)
const targetIndex = parent._children.indexOf(targetComponent) const targetIndex = parent._children.indexOf(targetComponent)
const index = mode === "above" ? targetIndex : targetIndex + 1 const index = mode === "above" ? targetIndex : targetIndex + 1
@ -412,11 +385,13 @@ export const getFrontendStore = () => {
}, },
updateStyle: async (type, name, value) => { updateStyle: async (type, name, value) => {
let promises = [] let promises = []
const selected = get(selectedComponent)
store.update(state => { store.update(state => {
if (!state.currentComponentInfo._styles) { if (!selected._styles) {
state.currentComponentInfo._styles = {} selected._styles = {}
} }
state.currentComponentInfo._styles[type][name] = value selected._styles[type][name] = value
promises.push(store.actions.screens.regenerateCssForCurrentScreen()) promises.push(store.actions.screens.regenerateCssForCurrentScreen())
@ -428,22 +403,22 @@ export const getFrontendStore = () => {
}, },
updateProp: (name, value) => { updateProp: (name, value) => {
store.update(state => { store.update(state => {
let current_component = state.currentComponentInfo let current_component = get(selectedComponent)
current_component[name] = value current_component[name] = value
state.currentComponentInfo = current_component state.selectedComponentId = current_component._id
store.actions.preview.saveSelected() store.actions.preview.saveSelected()
return state return state
}) })
}, },
findRoute: component => { findRoute: component => {
// Gets all the components to needed to construct a path. // Gets all the components to needed to construct a path.
const tempStore = get(store) const selectedAsset = get(currentAsset)
let pathComponents = [] let pathComponents = []
let parent = component let parent = component
let root = false let root = false
while (!root) { while (!root) {
parent = getParent(tempStore.currentPreviewItem.props, parent) parent = findParent(selectedAsset.props, parent)
if (!parent) { if (!parent) {
root = true root = true
} else { } else {

View File

@ -2,7 +2,12 @@ import { getBuiltin } from "components/userInterface/assetParsing/createProps"
import { uuid } from "./uuid" import { uuid } from "./uuid"
import getNewComponentName from "./getNewComponentName" import getNewComponentName from "./getNewComponentName"
export const getParent = (rootProps, child) => { /**
* Find the parent component of the passed in child.
* @param {Object} rootProps - props to search for the parent in
* @param {String|Object} child - id of the child or the child itself to find the parent of
*/
export const findParent = (rootProps, child) => {
let parent let parent
walkProps(rootProps, (props, breakWalk) => { walkProps(rootProps, (props, breakWalk) => {
if ( if (

View File

@ -30,7 +30,7 @@
) )
} }
} }
$: selectedComponentId = $store.currentComponentInfo?._id ?? "" $: selectedComponentId = $store.selectedComponentId ?? ""
$: previewData = { $: previewData = {
layout, layout,
screen, screen,
@ -71,7 +71,7 @@
</script> </script>
<div class="component-container"> <div class="component-container">
{#if $store.currentPreviewItem} {#if $currentAsset}
<iframe <iframe
style="height: 100%; width: 100%" style="height: 100%; width: 100%"
title="componentPreview" title="componentPreview"

View File

@ -1,10 +1,11 @@
<script> <script>
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { store } from "builderStore" import { get } from "svelte/store"
import { store, currentAsset } from "builderStore"
import { getComponentDefinition } from "builderStore/storeUtils" import { getComponentDefinition } from "builderStore/storeUtils"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { last } from "lodash/fp" import { last } from "lodash/fp"
import { getParent } from "builderStore/storeUtils" import { findParent } from "builderStore/storeUtils"
import { DropdownMenu } from "@budibase/bbui" import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -33,7 +34,8 @@
const moveUpComponent = () => { const moveUpComponent = () => {
store.update(state => { store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component) const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) { if (parent) {
const currentIndex = parent._children.indexOf(component) const currentIndex = parent._children.indexOf(component)
@ -43,7 +45,7 @@
newChildren.splice(currentIndex - 1, 0, component) newChildren.splice(currentIndex - 1, 0, component)
parent._children = newChildren parent._children = newChildren
} }
state.currentComponentInfo = component state.selectedComponentId = component._id
store.actions.preview.saveSelected() store.actions.preview.saveSelected()
return state return state
@ -52,7 +54,8 @@
const moveDownComponent = () => { const moveDownComponent = () => {
store.update(state => { store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component) const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) { if (parent) {
const currentIndex = parent._children.indexOf(component) const currentIndex = parent._children.indexOf(component)
@ -62,7 +65,7 @@
newChildren.splice(currentIndex + 1, 0, component) newChildren.splice(currentIndex + 1, 0, component)
parent._children = newChildren parent._children = newChildren
} }
state.currentComponentInfo = component state.selectedComponentId = component._id
store.actions.preview.saveSelected() store.actions.preview.saveSelected()
return state return state
@ -76,7 +79,8 @@
const deleteComponent = () => { const deleteComponent = () => {
store.update(state => { store.update(state => {
const parent = getParent(state.currentPreviewItem.props, component) const asset = get(currentAsset)
const parent = findParent(asset.props, component)
if (parent) { if (parent) {
parent._children = parent._children.filter(child => child !== component) parent._children = parent._children.filter(child => child !== component)

View File

@ -72,7 +72,7 @@
text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName} text={isScreenslot(component._component) ? 'Screenslot' : component._instanceName}
withArrow withArrow
indentLevel={level + 3} indentLevel={level + 3}
selected={currentComponent === component}> selected={$store.selectedComponentId === component._id}>
<ComponentDropdownMenu {component} /> <ComponentDropdownMenu {component} />
</NavItem> </NavItem>

View File

@ -1,7 +1,7 @@
<script> <script>
import { writable } from "svelte/store" import { writable } from "svelte/store"
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { store } from "builderStore" import { store, selectedComponent, currentAsset } from "builderStore"
import instantiateStore from "./dragDropStore" import instantiateStore from "./dragDropStore"
import ComponentTree from "./ComponentTree.svelte" import ComponentTree from "./ComponentTree.svelte"
@ -14,7 +14,7 @@
export let path export let path
export let indent export let indent
$: selectedScreen = $store.currentPreviewItem $: selectedScreen = $currentAsset
const changeScreen = screenId => { const changeScreen = screenId => {
// select the route // select the route
@ -34,8 +34,8 @@
<NavItem <NavItem
icon="ri-artboard-2-line" icon="ri-artboard-2-line"
indentLevel={indent || 1} indentLevel={indent || 1}
selected={$store.currentPreviewItem._id === screenId} selected={$store.currentAssetId === screenId}
opened={$store.currentPreviewItem._id === screenId} opened={$store.currentAssetId === screenId}
text={url === '/' ? 'Home' : url} text={url === '/' ? 'Home' : url}
withArrow={route.subpaths} withArrow={route.subpaths}
on:click={() => changeScreen(screenId)}> on:click={() => changeScreen(screenId)}>
@ -44,7 +44,7 @@
{#if selectedScreen?._id === screenId} {#if selectedScreen?._id === screenId}
<ComponentTree <ComponentTree
components={selectedScreen.props._children} components={selectedScreen.props._children}
currentComponent={$store.currentComponentInfo} currentComponent={$selectedComponent}
{dragDropStore} /> {dragDropStore} />
{/if} {/if}
{/each} {/each}

View File

@ -1,5 +1,5 @@
<script> <script>
import { store } from "builderStore" import { store, selectedComponent, currentAsset } from "builderStore"
import { FrontendTypes } from "constants" import { FrontendTypes } from "constants"
import panelStructure from "./temporaryPanelStructure.js" import panelStructure from "./temporaryPanelStructure.js"
import CategoryTab from "./CategoryTab.svelte" import CategoryTab from "./CategoryTab.svelte"
@ -15,8 +15,8 @@
$: componentInstance = $: componentInstance =
$store.currentView !== "component" $store.currentView !== "component"
? { ...$store.currentPreviewItem, ...$store.currentComponentInfo } ? { ...$currentAsset, ...$selectedComponent }
: $store.currentComponentInfo : $selectedComponent
$: componentDefinition = $store.components[componentInstance._component] $: componentDefinition = $store.components[componentInstance._component]
$: componentPropDefinition = $: componentPropDefinition =
flattenedPanel.find( flattenedPanel.find(
@ -60,14 +60,15 @@
} }
function setAssetProps(name, value) { function setAssetProps(name, value) {
const selectedAsset = get(currentAsset)
store.update(state => { store.update(state => {
if ( if (
name === "_instanceName" && name === "_instanceName" &&
state.currentFrontEndType === FrontendTypes.SCREEN state.currentFrontEndType === FrontendTypes.SCREEN
) { ) {
state.currentPreviewItem.props._instanceName = value selectedAsset.props._instanceName = value
} else { } else {
state.currentPreviewItem[name] = value selectedAsset[name] = value
} }
return state return state
}) })
@ -99,7 +100,7 @@
displayNameField={displayName} displayNameField={displayName}
onChange={store.actions.components.updateProp} onChange={store.actions.components.updateProp}
onScreenPropChange={setAssetProps} onScreenPropChange={setAssetProps}
assetInstance={$store.currentView !== 'component' && $store.currentPreviewItem} /> assetInstance={$store.currentView !== 'component' && $currentAsset} />
{/if} {/if}
</div> </div>

View File

@ -1,6 +1,6 @@
<script> <script>
import { goto, url } from "@sveltech/routify" import { goto, url } from "@sveltech/routify"
import { store, currentAssetName } from "builderStore" import { store, currentAssetName, selectedComponent } from "builderStore"
import components from "./temporaryPanelStructure.js" import components from "./temporaryPanelStructure.js"
import { DropdownMenu } from "@budibase/bbui" import { DropdownMenu } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns" import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
@ -26,7 +26,7 @@
const onComponentChosen = component => { const onComponentChosen = component => {
store.actions.components.create(component._component, component.presetProps) store.actions.components.create(component._component, component.presetProps)
const path = store.actions.components.findRoute($store.currentComponentInfo) const path = store.actions.components.findRoute($selectedComponent)
$goto(`./${$store.currentAssetId}/${path}`) $goto(`./${$store.currentAssetId}/${path}`)
close() close()
} }

View File

@ -1,15 +1,15 @@
<script> <script>
import { Select, Label } from "@budibase/bbui" import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte" import SaveFields from "./SaveFields.svelte"
export let parameters export let parameters
$: bindableProperties = fetchBindableProperties({ $: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })

View File

@ -1,6 +1,6 @@
<script> <script>
import { Select, Label } from "@budibase/bbui" import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
export let parameters export let parameters
@ -8,9 +8,9 @@
let idFields let idFields
$: bindableProperties = fetchBindableProperties({ $: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })

View File

@ -1,7 +1,7 @@
<script> <script>
// accepts an array of field names, and outputs an object of { FieldName: value } // accepts an array of field names, and outputs an object of { FieldName: value }
import { DataList, Label, TextButton, Spacer, Select } from "@budibase/bbui" import { DataList, Label, TextButton, Spacer, Select } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
import { CloseCircleIcon, AddIcon } from "components/common/Icons" import { CloseCircleIcon, AddIcon } from "components/common/Icons"
import { import {
@ -32,9 +32,9 @@
})) }))
$: bindableProperties = fetchBindableProperties({ $: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })

View File

@ -1,6 +1,6 @@
<script> <script>
import { Select, Label } from "@budibase/bbui" import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte" import SaveFields from "./SaveFields.svelte"
import { import {
@ -16,9 +16,9 @@
let schemaFields let schemaFields
$: bindableProperties = fetchBindableProperties({ $: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })

View File

@ -1,6 +1,6 @@
<script> <script>
import { Select, Label } from "@budibase/bbui" import { Select, Label } from "@budibase/bbui"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
import SaveFields from "./SaveFields.svelte" import SaveFields from "./SaveFields.svelte"
import { import {
@ -11,9 +11,9 @@
export let parameters export let parameters
$: bindableProperties = fetchBindableProperties({ $: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })

View File

@ -1,7 +1,7 @@
<script> <script>
import { onMount } from "svelte" import { onMount } from "svelte"
import { goto, params, url } from "@sveltech/routify" import { goto, params, url } from "@sveltech/routify"
import { store, currentAsset } from "builderStore" import { store, currentAsset, selectedComponent } from "builderStore"
import { FrontendTypes } from "constants" import { FrontendTypes } from "constants"
import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte" import ComponentNavigationTree from "components/userInterface/ComponentNavigationTree/index.svelte"
import Layout from "components/userInterface/Layout.svelte" import Layout from "components/userInterface/Layout.svelte"
@ -24,6 +24,8 @@
let routes = {} let routes = {}
let tab = $params.assetType let tab = $params.assetType
$: console.log("selected", $selectedComponent)
function navigate({ detail }) { function navigate({ detail }) {
if (!detail) return if (!detail) return
$goto(`./${detail.heading.key}`) $goto(`./${detail.heading.key}`)

View File

@ -6,7 +6,7 @@
import initDragDropStore from "./ComponentNavigationTree/dragDropStore" import initDragDropStore from "./ComponentNavigationTree/dragDropStore"
import NavItem from "components/common/NavItem.svelte" import NavItem from "components/common/NavItem.svelte"
import { last } from "lodash/fp" import { last } from "lodash/fp"
import { store, currentAsset } from "builderStore" import { store, currentAsset, selectedComponent } from "builderStore"
import { writable } from "svelte/store" import { writable } from "svelte/store"
export let layout export let layout
@ -27,7 +27,7 @@
icon="ri-layout-3-line" icon="ri-layout-3-line"
text={layout.name} text={layout.name}
withArrow withArrow
selected={$store.currentComponentInfo?._id === layout.props?._id} selected={$selectedComponent._id === layout.props?._id}
opened={$store.currentAssetId === layout._id} opened={$store.currentAssetId === layout._id}
on:click={selectLayout}> on:click={selectLayout}>
<LayoutDropdownMenu {layout} /> <LayoutDropdownMenu {layout} />
@ -36,6 +36,6 @@
{#if $store.currentAssetId === layout._id && layout.props?._children} {#if $store.currentAssetId === layout._id && layout.props?._children}
<ComponentTree <ComponentTree
components={layout.props._children} components={layout.props._children}
currentComponent={$store.currentComponentInfo} currentComponent={$selectedComponent}
{dragDropStore} /> {dragDropStore} />
{/if} {/if}

View File

@ -1,7 +1,7 @@
<script> <script>
import { Icon } from "@budibase/bbui" import { Icon } from "@budibase/bbui"
import Input from "./PropertyPanelControls/Input.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
import { import {
readableToRuntimeBinding, readableToRuntimeBinding,
@ -35,9 +35,9 @@
function getBindableProperties() { function getBindableProperties() {
// Get all bindableProperties // Get all bindableProperties
bindableProperties = fetchBindableProperties({ bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })
} }

View File

@ -1,7 +1,7 @@
<script> <script>
import { DataList } from "@budibase/bbui" import { DataList } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { store, allScreens, backendUiStore } from "builderStore" import { store, allScreens, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "builderStore/fetchBindableProperties" import fetchBindableProperties from "builderStore/fetchBindableProperties"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -27,9 +27,9 @@
] ]
const bindableProperties = fetchBindableProperties({ const bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })

View File

@ -5,7 +5,7 @@
import LayoutSelect from "./LayoutSelect.svelte" import LayoutSelect from "./LayoutSelect.svelte"
import Input from "./PropertyPanelControls/Input.svelte" import Input from "./PropertyPanelControls/Input.svelte"
import { excludeProps } from "./propertyCategories.js" import { excludeProps } from "./propertyCategories.js"
import { store, allScreens } from "builderStore" import { store, allScreens, currentAsset } from "builderStore"
import { walkProps } from "builderStore/storeUtils" import { walkProps } from "builderStore/storeUtils"
export let panelDefinition = [] export let panelDefinition = []
@ -65,7 +65,7 @@
} }
// if viewing screen, check current screen for duplicate // if viewing screen, check current screen for duplicate
if ($store.currentFrontEndType === FrontendTypes.SCREEN) { if ($store.currentFrontEndType === FrontendTypes.SCREEN) {
lookForDuplicate($store.currentPreviewItem.props) lookForDuplicate($currentAsset.props)
} else { } else {
// need to dedupe against all screens // need to dedupe against all screens
for (let screen of $allScreens) { for (let screen of $allScreens) {

View File

@ -1,7 +1,7 @@
<script> <script>
import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui" import { Button, Icon, DropdownMenu, Spacer, Heading } from "@budibase/bbui"
import { createEventDispatcher } from "svelte" import { createEventDispatcher } from "svelte"
import { store, backendUiStore } from "builderStore" import { store, backendUiStore, currentAsset } from "builderStore"
import fetchBindableProperties from "../../builderStore/fetchBindableProperties" import fetchBindableProperties from "../../builderStore/fetchBindableProperties"
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
@ -32,9 +32,9 @@
}, []) }, [])
$: bindableProperties = fetchBindableProperties({ $: bindableProperties = fetchBindableProperties({
componentInstanceId: $store.currentComponentInfo._id, componentInstanceId: $store.selectedComponentId,
components: $store.components, components: $store.components,
screen: $store.currentPreviewItem, screen: $currentAsset,
tables: $backendUiStore.tables, tables: $backendUiStore.tables,
}) })

View File

@ -38,6 +38,6 @@ function replicateLocal() {
}) })
} }
replicateLocal() // replicateLocal()
module.exports = Pouch module.exports = Pouch