diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 8c1538e098..81b1109a07 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -2,7 +2,7 @@ import { filter, cloneDeep, last, concat, isEmpty, values } from "lodash/fp" import { pipe, getNode, constructHierarchy } from "components/common/core" import * as backendStoreActions from "./backend" -import { writable } from "svelte/store" +import { writable, get } from "svelte/store" import { defaultPagesObject } from "components/userInterface/pagesParsing/defaultPagesObject" import api from "../api" import { getExactComponent } from "components/userInterface/pagesParsing/searchComponents" @@ -92,6 +92,7 @@ export const getStore = () => { store.moveUpComponent = moveUpComponent(store) store.moveDownComponent = moveDownComponent(store) store.copyComponent = copyComponent(store) + store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) return store @@ -667,6 +668,38 @@ const copyComponent = store => component => { }) } +const getPathToComponent = store => component => { + + // Gets all the components to needed to construct a path. + const tempStore = get(store) + let pathComponents = [] + let parent = component; + let root = false + while (!root) { + parent = getParent(tempStore.currentPreviewItem.props, parent) + if (!parent) { + root = true + } else { + pathComponents.push(parent) + } + } + + // Remove root entry since it's the screen or page layout. + // Reverse array since we need the correct order of the IDs + const reversedComponents = pathComponents.reverse().slice(1) + + // Add component + const allComponents = [...reversedComponents, component] + + // Map IDs + const IdList = allComponents.map(c => c._id) + + // Construct ID Path: + const path = IdList.join('/') + + return path +} + const getParent = (rootProps, child) => { let parent walkProps(rootProps, (p, breakWalk) => { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 2df4f8feef..72e91d0600 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -1,4 +1,5 @@
@@ -57,7 +60,7 @@
store.setCurrentScreen(screen.title)}> + on:click|stopPropagation={() => changeScreen(screen)}> + import { goto } from "@sveltech/routify" + import { store } from "builderStore" import { last } from "lodash/fp" import { pipe } from "../common/core" import { @@ -28,11 +30,22 @@ return onMoveDownComponent(c) } } + + const selectComponent = component => { + // Set current component + store.selectComponent(component) + + // Get ID path + const path = store.getPathToComponent(component) + + // Go to correct URL + $goto(`./:page/:screen/${path}`) + }
    {#each components as component, index (component._id)} -
  • onSelect(component)}> +
  • selectComponent(component)}>
    + import { goto } from "@sveltech/routify" // import { tick } from "svelte" import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte" @@ -16,15 +17,12 @@ const joinPath = join("/") const normalizedName = name => - pipe( - name, - [ - trimCharsStart("./"), - trimCharsStart("~/"), - trimCharsStart("../"), - trimChars(" "), - ] - ) + pipe(name, [ + trimCharsStart("./"), + trimCharsStart("~/"), + trimCharsStart("../"), + trimChars(" "), + ]) const lastPartOfName = c => c && last(c.name ? c.name.split("/") : c._component.split("/")) @@ -33,10 +31,7 @@ const isFolderSelected = (current, folder) => isInSubfolder(current, folder) - $: _layout = pipe( - layout, - [c => ({ component: c, title: lastPartOfName(c) })] - ) + $: _layout = pipe(layout, [c => ({ component: c, title: lastPartOfName(c) })]) const isScreenSelected = component => component.component && @@ -48,6 +43,11 @@ // await tick() confirmDeleteDialog.show() } + + const setCurrentScreenToLayout = () => { + store.setScreenType("page") + $goto("./:page/page-layout") + }
    @@ -55,7 +55,7 @@
    store.setScreenType('page')}> + on:click|stopPropagation={setCurrentScreenToLayout}> @@ -71,9 +71,9 @@ {#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children} store.deleteComponent(componentToDelete)} /> diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_fallback.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte new file mode 100644 index 0000000000..0110148f54 --- /dev/null +++ b/packages/builder/src/pages/[application]/frontend/[page]/[screen]/_layout.svelte @@ -0,0 +1,51 @@ + + + diff --git a/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte new file mode 100644 index 0000000000..d379bba574 --- /dev/null +++ b/packages/builder/src/pages/[application]/frontend/[page]/_layout.svelte @@ -0,0 +1,8 @@ + + + diff --git a/packages/builder/src/pages/[application]/frontend/[page]/index.svelte b/packages/builder/src/pages/[application]/frontend/[page]/index.svelte new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index bead97cca4..24a9821cc2 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -2,6 +2,19 @@ import { store, backendUiStore } from "builderStore" import { goto } from "@sveltech/routify" import { onMount } from "svelte" + import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte" + import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte" + import PageLayout from "components/userInterface/PageLayout.svelte" + import PagesList from "components/userInterface/PagesList.svelte" + import IconButton from "components/common/IconButton.svelte" + import NewScreen from "components/userInterface/NewScreen.svelte" + import CurrentItemPreview from "components/userInterface/CurrentItemPreview.svelte" + import SettingsView from "components/userInterface/SettingsView.svelte" + import PageView from "components/userInterface/PageView.svelte" + import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte" + import ConfirmDialog from "components/common/ConfirmDialog.svelte" + import { last } from "lodash/fp" + import { AddIcon } from "components/common/Icons" $: instances = $store.appInstances $: views = $store.hierarchy.indexes @@ -17,6 +30,230 @@ await selectDatabase($store.appInstances[0]) } }) + + let newScreenPicker + let confirmDeleteDialog + let componentToDelete = "" + + const newScreen = () => { + newScreenPicker.show() + } + + let settingsView + const settings = () => { + settingsView.show() + } + + const confirmDeleteComponent = component => { + componentToDelete = component + confirmDeleteDialog.show() + } + + const lastPartOfName = c => (c ? last(c.split("/")) : "") +
    + +
    + +
    +
    + Navigator +
    + + Pages +
    + +
    + +
    +
    + +
    + + + +
    + +
    +
    + + Screens + +
    + +
    +
    +
    + +
    +
    + +
    + +
    + +
    + + {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'} +
    + +
    + {/if} + +
    + + + + + store.deleteComponent(componentToDelete)} /> + + + diff --git a/packages/builder/src/pages/[application]/frontend/index.svelte b/packages/builder/src/pages/[application]/frontend/index.svelte index 89b0a83720..aa7968b989 100644 --- a/packages/builder/src/pages/[application]/frontend/index.svelte +++ b/packages/builder/src/pages/[application]/frontend/index.svelte @@ -1,5 +1,6 @@ - +